Sb c25

package.json

@@ -31,24 +31,24 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addon-links": "^7.0.20",
-    "@storybook/addon-mdx-gfm": "^7.0.20",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/blocks": "^7.0.20",
-    "@storybook/manager-api": "^7.0.20",
-    "@storybook/nextjs": "^7.0.20",
-    "@storybook/react": "^7.0.20",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.20",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/addon-mdx-gfm": "^7.0.26",
+    "@storybook/addon-styling": "^1.3.2",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/manager-api": "^7.0.26",
+    "@storybook/nextjs": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.0.26",
     "chromatic": "^6.18.0",
     "cross-var": "^1.1.0",
     "dotenv-cli": "^7.2.1",
     "eslint-plugin-storybook": "^0.6.12",
     "react-element-to-jsx-string": "^15.0.0",
     "remark-gfm": "^3.0.1",
-    "storybook": "^7.0.20"
+    "storybook": "^7.0.26"
   },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]"

src/global/navigations/index.ts

@@ -0,0 +1,87 @@
+// Icons
+import BeachAccessIcon from "@mui/icons-material/BeachAccess";
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
+import ImageIcon from "@mui/icons-material/Image";
+import HomeIcon from "@mui/icons-material/Home";
+import AlignHorizontalCenterIcon from "@mui/icons-material/AlignHorizontalCenter";
+import AllInclusiveIcon from "@mui/icons-material/AllInclusive";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
+import AutoGraphOutlinedIcon from "@mui/icons-material/AutoGraphOutlined";
+import AutoAwesomeMotionIcon from "@mui/icons-material/AutoAwesomeMotion";
+
+import { NavOptions } from "src/global/types";
+
+export const NAVIGATIONS: NavOptions[] = [
+  {
+    key: "OverView",
+    title: "Overview",
+    navs: [
+      {
+        key: "OverView_Menu_one_example",
+        name: "Menu one example",
+        href: "/",
+        icon: HomeIcon,
+      },
+      {
+        key: "OverView_Menu_two_example",
+        name: "Menu two example",
+        href: "/menutwo",
+        icon: BeachAccessIcon,
+      },
+    ],
+  },
+  {
+    key: "Management",
+    title: "Management",
+    navs: [
+      {
+        key: "Management_Menu Label one",
+        name: "Menu Label one",
+        href: "#",
+        icon: AutoGraphOutlinedIcon,
+        nested: [
+          {
+            key: "Management_Menu_Label_two",
+            name: "Menu Label two",
+            href: "/faq",
+            icon: AlignHorizontalCenterIcon,
+          },
+          {
+            key: "Management_Menu_Label_2.2",
+            name: "Menu Label 2.2",
+            href: "/details/about",
+            icon: WorkOutlineIcon,
+          },
+        ],
+      },
+      {
+        key: "Management_Menu_two_Label_one",
+        name: "Menu two Label one",
+        href: "",
+        icon: ImageIcon,
+        nested: [
+          {
+            key: "Management_Menu_two_Label_2.1",
+            name: "Menu two Label 2.1",
+            href: "/details/post",
+            icon: AspectRatioIcon,
+          },
+          {
+            key: "Management_Menu_two_Label_2.2",
+            name: "Menu two Label 2.2",
+            href: "/details/about",
+            icon: AllInclusiveIcon,
+            nested: [
+              {
+                key: "Management_Menu_two_Label_3.1",
+                name: "Menu two Label 3.1",
+                href: "/details/aboutas",
+                icon: AutoAwesomeMotionIcon,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

src/global/types/index.ts

@@ -0,0 +1,15 @@
+import { SvgIconComponent } from "@mui/icons-material";
+
+export interface NavOptions {
+  key: string;
+  title: string;
+  navs: NavigationOptions[];
+}
+
+export interface NavigationOptions {
+  key: string;
+  name: string;
+  href: string;
+  icon: SvgIconComponent;
+  nested?: NavigationOptions[];
+}

src/widgets/Sidebar/NestedNavs.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { FC, useState, Fragment } from "react";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Collapse from "@mui/material/Collapse";
+import { useRouter } from "next/navigation";
+
+import { NavigationOptions } from "src/global/types";
+import { NestedNavOptioms } from "./Types";
+
+const DEFUALT_NESTED_LEFT_PADDING: number = 1;
+
+const NestedNavs: FC<NestedNavOptioms> = ({ navigation, nested = 2 }) => {
+  const { icon: NavIcon } = navigation;
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  const router = useRouter();
+
+  const onNavigationHandle = (href: string, isNested: boolean) => {
+    if (isNested) {
+      setOpen((prevState: boolean) => !prevState);
+      return;
+    }
+    router.push(href);
+  };
+
+  return (
+    <Fragment key={navigation.key}>
+      <ListItemButton
+        onClick={() =>
+          onNavigationHandle(navigation.href, Boolean(navigation.nested))
+        }
+        sx={{
+          pl: nested,
+        }}
+      >
+        <ListItemIcon>
+          <NavIcon fontSize={nested === 2 ? "medium" : "small"} />
+        </ListItemIcon>
+        <ListItemText primary={navigation.name} />
+
+        {Boolean(navigation.nested) && (
+          <KeyboardArrowRight
+            sx={{
+              transform: open ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "0.2s",
+            }}
+          />
+        )}
+      </ListItemButton>
+      {Boolean(navigation.nested) && (
+        <Collapse in={open}>
+          <List disablePadding>
+            {navigation?.nested?.map((nest: NavigationOptions) => {
+              if (!Boolean(nest.nested)) {
+                const { icon: NestIcon } = nest;
+                return (
+                  <ListItemButton
+                    key={nest.key}
+                    onClick={() =>
+                      onNavigationHandle(nest.href, Boolean(nest.nested))
+                    }
+                    sx={{
+                      pl: nested + DEFUALT_NESTED_LEFT_PADDING,
+                    }}
+                  >
+                    <ListItemIcon>
+                      <NestIcon fontSize="small" />
+                    </ListItemIcon>
+                    <ListItemText primary={nest.name} />
+                  </ListItemButton>
+                );
+              }
+              return (
+                <NestedNavs
+                  key={nest.key}
+                  navigation={nest}
+                  nested={nested + DEFUALT_NESTED_LEFT_PADDING}
+                />
+              );
+            })}
+          </List>
+        </Collapse>
+      )}
+    </Fragment>
+  );
+};
+
+export default NestedNavs;

src/widgets/Sidebar/Types.ts

@@ -1,17 +1,8 @@
-import { ReactElement } from "react";
+import { NavigationOptions } from "src/global/types";
 
 export interface SidebarOptions {}
 
-interface NavsOptions {
-  key: string;
-  name: string;
-  href: string;
-  icon: ReactElement;
-  nested?: NavsOptions[];
-}
-
-export interface NavigationOptions {
-  key: string;
-  title: string;
-  navs: NavsOptions[];
+export interface NestedNavOptioms {
+  navigation: NavigationOptions;
+  nested?: number;
 }