Sb c24

.storybook/main.ts

@@ -135,6 +135,7 @@ const config: StorybookConfig = {
       box-shadow: 0px 6px 20px rgba(9, 11, 25, 0.5) !important;
       border-width: 0 !important;
     }
+    /*
     .sbdocs-content p,.sbdocs-content h1, .sbdocs-content h2, .sbdocs-content h3,.sbdocs-content h4,.sbdocs-content h5,.sbdocs-content h6{
       font-family: "Roboto";
       letter-spacing: 0.2px;
@@ -146,6 +147,7 @@ const config: StorybookConfig = {
       font-size: 20px;
       color: #b4b4b4;
     }
+    */
   </style>
   `,
   previewHead: `

docs/Drawer.stories.tsx

@@ -104,7 +104,6 @@ export const Template: Story = {
   decorators: [
     (Story) => {
       const [args, updateArgs] = useArgs();
-      console.log("args", args);
 
       const toggleDrawer = (anchor: Anchor, open: boolean) => {
         console.log("first");

docs/List.stories.tsx

@@ -1,13 +1,24 @@
+import { ReactElement, Fragment } from "react";
 import type { Meta, StoryObj, StoryContext } from "@storybook/react";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Collapse from "@mui/material/Collapse";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import Avatar from "@mui/material/Avatar";
 import ImageIcon from "@mui/icons-material/Image";
 import WorkIcon from "@mui/icons-material/Work";
 import BeachAccessIcon from "@mui/icons-material/BeachAccess";
 import { argChildren, argProps } from "./utils/formatArgs";
+import { Paper } from "@mui/material";
+import { useArgs, useState } from "@storybook/addons";
+import Home from "@mui/icons-material/Home";
+import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
+import { useRouter } from "next/navigation";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof List> = {
@@ -47,6 +58,152 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
+interface NavsOptions {
+  key: string;
+  name: string;
+  href: string;
+  icon: ReactElement;
+  nested?: NavsOptions[];
+}
+
+interface NavigationOptions {
+  key: string;
+  title: string;
+  navs: NavsOptions[];
+}
+
+const DATA: NavigationOptions[] = [
+  {
+    key: "OverView",
+    title: "Over view",
+    navs: [
+      {
+        key: "OverView_home",
+        name: "Home",
+        href: "/",
+        icon: <Home />,
+      },
+      {
+        key: "OverView_details",
+        name: "Details",
+        href: "/details",
+        icon: <Home />,
+      },
+    ],
+  },
+  {
+    key: "Management",
+    title: "Management",
+    navs: [
+      {
+        key: "Management_faq",
+        name: "Faq",
+        href: "#",
+        icon: <Home />,
+        nested: [
+          {
+            key: "Management_faq__post",
+            name: "Faq",
+            href: "/faq",
+            icon: <CircleRoundedIcon fontSize="small" />,
+          },
+          {
+            key: "Management_faq__about",
+            name: "Details about",
+            href: "/details/about",
+            icon: <CircleRoundedIcon />,
+          },
+        ],
+      },
+      {
+        key: "Management_details",
+        name: "Details",
+        href: "",
+        icon: <Home />,
+        nested: [
+          {
+            key: "Management_details__post",
+            name: "Details post",
+            href: "/details/post",
+            icon: <Home />,
+          },
+          {
+            key: "Management_details__about",
+            name: "Details about",
+            href: "/details/about",
+            icon: <Home />,
+            nested: [
+              {
+                key: "Management_details__about_as",
+                name: "Details about as",
+                href: "/details/aboutas",
+                icon: <Home />,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const NestedNavs = ({ nav, open, setOpen }: any) => {
+  // const router = useRouter();
+  console.log("firstopen", open);
+  return (
+    <Fragment key={nav?.key}>
+      <ListItemButton
+        onClick={() => {
+          if (!Boolean(open.includes(nav.key))) {
+            setOpen((prevState: any) => [...prevState, nav.key]);
+          } else {
+            setOpen((prevState: any) =>
+              prevState.filter((d: any) => d !== nav.key)
+            );
+          }
+        }}
+      >
+        <ListItemIcon>{nav?.icon}</ListItemIcon>
+        <ListItemText primary={nav?.name} />
+
+        <KeyboardArrowRight
+          sx={{
+            transform: Boolean(open.includes(nav.key))
+              ? "rotate(90deg)"
+              : "rotate(0deg)",
+            transition: "0.2s",
+          }}
+        />
+      </ListItemButton>
+      <Collapse in={Boolean(open.includes(nav.key))}>
+        <List disablePadding>
+          {nav?.nested?.map((nest: any) => {
+            if (!Boolean(nest?.nested)) {
+              return (
+                <ListItemButton
+                  key={nest.key}
+                  // onClick={() => router.push(nest.href)}
+                >
+                  <ListItemIcon>{nest.icon}</ListItemIcon>
+                  <ListItemText primary={nest.name} />
+                </ListItemButton>
+              );
+            }
+            return (
+              <NestedNavs
+                key={nest.key}
+                nav={nest}
+                open={open}
+                setOpen={setOpen}
+              />
+            );
+          })}
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+};
+
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Lists: Story = {
   args: {
@@ -126,3 +283,90 @@ import BeachAccessIcon from "@mui/icons-material/BeachAccess";
     },
   },
 };
+
+export const ListNavigation: Story = {
+  render: ({
+    groupCollapse,
+    setGroupCollapse,
+    open,
+    setOpen,
+    ...args
+  }: any) => {
+    return (
+      <Paper>
+        <List {...args}>
+          {DATA.map((item) => {
+            return (
+              <Fragment key={item.key}>
+                <ListSubheader
+                  disableSticky
+                  onClick={() => {
+                    if (!Boolean(groupCollapse.includes(item.key))) {
+                      setGroupCollapse((prevState: any) => [
+                        ...prevState,
+                        item.key,
+                      ]);
+                    } else {
+                      setGroupCollapse((prevState: any) =>
+                        prevState.filter((d: any) => d !== item.key)
+                      );
+                    }
+                  }}
+                  sx={{
+                    cursor: "pointer",
+                  }}
+                >
+                  {item.title}
+                </ListSubheader>
+                <Collapse in={Boolean(!groupCollapse.includes(item.key))}>
+                  {item.navs.map((nav) => {
+                    if (!Boolean(nav?.nested)) {
+                      return (
+                        <ListItemButton key={nav.key}>
+                          <ListItemIcon>{nav.icon}</ListItemIcon>
+                          <ListItemText primary={nav.name} />
+                        </ListItemButton>
+                      );
+                    }
+
+                    return (
+                      <NestedNavs
+                        key={nav.key}
+                        nav={nav}
+                        open={open}
+                        setOpen={setOpen}
+                      />
+                    );
+                  })}
+                </Collapse>
+              </Fragment>
+            );
+          })}
+        </List>
+      </Paper>
+    );
+  },
+  args: {
+    disablePadding: true,
+  },
+  decorators: [
+    (Story) => {
+      const [groupCollapse, setGroupCollapse] = useState<string[]>([""]);
+      const [open, setOpen] = useState<string[]>([""]);
+      const [args, updateArgs] = useArgs();
+      return (
+        <Story
+          args={
+            {
+              open,
+              setOpen,
+              ...args,
+              groupCollapse,
+              setGroupCollapse,
+            } as any
+          }
+        />
+      );
+    },
+  ],
+};

docs/Stepper.stories.tsx

@@ -69,25 +69,23 @@ export const Template: Story = {
         0: true,
       });
       return (
-        <>
-          <Story
-            args={
-              {
-                ...args,
-                completed,
-                onChange: (event: any, step: number) => {
-                  setcompleted((prevState) => ({
-                    ...prevState,
-                    [step]: true,
-                  }));
-                  updateArgs({
-                    activeStep: step,
-                  });
-                },
-              } as any
-            }
-          />
-        </>
+        <Story
+          args={
+            {
+              ...args,
+              completed,
+              onChange: (event: any, step: number) => {
+                setcompleted((prevState) => ({
+                  ...prevState,
+                  [step]: true,
+                }));
+                updateArgs({
+                  activeStep: step,
+                });
+              },
+            } as any
+          }
+        />
       );
     },
   ],

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import ThemeContextProvider from "src/theme";
+import Sidebar from "src/widgets/Sidebar";
 
 export const metadata = {
   title: "Create Next App",
@@ -14,7 +15,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <ThemeContextProvider>
-        <body suppressHydrationWarning={true}>{children}</body>
+        <body suppressHydrationWarning={true}>
+          <Sidebar />
+          {children}
+        </body>
       </ThemeContextProvider>
     </html>
   );

src/layouts/AuthLayout/Types.ts

@@ -0,0 +1 @@
+export interface AuthLayoutOptions {}

src/layouts/AuthLayout/index.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AuthLayoutOptions } from "./Types";
+
+const AuthLayout: FC<AuthLayoutOptions> = () => {
+  return <div>AuthLayout</div>;
+};
+
+export default AuthLayout;

src/layouts/PublicLayout/Types.ts

@@ -0,0 +1 @@
+export interface PublicLayoutOptions {}

src/layouts/PublicLayout/index.tsx

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { PublicLayoutOptions } from "./Types";
+
+const PublicLayout: FC<PublicLayoutOptions> = () => {
+  return <div>PublicLayout</div>;
+};
+
+export default PublicLayout;

src/theme/index.tsx

@@ -16,7 +16,7 @@ import componentsOverride from "./overrides";
 
 type SupportedLocales = keyof typeof locales;
 
-const DEFAULT_PALETTE_MODE: PaletteMode = "light";
+const DEFAULT_PALETTE_MODE: PaletteMode = "dark";
 const DEFAULT_LOCAL: SupportedLocales = "enUS";
 
 // Client-side cache, shared for the whole session of the user in the browser.

src/theme/overrides/Link.tsx

@@ -12,10 +12,6 @@ const LinkBehavior = forwardRef<
   return <LinkNext ref={ref} href={href} {...other} />;
 });
 
-declare module "@mui/material/Paper" {
-  interface PaperPropsVariantOverrides {}
-}
-
 const MuiLink: Components<Theme>["MuiLink"] = {
   styleOverrides: {
     root: ({ theme, ownerState }) => ({}),