all functionality

kadena-community · Oct 28, 2024 · c2a360f · c2a360f
1 parent 4d75989
commit c2a360f
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 59 deletions.
diff --git a/packages/libs/kode-ui/.storybook/global.css.ts b/packages/libs/kode-ui/.storybook/global.css.ts
@@ -9,3 +9,7 @@ globalStyle('pre.prismjs > div, pre.prismjs > div span, code', {
 globalStyle('code', {
   fontWeight: vars.fontWeights.$semiBold,
 });
+
+globalStyle('body', {
+  padding: '0!important',
+});
diff --git a/packages/libs/kode-ui/src/components/SideBar/SideBar.tsx b/packages/libs/kode-ui/src/components/SideBar/SideBar.tsx
@@ -1,23 +1,23 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import { useSideBar } from './SideBarProvider';
-import { menuWrapperClass } from './style.css';
+import { menuWrapperClass, menuWrapperMobileExpandedClass } from './style.css';
 
 export interface ISideBar extends PropsWithChildren {
   activeUrl?: string;
   logo?: ReactElement;
 }
 
-export const SideBar: FC<ISideBar> = ({
-  children,
-
-  activeUrl,
-  logo,
-}) => {
+export const SideBar: FC<ISideBar> = ({ children }) => {
   const { isExpanded } = useSideBar();
 
   return (
-    <aside className={menuWrapperClass({ expanded: isExpanded })}>
+    <aside
+      className={classNames(menuWrapperClass({ expanded: isExpanded }), {
+        [menuWrapperMobileExpandedClass]: isExpanded,
+      })}
+    >
       {children}
     </aside>
   );

diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarHeader.tsx
@@ -5,10 +5,12 @@ import React from 'react';
 import type { PressEvent } from 'react-aria';
 import { useSideBar } from '../SideBarProvider';
 import {
+  headerClass,
+  headerExpandedClass,
   headerWrapperClass,
-  menuLogoClass,
   menuMenuIconClass,
 } from '../style.css';
+import { Media } from './../../../components/Media';
 import { Button } from './../../Button';
 import { Stack } from './../../Layout';
 import { KLogo } from './Logo/KLogo';
@@ -27,7 +29,7 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
   };
 
   const ShowLogo = !isExpanded ? (
-    <KLogo className={menuLogoClass} height={40} />
+    <KLogo height={40} />
   ) : logo ? (
     logo
   ) : (
@@ -36,17 +38,29 @@ export const SideBarHeader: FC<IProps> = ({ logo }) => {
 
   return (
     <header className={headerWrapperClass}>
-      <Stack width="100%" justifyContent="space-between" alignItems="center">
-        {ShowLogo}
-        <Stack
-          className={classNames(menuMenuIconClass({ expanded: isExpanded }))}
-        >
+      <Stack
+        className={classNames(headerClass, {
+          [headerExpandedClass]: !isExpanded,
+        })}
+        width="100%"
+        alignItems="center"
+      >
+        <Stack style={{ gridArea: 'header-logo' }}>
+          <>
+            <Media lessThan="md">
+              <KLogo height={40} />
+            </Media>
+            <Media greaterThanOrEqual="md">{ShowLogo}</Media>
+          </>
+        </Stack>
+        <Stack className={classNames(menuMenuIconClass)}>
           <Button
             variant="transparent"
             onPress={handleExpand}
             startVisual={isExpanded ? <MonoMenuOpen /> : <MonoMenu />}
           />
         </Stack>
+        <Stack style={{ gridArea: 'header-crumbs' }}>breadcrumbs</Stack>
       </Stack>
     </header>
   );

diff --git a/packages/libs/kode-ui/src/components/SideBar/components/SideBarItem.tsx b/packages/libs/kode-ui/src/components/SideBar/components/SideBarItem.tsx
@@ -2,6 +2,7 @@ import type { FC, PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import { useSideBar } from '../SideBarProvider';
 import { listItemClass } from '../style.css';
+import { Media } from './../../../components/Media';
 import { Button } from './../../Button';
 
 export interface ISideBarItem extends PropsWithChildren {
@@ -10,13 +11,17 @@ export interface ISideBarItem extends PropsWithChildren {
 
 export const SideBarItem: FC<ISideBarItem> = ({ visual, children }) => {
   const { isExpanded } = useSideBar();
+
   return (
     <li className={listItemClass}>
-      {!isExpanded ? (
-        <Button variant="transparent" startVisual={visual} />
-      ) : (
-        children
-      )}
+      <Media lessThan="md">{children}</Media>
+      <Media greaterThanOrEqual="md">
+        {!isExpanded ? (
+          <Button variant="transparent" startVisual={visual} />
+        ) : (
+          children
+        )}
+      </Media>
     </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
@@ -1,15 +1,23 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { useSideBar } from '../SideBarProvider';
-import { listClass, listItemInlineClass } from '../style.css';
+import {
+  listClass,
+  listItemInlineClass,
+  listNotExpandedClass,
+} from '../style.css';
 
 export interface ISideBarItemsInline extends PropsWithChildren {}
 export const SideBarItemsInline: FC<ISideBarItemsInline> = ({ children }) => {
   const { isExpanded } = useSideBar();
   return (
     <li className={listItemInlineClass}>
       <ul
-        className={listClass({ direction: 'horizontal', expanded: isExpanded })}
+        className={classNames(
+          listClass({ direction: 'horizontal', expanded: isExpanded }),
+          { [listNotExpandedClass]: !isExpanded },
+        )}
       >
         {children}
       </ul>

diff --git a/packages/libs/kode-ui/src/components/SideBar/style.css.ts b/packages/libs/kode-ui/src/components/SideBar/style.css.ts
@@ -1,62 +1,63 @@
 import { globalStyle } from '@vanilla-extract/css';
-import { atoms, recipe, responsiveStyle, style } from './../../styles';
+import { atoms, recipe, responsiveStyle, style, token } from './../../styles';
 
 export const menuWrapperClass = recipe({
   base: [
     atoms({
-      position: 'relative',
-
       flexDirection: 'column',
       flex: 1,
     }),
     {
-      gridArea: 'sidebarlayout-sidebar',
+      backgroundColor: 'red',
+
       height: '100%',
     },
     responsiveStyle({
       xs: {
-        display: 'none',
+        height: 'calc(100dvh - 60px)',
+        width: '100dvw',
+        display: 'flex',
+        willChange: 'transform',
+        transition: 'transform .4s ease',
+        transform: 'translateX(-100%)',
+        position: 'fixed',
+        gridArea: 'auto',
+        inset: 0,
+        top: '60px',
+        zIndex: token('zIndex.overlay'),
       },
       md: {
         display: 'flex',
+        width: '50px',
+        padding: 'md',
+        paddingInline: 'xs',
+        gridArea: 'sidebarlayout-sidebar',
+        transform: 'translateX(0%)',
       },
     }),
   ],
   variants: {
     expanded: {
-      true: [
-        atoms({
-          padding: 'md',
-        }),
-        {
-          width: '200px',
-        },
-      ],
-      false: [
-        atoms({
-          paddingInline: 'xs',
-        }),
-        {
-          width: '40px',
-        },
-      ],
+      true: [atoms({}), {}],
+      false: [atoms({}), {}],
     },
   },
 });
 
-export const menuMenuIconClass = recipe({
-  base: {
-    transition: 'all .2s ease',
-    transform: 'translateX(0px)',
-  },
-  variants: {
-    expanded: {
-      true: {},
-      false: {
-        transform: 'translateX(50px)',
-      },
+export const menuWrapperMobileExpandedClass = style([
+  responsiveStyle({
+    xs: {
+      transform: 'translateX(0%)',
     },
-  },
+    md: {
+      width: '200px',
+      paddingInline: 'md',
+    },
+  }),
+]);
+
+export const menuMenuIconClass = style({
+  gridArea: 'header-toggle',
 });
 
 export const menuNavWrapperClass = style([
@@ -107,7 +108,7 @@ export const listClass = recipe({
         expanded: false,
       },
       style: {
-        flexDirection: 'column',
+        flexDirection: 'row',
       },
     },
   ],
@@ -116,6 +117,8 @@ export const listClass = recipe({
 export const listItemClass = style([
   atoms({
     display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
   }),
   {},
 ]);
@@ -128,11 +131,77 @@ export const listItemInlineClass = style([
   },
 ]);
 
-globalStyle(`${listItemClass} > *`, { flex: 1 });
+export const listNotExpandedClass = style([
+  {},
+  responsiveStyle({
+    md: {
+      flexDirection: 'column',
+    },
+  }),
+]);
 
-export const headerWrapperClass = style({
-  gridArea: 'sidebarlayout-header',
+globalStyle(`${listItemClass} > *`, {
+  flex: 1,
+  width: '100%',
+  display: 'flex',
 });
+globalStyle(`${listItemClass} button`, { flex: 1 });
+
+export const headerWrapperClass = style([
+  {
+    gridArea: 'sidebarlayout-header',
+    background: 'purple',
+  },
+
+  responsiveStyle({
+    xs: {
+      gridTemplateColumns: 'auto',
+      gridTemplateRows: '60px auto 60px',
+      gridTemplateAreas: `
+    "sidebarlayout-header"
+    "sidebarlayout-main"
+    "sidebarlayout-footer"
+  `,
+    },
+    md: {
+      gridTemplateColumns: '50px auto 50px',
+      gridTemplateRows: 'auto',
+      gridTemplateAreas: `
+    "header-logo header-toggle header-crumbs"
+  `,
+    },
+  }),
+]);
+export const headerClass = style([
+  atoms({
+    position: 'fixed',
+    display: 'grid',
+  }),
+
+  responsiveStyle({
+    xs: {
+      gridTemplateColumns: '50px auto 50px',
+      gridTemplateAreas: `
+    "header-logo header-crumbs header-toggle"
+  `,
+    },
+    md: {
+      gridTemplateColumns: '150px 50px auto',
+      gridTemplateAreas: `
+    "header-logo header-toggle header-crumbs"
+  `,
+    },
+  }),
+]);
+
+export const headerExpandedClass = style([
+  responsiveStyle({
+    md: {
+      gridTemplateColumns: '50px 50px auto',
+    },
+  }),
+]);
+
 export const footerWrapperClass = style([
   {
     gridArea: 'sidebarlayout-footer',

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -44,6 +44,7 @@ type IStory = StoryObj<ISideBar>;
 
 export const Primary: IStory = {
   name: 'SideBar',
+
   args: {},
   render: () => {
     return (