fix closing the sidebar

kadena-community · Oct 30, 2024 · 7013ae5 · 7013ae5
1 parent 79691a5
commit 7013ae5
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 40 deletions.
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -11,6 +11,8 @@ import {
   MonoWorkspaces,
 } from '@kadena/kode-icons/system';
 import { Breadcrumbs, BreadcrumbsItem, Button } from './../../components';
+import { KadenaLogo } from './components/Logo/KadenaLogo';
+import { KLogo } from './components/Logo/KLogo';
 import { SideBarFooter } from './components/SideBarFooter';
 import { SideBarFooterItem } from './components/SideBarFooterItem';
 import { SideBarItem } from './components/SideBarItem';
@@ -37,7 +39,8 @@ const meta: Meta<ISideBarProps> = {
     },
     docs: {
       description: {
-        component: 'A component can show the steps through a process',
+        component:
+          'A component that will set the layout for your app. All with header, footer and sidebar. The layout is setup that you can choose your own routing system. whether its Next or reactRouter. \nThe actual routes are set in your app',
       },
     },
   },
@@ -59,6 +62,17 @@ const InnerLayout = () => {
 
   return (
     <SideBarLayout
+      logo={
+        <a href="https://kadena.io" target="_blank" rel="noreferrer">
+          <KadenaLogo height={40} />
+        </a>
+      }
+      minifiedLogo={
+        <a href="https://kadena.io" target="_blank" rel="noreferrer">
+          <KLogo height={40} />
+        </a>
+      }
+      activeUrl="https://mastersoftheuniverse.com"
       topBanner={<div>topbanner</div>}
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
@@ -165,7 +179,18 @@ export const Primary: IStory = {
 };
 
 const InnerLayoutFull = () => {
-  return <SideBarLayout variant="full">content</SideBarLayout>;
+  return (
+    <SideBarLayout
+      logo={
+        <a href="https://kadena.io" target="_blank" rel="noreferrer">
+          <KadenaLogo height={40} />
+        </a>
+      }
+      variant="full"
+    >
+      content
+    </SideBarLayout>
+  );
 };
 
 export const Full: IStory = {

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { FC, PropsWithChildren, ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MediaContextProvider, Stack } from './../../components';
 
 import { SideBarHeader } from './components/SideBarHeader';
@@ -13,20 +13,34 @@ import {
 
 export interface ISideBarLayout extends PropsWithChildren {
   topBanner?: ReactElement;
+  logo?: ReactElement;
+  minifiedLogo?: ReactElement;
   breadcrumbs?: ReactElement;
   sidebar?: ReactElement;
   footer?: ReactElement;
   variant?: 'default' | 'full';
+  activeUrl?: string;
 }
 export const SideBarLayout: FC<ISideBarLayout> = ({
   children,
   topBanner,
+  logo,
+  minifiedLogo,
   breadcrumbs,
   sidebar,
   footer,
   variant = 'default',
+  activeUrl,
 }) => {
-  const { isExpanded } = useSideBar();
+  const { isExpanded, setActiveUrl } = useSideBar();
+
+  // set the active URL in your app.
+  //we dont know what route system is being used so the active URL will be given as a prop to the component
+  //and then saved in the layout
+  useEffect(() => {
+    setActiveUrl(activeUrl);
+  }, [activeUrl]);
+
   return (
     <MediaContextProvider>
       <Stack
@@ -41,7 +55,12 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
             [layoutExpandedWrapperClass]: isExpanded,
           })}
         >
-          <SideBarHeader breadcrumbs={breadcrumbs} hasSidebar={!!sidebar} />
+          <SideBarHeader
+            breadcrumbs={breadcrumbs}
+            hasSidebar={!!sidebar}
+            logo={logo}
+            minifiedLogo={minifiedLogo}
+          />
           {sidebar}
           <main className={mainClass({ variant })}>{children}</main>
           {footer}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarHeader.tsx
@@ -18,12 +18,14 @@ import { useSideBar } from './SideBarProvider';
 
 interface IProps extends PropsWithChildren {
   logo?: ReactElement;
+  minifiedLogo?: ReactElement;
   breadcrumbs?: ReactElement;
   hasSidebar?: boolean;
 }
 
 export const SideBarHeader: FC<IProps> = ({
   logo,
+  minifiedLogo,
   breadcrumbs,
   hasSidebar = true,
 }) => {
@@ -34,14 +36,13 @@ export const SideBarHeader: FC<IProps> = ({
     }
   };
 
-  const ShowLogo =
-    !isExpanded && hasSidebar ? (
-      <KLogo height={40} />
-    ) : logo ? (
-      logo
-    ) : (
-      <KadenaLogo height={40} />
-    );
+  const ShowLogo = () => {
+    if (!isExpanded && hasSidebar) {
+      return minifiedLogo ? minifiedLogo : <KLogo height={40} />;
+    }
+
+    return logo ? logo : <KadenaLogo height={40} />;
+  };
 
   return (
     <header className={headerWrapperClass}>
@@ -54,10 +55,8 @@ export const SideBarHeader: FC<IProps> = ({
       >
         <Stack style={{ gridArea: 'header-logo' }}>
           <>
-            <Media lessThan="md">
-              {hasSidebar ? <KLogo height={40} /> : <KadenaLogo height={40} />}
-            </Media>
-            <Media greaterThanOrEqual="md">{ShowLogo}</Media>
+            <Media lessThan="md">{ShowLogo()}</Media>
+            <Media greaterThanOrEqual="md">{ShowLogo()}</Media>
           </>
         </Stack>
         {hasSidebar && (

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarItem.tsx
@@ -16,7 +16,6 @@ export interface ISideBarItemProps extends PropsWithChildren {
 }
 export const SideBarItem: FC<ISideBarItemProps> = ({
   visual,
-  isAppContext = false,
   label,
   onPress,
   children,
@@ -28,6 +27,12 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
     handleSetExpanded(isMediumDevice ? true : false);
   }, [isMediumDevice]);
 
+  const handlePress = (e: PressEvent) => {
+    if (!isMediumDevice) handleSetExpanded(false);
+
+    onPress(e);
+  };
+
   return (
     <li className={listItemClass}>
       {children ? (
@@ -45,7 +50,7 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
             <Button
               variant="outlined"
               aria-label={label}
-              onPress={onPress}
+              onPress={handlePress}
               startVisual={visual}
             >
               {label}
@@ -56,14 +61,14 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
               <Button
                 variant="outlined"
                 aria-label={label}
-                onPress={onPress}
+                onPress={handlePress}
                 startVisual={visual}
                 isCompact
               />
             ) : (
               <Button
                 aria-label={label}
-                onPress={onPress}
+                onPress={handlePress}
                 startVisual={visual}
                 variant="outlined"
               >
@@ -75,22 +80,4 @@ export const SideBarItem: FC<ISideBarItemProps> = ({
       )}
     </li>
   );
-
-  //     return (
-  //     <Button
-  //       {...props}
-  //       startVisual={startVisual}
-  //       variant={isAppContext ? 'primary' : 'transparent'}
-  //     />
-  //     );
-  //     <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/patterns/SideBarLayout/components/SideBarProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarProvider.tsx
@@ -21,6 +21,8 @@ export interface ISideBarContext {
   setAppContext: (context?: IAppContextProps) => void;
   breadCrumbs: ISideBarBreadCrumb[];
   setBreadCrumbs: (value: ISideBarBreadCrumb[]) => void;
+  setActiveUrl: (value?: string) => void;
+  activeUrl?: string;
 }
 export const SideBarContext = createContext<ISideBarContext>({
   isExpanded: true,
@@ -30,13 +32,15 @@ export const SideBarContext = createContext<ISideBarContext>({
   setAppContext: () => {},
   setBreadCrumbs: () => {},
   breadCrumbs: [],
+  setActiveUrl: () => {},
 });
 export const useSideBar = (): ISideBarContext => useContext(SideBarContext);
 
 export interface ISideBarProvider extends PropsWithChildren {}
 
 export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [activeUrl, setActiveUrlState] = useState<string | undefined>();
   const [appContext, setAppContextState] = useState<
     IAppContextProps | undefined
   >();
@@ -56,6 +60,9 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
   const setBreadCrumbs = (value: ISideBarBreadCrumb[]) => {
     setBreadCrumbsState(value);
   };
+  const setActiveUrl = (value?: string) => {
+    setActiveUrlState(value);
+  };
 
   return (
     <SideBarContext.Provider
@@ -67,6 +74,8 @@ export const SideBarProvider: FC<ISideBarProvider> = ({ children }) => {
         setAppContext,
         breadCrumbs,
         setBreadCrumbs,
+        setActiveUrl,
+        activeUrl,
       }}
     >
       {children}

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarTreeItem.tsx
@@ -1,8 +1,11 @@
 import type { FC } from 'react';
 import React from 'react';
+import { useMedia } from 'react-use';
 import { listItemClass } from '../sidebar.css';
 import type { PressEvent } from './../../../components/Button';
 import { Button } from './../../../components/Button';
+import { breakpoints } from './../../../styles';
+import { useSideBar } from './SideBarProvider';
 
 export interface ISideBarTreeItemProps {
   label: string;
@@ -12,9 +15,15 @@ export const SideBarTreeItem: FC<ISideBarTreeItemProps> = ({
   label,
   onPress,
 }) => {
+  const { handleSetExpanded } = useSideBar();
+  const isMediumDevice = useMedia(breakpoints.md, true);
+  const handlePress = (e: PressEvent) => {
+    if (!isMediumDevice) handleSetExpanded(false);
+    onPress(e);
+  };
   return (
     <li className={listItemClass}>
-      <Button variant="transparent" isCompact onPress={onPress}>
+      <Button variant="transparent" isCompact onPress={handlePress}>
         {label}
       </Button>
     </li>