From 7013ae5d2830999d0f05d1e7cd5466c992fecd57 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Wed, 30 Oct 2024 09:56:45 +0100
Subject: [PATCH] fix closing the sidebar

---
 .../SideBarLayout/SideBarLayout.stories.tsx   | 29 +++++++++++++++--
 .../patterns/SideBarLayout/SideBarLayout.tsx  | 25 +++++++++++++--
 .../components/SideBarHeader.tsx              | 23 +++++++-------
 .../SideBarLayout/components/SideBarItem.tsx  | 31 ++++++-------------
 .../components/SideBarProvider.tsx            |  9 ++++++
 .../components/SideBarTreeItem.tsx            | 11 ++++++-
 6 files changed, 88 insertions(+), 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
index fc00af9ae6..31ab1d55ac 100644
--- 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
index c63eab8bbb..b984613dbf 100644
--- 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
index 42198b2ce6..6be7ddeee0 100644
--- 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
index 0499b3849f..65cb10d396 100644
--- 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
index a93a5adc98..f47be2cb26 100644
--- 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,6 +32,7 @@ export const SideBarContext = createContext<ISideBarContext>({
   setAppContext: () => {},
   setBreadCrumbs: () => {},
   breadCrumbs: [],
+  setActiveUrl: () => {},
 });
 export const useSideBar = (): ISideBarContext => useContext(SideBarContext);
 
@@ -37,6 +40,7 @@ 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
index 3ee0e4466d..757b227724 100644
--- 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>