From 8c1bb5e9e026af14915f7ec37fb81e61a4e9741c Mon Sep 17 00:00:00 2001
From: Ayobami Akingbade <akingbadefred@gmail.com>
Date: Thu, 16 Nov 2023 17:34:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(menu):=20improve=20current=20m?=
 =?UTF-8?q?enu=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/LayoutImpl/RenderNavigation.tsx       | 47 +++++++++----------
 .../_layouts/app/LayoutImpl/SideBar.tsx       | 17 +++++++
 src/frontend/views/settings/_Base.tsx         | 12 ++---
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
index 840fdf387..56fac647f 100644
--- a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
+++ b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx
@@ -8,7 +8,6 @@ import {
 } from "shared/types/menu";
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
 import { systemIconToSVG } from "shared/constants/Icons";
-import { useSessionStorage } from "react-use";
 import { ChevronRight } from "react-feather";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { Typo } from "frontend/design-system/primitives/Typo";
@@ -109,6 +108,8 @@ interface IProp {
   isFullWidth: boolean;
   setIsFullWidth: (value: boolean) => void;
   depth?: number;
+  activeItem: Record<string, string>;
+  setActiveItem: (depth: number, value: string) => void;
 }
 
 const SYSTEM_LINK_MAP: Record<SystemLinks, string> = {
@@ -145,13 +146,9 @@ export function RenderNavigation({
   isFullWidth,
   setIsFullWidth,
   depth = 1,
+  setActiveItem,
+  activeItem,
 }: IProp) {
-  // TODO clear the parent activeitems
-  const [activeItem, setActiveItem] = useSessionStorage(
-    `navigation-item-${depth}`,
-    ""
-  );
-
   const { clear: clearBreadCrumbStack } = useNavigationStack();
 
   const getBackgroundColor = useThemeColorShade();
@@ -159,7 +156,17 @@ export function RenderNavigation({
   return (
     <LeftSideNavMenu>
       {navigation.map(({ title, icon, type, link, id, children }) => {
-        const isActive = activeItem === id;
+        const isActive = activeItem[depth] === id;
+
+        const iconComponent = (
+          <IconRoot
+            $isFullWidth={isFullWidth}
+            dangerouslySetInnerHTML={{
+              __html: systemIconToSVG(icon, isActive ? 2 : 1),
+            }}
+          />
+        );
+
         return (
           <LeftSideNavMenuList key={id}>
             {/* eslint-disable-next-line no-nested-ternary */}
@@ -169,21 +176,16 @@ export function RenderNavigation({
               <>
                 <LeftSideNavMenuListAnchor
                   as={PlainButton}
-                  $isActive={isActive}
+                  $isActive={false}
                   $depth={depth}
                   hoverColor={getBackgroundColor("primary-color", 45)}
                   onClick={() => {
                     clearBreadCrumbStack();
                     setIsFullWidth(true);
-                    setActiveItem(isActive ? "" : id);
+                    setActiveItem(depth, isActive ? "" : id);
                   }}
                 >
-                  <IconRoot
-                    $isFullWidth={isFullWidth}
-                    dangerouslySetInnerHTML={{
-                      __html: systemIconToSVG(icon, isActive ? 2 : 1),
-                    }}
-                  />
+                  {iconComponent}
                   {isFullWidth && (
                     <Stack justify="space-between" spacing={0} align="center">
                       <NavLabel ellipsis $isFullWidth={isFullWidth}>
@@ -203,6 +205,8 @@ export function RenderNavigation({
                     navigation={children}
                     isFullWidth={isFullWidth}
                     depth={depth + 1}
+                    activeItem={activeItem}
+                    setActiveItem={setActiveItem}
                   />
                 )}
               </>
@@ -213,7 +217,7 @@ export function RenderNavigation({
                   $depth={depth}
                   onClick={() => {
                     clearBreadCrumbStack();
-                    setActiveItem(id);
+                    setActiveItem(depth, id);
                   }}
                   target={
                     type === NavigationMenuItemType.ExternalLink
@@ -222,14 +226,7 @@ export function RenderNavigation({
                   }
                   hoverColor={getBackgroundColor("primary-color", 45)}
                 >
-                  {icon && (
-                    <IconRoot
-                      $isFullWidth={isFullWidth}
-                      dangerouslySetInnerHTML={{
-                        __html: systemIconToSVG(icon, isActive ? 2 : 1),
-                      }}
-                    />
-                  )}
+                  {icon && iconComponent}
                   <NavLabel ellipsis $isFullWidth={isFullWidth}>
                     {title}
                   </NavLabel>
diff --git a/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx b/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
index 62116ebf4..efd199000 100644
--- a/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
+++ b/src/frontend/_layouts/app/LayoutImpl/SideBar.tsx
@@ -10,6 +10,7 @@ import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
 import { Stack } from "frontend/design-system/primitives/Stack";
 import { useStorageApi } from "frontend/lib/data/useApi";
 import { INavigationMenuItem } from "shared/types/menu";
+import { useSessionStorage } from "react-use";
 import { PlainButton } from "frontend/design-system/components/Button/TextButton";
 import {
   NAVIGATION_MENU_ENDPOINT,
@@ -98,6 +99,20 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
   const navigationMenuItems = useNavigationMenuItems();
   const getThemeColorShade = useThemeColorShade();
 
+  const [activeItem, setActiveItem$1] = useSessionStorage<
+    Record<string, string>
+  >(`navigation-current-item`, {});
+
+  const setActiveItem = (depth: number, value: string) => {
+    const newValue = { ...activeItem, [depth]: value };
+
+    const newValueFiltered = Object.fromEntries(
+      Object.entries(newValue).filter(([key]) => +key <= depth)
+    ) as Record<string, string>;
+
+    setActiveItem$1(newValueFiltered);
+  };
+
   return (
     <Root $isFullWidth={isFullWidth}>
       <Brand
@@ -134,6 +149,8 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
               navigation={navigationMenuItems.data}
               isFullWidth={isFullWidth}
               setIsFullWidth={setIsFullWidth}
+              activeItem={activeItem}
+              setActiveItem={setActiveItem}
             />
           </ViewStateMachine>
         </Scroll>
diff --git a/src/frontend/views/settings/_Base.tsx b/src/frontend/views/settings/_Base.tsx
index 349c0a4b0..95940ce54 100644
--- a/src/frontend/views/settings/_Base.tsx
+++ b/src/frontend/views/settings/_Base.tsx
@@ -36,37 +36,37 @@ const baseMenuItems: IMenuSectionItem[] = [
     action: NAVIGATION_LINKS.SETTINGS.THEME,
     name: "Theme",
     IconComponent: Eye,
-    order: 30,
+    order: 20,
   },
   {
     action: NAVIGATION_LINKS.SETTINGS.SITE,
     name: "Site",
     IconComponent: Globe,
-    order: 40,
+    order: 30,
   },
   {
     action: NAVIGATION_LINKS.SETTINGS.DATE,
     name: "Date Format",
     IconComponent: Calendar,
-    order: 50,
+    order: 40,
   },
   {
     action: NAVIGATION_LINKS.SETTINGS.VARIABLES,
     name: "Variables",
     IconComponent: Book,
-    order: 60,
+    order: 50,
   },
   {
     action: NAVIGATION_LINKS.SETTINGS.SYSTEM,
     name: "System",
     IconComponent: Server,
-    order: 70,
+    order: 60,
   },
   {
     action: NAVIGATION_LINKS.SETTINGS.VERSIONS,
     name: "System Info",
     IconComponent: Terminal,
-    order: 80,
+    order: 70,
   },
 ];