feat: implement a navigational menu wrapper component

src/ui/Navigation/components/Drawer/Navigation/Navigation.styles.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { transition } from '@orfium/ictinus/dist/theme/functions';
+
+export const NavigationContainer = styled.div`
+  ${transition(10.2)};
+  //width: 100%;
+  background-color: white;
+  box-sizing: border-box;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.sm};
+  overflow: auto;
+
+  //Stick the scrollbar to the edge
+  padding-right: ${({ theme }) => `${theme.spacing.md}`};
+  width: calc(100% + ${({ theme }) => `${theme.spacing.md}`});
+
+  .menu-item-text,
+  .submenu-item-text {
+    white-space: nowrap;
+  }
+`;

src/ui/Navigation/components/Drawer/Navigation/Navigation.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+import { matchPath, useLocation } from 'react-router-dom';
+import { MenuItem as MenuItemType } from '../../../types';
+import MenuItem from './components/MenuItem';
+import { NavigationContainer } from './Navigation.styles';
+
+type NavigationProps = {
+  expanded: boolean;
+  menuItems: MenuItemType[];
+};
+
+function Navigation({ menuItems, expanded }: NavigationProps) {
+  const { pathname } = useLocation();
+  // we iinitialize the expanded or not status of the dropdowns by whether their url matches the current location path
+  const [openMenuItems, setOpenMenuItems] = useState<Record<string, boolean>>(() => {
+    return menuItems.reduce((acc, item) => {
+      const match = matchPath(pathname, { path: item.url, exact: false, strict: false });
+      acc[item.url] = !!match;
+
+      return acc;
+    }, {});
+  });
+
+  const toggleMenuItem = useCallback(
+    (url: string) => {
+      if (!expanded) {
+        setOpenMenuItems({});
+      } else {
+        setOpenMenuItems((state) => {
+          return { ...state, [url]: !state[url] };
+        });
+      }
+    },
+    [expanded]
+  );
+
+  return (
+    <NavigationContainer>
+      {menuItems.map((menuItem) => {
+        return menuItem.visible ? (
+          <MenuItem
+            key={menuItem.url}
+            expanded={Boolean(openMenuItems[menuItem.url])}
+            toggleMenuItem={toggleMenuItem}
+            item={menuItem}
+          />
+        ) : null;
+      })}
+    </NavigationContainer>
+  );
+}
+
+export default Navigation;