start styling of sidebar

kadena-community · Oct 28, 2024 · 9fb19b5 · 9fb19b5
1 parent 0809702
commit 9fb19b5
Show file tree

Hide file tree

Showing 10 changed files with 362 additions and 19 deletions.
diff --git a/packages/libs/kode-ui/src/components/SideBar/SideBar.stories.tsx b/packages/libs/kode-ui/src/components/SideBar/SideBar.stories.tsx
@@ -1,11 +1,22 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import type { MouseEventHandler } from 'react';
+import React, { useState } from 'react';
 
+import {
+  MonoAccountTree,
+  MonoAddCircleOutline,
+  MonoControlPointDuplicate,
+  MonoLightMode,
+  MonoWifiTethering,
+} from '@kadena/kode-icons/system';
+import type { PressEvent } from 'react-aria';
+import { Button } from '../Button';
 import type { ISideBar } from './SideBar';
 import { SideBar } from './SideBar';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarHeader } from './components/SideBarHeader';
 import { SideBarItem } from './components/SideBarItem';
+import { SideBarItemsInline } from './components/SideBarItemsInline';
 import { SideBarNavigation } from './components/SideBarNavigation';
 
 const sampleNetworkItems: string[] = ['Mainnet', 'Testnet'];
@@ -35,16 +46,52 @@ export const Primary: IStory = {
   name: 'SideBar',
   args: {},
   render: () => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const onExpand = (_e: PressEvent) => {
+      setIsExpanded((v) => !v);
+    };
+
     return (
-      <SideBar isExpanded={true}>
+      <SideBar isExpanded={isExpanded} onExpand={onExpand}>
         <SideBarHeader>
-          <SideBarItem label="headeritem 1" />
+          <SideBarItem visual={<MonoWifiTethering />}>
+            <Button variant="outlined" startVisual={<MonoWifiTethering />}>
+              Mainnet
+            </Button>
+          </SideBarItem>
+          <SideBarItem visual={<MonoControlPointDuplicate />}>
+            <Button
+              variant="outlined"
+              startVisual={<MonoControlPointDuplicate />}
+            >
+              New Transfer
+            </Button>
+          </SideBarItem>
         </SideBarHeader>
         <SideBarNavigation>
           <SideBarItem label="nav item 1" />
         </SideBarNavigation>
         <SideBarFooter>
-          <SideBarItem label="footer item 1" />
+          <SideBarItem visual={<MonoControlPointDuplicate />}>
+            <Button
+              variant="outlined"
+              startVisual={<MonoControlPointDuplicate />}
+            >
+              New Transfer
+            </Button>
+          </SideBarItem>
+
+          <SideBarItemsInline>
+            <SideBarItem visual={<MonoAccountTree />}>
+              <Button variant="outlined" startVisual={<MonoAccountTree />}>
+                ProfileX
+              </Button>
+            </SideBarItem>
+            <SideBarItem visual={<MonoLightMode />}>
+              <Button variant="transparent" startVisual={<MonoLightMode />} />
+            </SideBarItem>
+          </SideBarItemsInline>
         </SideBarFooter>
       </SideBar>
     );

diff --git a/packages/libs/kode-ui/src/components/SideBar/SideBar.tsx b/packages/libs/kode-ui/src/components/SideBar/SideBar.tsx
@@ -1,13 +1,59 @@
-import type { FC, PropsWithChildren } from 'react';
+import { MonoMenu, MonoMenuOpen } from '@kadena/kode-icons/system';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
+import type { PressEvent } from '../Button';
+import { Button } from '../Button';
+import { Stack } from '../Layout';
+import { KadenaLogo } from './components/Logo/KadenaLogo';
+import { KLogo } from './components/Logo/KLogo';
+import {
+  menuLogoClass,
+  menuMenuIconClass,
+  menuWrapperClass,
+} from './style.css';
 
 export interface ISideBar extends PropsWithChildren {
   isExpanded?: boolean;
+  logo?: ReactElement;
+  onExpand: (e: PressEvent) => void;
 }
 
-export const SideBar: FC<ISideBar> = ({ children, isExpanded = false }) => {
+export const SideBar: FC<ISideBar> = ({
+  children,
+  isExpanded = false,
+  onExpand,
+  logo,
+}) => {
+  const ShowLogo = !isExpanded ? (
+    <KLogo className={menuLogoClass} height={40} />
+  ) : logo ? (
+    logo
+  ) : (
+    <KadenaLogo height={40} />
+  );
+
+  const handleExpand = (e: PressEvent) => {
+    if (onExpand) {
+      onExpand(e);
+    }
+  };
+
   return (
-    <aside>
+    <aside className={menuWrapperClass({ expanded: isExpanded })}>
+      <Stack width="100%" justifyContent="space-between" alignItems="center">
+        {ShowLogo}
+        <Stack
+          className={classNames(menuMenuIconClass({ expanded: isExpanded }))}
+        >
+          <Button
+            variant="transparent"
+            onPress={handleExpand}
+            startVisual={isExpanded ? <MonoMenuOpen /> : <MonoMenu />}
+          />
+        </Stack>
+      </Stack>
+
       {React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) return null;
         return React.cloneElement(child, { ...child.props, isExpanded });

diff --git a/packages/libs/kode-ui/src/components/SideBar/components/Logo/KLogo.tsx b/packages/libs/kode-ui/src/components/SideBar/components/Logo/KLogo.tsx
@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import React from 'react';
+
+export const KLogo: FC<{ height: number; className?: string }> = (props) => (
+  <svg
+    data-style="kdacolor"
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M56.8703 56L39.4779 55.9911L17.7995 39.0708L26.6166 32L56.8703 56Z"
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      fill="#4A9079"
+    />
+    <path
+      d="M56.8703 8H39.4868L17.7995 24.9292L26.6166 32L56.8703 8Z"
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      fill="#4A9079"
+    />
+    <path
+      d="M17.7935 55.9913L7 47.4633V16.537L17.7935 8.00901V55.9913Z"
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      fill="#4A9079"
+    />
+  </svg>
+);
diff --git a/packages/libs/kode-ui/src/components/SideBar/components/Logo/KadenaLogo.tsx b/packages/libs/kode-ui/src/components/SideBar/components/Logo/KadenaLogo.tsx
@@ -0,0 +1,59 @@
+import type { FC } from 'react';
+import React from 'react';
+
+export const KadenaLogo: FC<{ height: number; className?: string }> = (
+  props,
+) => (
+  <svg
+    data-style="kdacolor"
+    viewBox="0 0 225 64"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M66.3452 46.2832V17.7139H70.7168V29.5871H71.3924C73.1682 27.6225 76.705 23.6638 82.0089 17.7139H87.7345C85.587 20.0797 81.3068 24.767 74.8938 31.7788C77.118 34.1947 81.5605 39.0295 88.2124 46.2832H82.2891C80.4867 44.2626 76.8555 40.2272 71.3953 34.1682H70.7198V46.2832H66.3481H66.3452Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M89.4012 46.2832C90.7522 41.528 93.4572 32.0029 97.5103 17.7109H105.263C106.614 22.4661 109.319 31.9911 113.372 46.2832H108.838C108.519 45.1681 107.897 42.9233 106.971 39.5487H95.7994C95.5074 40.6637 94.885 42.9086 93.9322 46.2832H89.4012ZM96.9145 35.4838H105.858C105.168 32.9617 103.791 27.9528 101.726 20.4602H101.05C100.36 22.9587 98.9823 27.9646 96.9174 35.4838H96.9145Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M116.159 46.2832V17.7139H127.569C131.36 17.7139 134.26 18.6844 136.274 20.6224C138.313 22.5634 139.336 25.472 139.336 29.3481V34.6873C139.336 38.5929 138.316 41.5015 136.274 43.413C134.26 45.3245 131.357 46.2802 127.569 46.2802H116.159V46.2832ZM120.614 42.2979H127.611C130.074 42.2979 131.903 41.6755 133.097 40.4277C134.289 39.1534 134.885 37.2802 134.885 34.8083V29.1888C134.885 26.6903 134.289 24.8319 133.097 23.6077C131.906 22.3864 130.077 21.7758 127.611 21.7758H120.614V42.2979Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M144.304 46.2832V17.7139H162.233V21.7404H148.676V29.9086H161.121V33.9351H148.676V42.3038H162.434V46.2891H144.304V46.2832Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M167.05 46.2832V17.7139H175.519C176.791 21.9911 179.363 30.531 183.233 43.3363H183.909V17.7139H188.242V46.2861H179.773C178.501 42.0088 175.932 33.4543 172.059 20.6224H171.383V46.2861H167.05V46.2832Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.text.brand.wordmark.default}"
+      d="M192.091 46.2832C193.442 41.528 196.147 32.0029 200.201 17.7109H207.953C209.304 22.4661 212.009 31.9911 216.062 46.2832H211.531C211.212 45.1681 210.59 42.9233 209.664 39.5487H198.496C198.204 40.6637 197.581 42.9086 196.628 46.2832H192.094H192.091ZM199.605 35.4838H208.549C207.858 32.9617 206.481 27.9528 204.416 20.4602H203.74C203.05 22.9587 201.673 27.9646 199.608 35.4838H199.605Z"
+      fill="#0F0F0F"
+    />
+    <path
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      d="M57.8702 56L40.4778 55.9911L18.7994 39.0708L27.6165 32L57.8702 56Z"
+      fill="#4A9079"
+    />
+    <path
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      d="M57.8702 8H40.4867L18.7994 24.9292L27.6165 32L57.8702 8Z"
+      fill="#4A9079"
+    />
+    <path
+      id="{kda.foundation.color.icon.brand.logo.default}"
+      d="M18.7935 55.9913L8 47.4633V16.537L18.7935 8.00902V55.9913Z"
+      fill="#4A9079"
+    />
+  </svg>
+);
diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarFooter.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarFooter.tsx
@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
+import { listClass } from '../style.css';
 
 export interface ISideBarFooter extends PropsWithChildren {
   isExpanded?: boolean;
@@ -11,7 +12,9 @@ export const SideBarFooter: FC<ISideBarFooter> = ({
 }) => {
   return (
     <footer>
-      <ul>
+      <ul
+        className={listClass({ direction: 'vertical', expanded: isExpanded })}
+      >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return null;
           return React.cloneElement(child, { ...child.props, isExpanded });

diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarHeader.tsx
@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
+import { listClass } from '../style.css';
 
 export interface ISideBarHeader extends PropsWithChildren {
   isExpanded?: boolean;
@@ -11,7 +12,9 @@ export const SideBarHeader: FC<ISideBarHeader> = ({
 }) => {
   return (
     <header>
-      <ul>
+      <ul
+        className={listClass({ direction: 'vertical', expanded: isExpanded })}
+      >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return null;
           return React.cloneElement(child, { ...child.props, isExpanded });

diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarItem.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarItem.tsx
@@ -1,21 +1,27 @@
-import type { FC } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
-import { Text } from './../../Typography';
+import { listItemClass } from '../style.css';
+import { Button } from './../../Button';
 
-export interface ISideBarItem {
-  label: string;
+export interface ISideBarItem extends PropsWithChildren {
+  label?: string;
+  visual?: ReactElement;
   isExpanded?: boolean;
 }
 
 export const SideBarItem: FC<ISideBarItem> = ({
   label,
   isExpanded = false,
+  visual,
+  children,
 }) => {
   return (
-    <li>
-      <Text>
-        {label} {isExpanded.toString()}
-      </Text>
+    <li className={listItemClass}>
+      {!isExpanded ? (
+        <Button variant="transparent" startVisual={visual} />
+      ) : (
+        children
+      )}
     </li>
   );
 };
diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarItemsInline.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarItemsInline.tsx
@@ -0,0 +1,24 @@
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+import { listClass, listItemInlineClass } from '../style.css';
+
+export interface ISideBarItemsInline extends PropsWithChildren {
+  isExpanded?: boolean;
+}
+export const SideBarItemsInline: FC<ISideBarItemsInline> = ({
+  children,
+  isExpanded = false,
+}) => {
+  return (
+    <li className={listItemInlineClass}>
+      <ul
+        className={listClass({ direction: 'horizontal', expanded: isExpanded })}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return null;
+          return React.cloneElement(child, { ...child.props, isExpanded });
+        })}
+      </ul>
+    </li>
+  );
+};
diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarNavigation.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarNavigation.tsx
@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
+import { listClass, menuNavWrapperClass } from '../style.css';
 
 export interface ISideBarNavigation extends PropsWithChildren {
   isExpanded?: boolean;
@@ -10,8 +11,10 @@ export const SideBarNavigation: FC<ISideBarNavigation> = ({
   isExpanded = false,
 }) => {
   return (
-    <nav>
-      <ul>
+    <nav className={menuNavWrapperClass}>
+      <ul
+        className={listClass({ direction: 'vertical', expanded: isExpanded })}
+      >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return null;
           return React.cloneElement(child, { ...child.props, isExpanded });