umwd-components 0.1.222 → 0.1.224

package/dist/cjs/components/StrapiErrors.js

@@ -6,6 +6,7 @@
   
 'use strict';
 
+var React = require('react');
 var material = require('@mui/material');
 
 function StrapiErrors(_ref) {

package/dist/cjs/components/dashboard/Sidebar.js

@@ -0,0 +1,220 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var router = require('next/router');
+var Link = require('next/link');
+var material = require('@mui/material');
+var MuiDrawer = require('@mui/material/Drawer');
+var MuiAppBar = require('@mui/material/AppBar');
+var iconsMaterial = require('@mui/icons-material');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const drawerWidth = 290;
+const DrawerHeader = material.styled("div")(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar
+  };
+});
+function Sidebar(_ref2) {
+  let {
+    children,
+    data
+  } = _ref2;
+  const {
+    sections = [],
+    actions = [],
+    sx = {},
+    title
+  } = data;
+  console.log("sections", sections);
+  console.log("actions", actions);
+  router.useRouter();
+  const theme = material.useTheme();
+  const AppbarSxOpen = {
+    zIndex: theme.zIndex.drawer + 1,
+    marginLeft: drawerWidth,
+    width: "calc(100% - ".concat(drawerWidth, "px)"),
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  };
+  const AppbarSxClosed = {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  };
+  const drawerSxOpen = {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    overflowX: "hidden",
+    "& .MuiDrawer-paper": {
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      overflowX: "hidden"
+    }
+  };
+  const drawerSxClosed = {
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: "hidden",
+    width: "calc(".concat(theme.spacing(7), " + 1px)"),
+    [theme.breakpoints.up("sm")]: {
+      width: "calc(".concat(theme.spacing(8), " + 1px)")
+    },
+    "& .MuiDrawer-paper": {
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      }),
+      overflowX: "hidden",
+      width: "calc(".concat(theme.spacing(7), " + 1px)"),
+      [theme.breakpoints.up("sm")]: {
+        width: "calc(".concat(theme.spacing(8), " + 1px)")
+      }
+    }
+  };
+  const [open, setOpen] = React__namespace.useState(false);
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/React__namespace.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      ...sx
+    }
+  }, /*#__PURE__*/React__namespace.createElement(material.CssBaseline, null), /*#__PURE__*/React__namespace.createElement(MuiAppBar, {
+    position: "fixed",
+    sx: [open && AppbarSxOpen, !open && AppbarSxClosed]
+  }, /*#__PURE__*/React__namespace.createElement(material.Toolbar, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      marginRight: 5,
+      ...(open && {
+        display: "none"
+      })
+    }
+  }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Menu, null)), /*#__PURE__*/React__namespace.createElement(Link, {
+    href: "/dashboard",
+    legacyBehavior: true
+  }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+    variant: "h6",
+    noWrap: true,
+    sx: {
+      cursor: "pointer"
+    }
+  }, title !== null && title !== void 0 ? title : "Dashboard")), /*#__PURE__*/React__namespace.createElement(material.Box, {
+    sx: {
+      position: "relative",
+      height: "40px",
+      flexGrow: 1
+    }
+  }, /*#__PURE__*/React__namespace.createElement(material.SpeedDial, {
+    ariaLabel: "...",
+    icon: /*#__PURE__*/React__namespace.createElement(iconsMaterial.AccountCircle, null),
+    direction: "down",
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: 40,
+      "& .MuiFab-root": {
+        width: 40,
+        height: 40
+      }
+    }
+  }, actions.map((action, index) => /*#__PURE__*/React__namespace.createElement(material.SpeedDialAction, {
+    key: index,
+    icon: action.icon,
+    "aria-label": action.name,
+    tooltipTitle: action.name,
+    onClick: action.action
+  })))))), /*#__PURE__*/React__namespace.createElement(MuiDrawer, {
+    variant: "permanent",
+    open: open,
+    sx: [open && drawerSxOpen, !open && drawerSxClosed]
+  }, /*#__PURE__*/React__namespace.createElement(DrawerHeader, null, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
+    onClick: handleDrawerClose
+  }, theme.direction === "rtl" ? /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronRight, null) : /*#__PURE__*/React__namespace.createElement(iconsMaterial.ChevronLeft, null))), /*#__PURE__*/React__namespace.createElement(material.Divider, null), sections.map((section, index) => /*#__PURE__*/React__namespace.createElement(Link, {
+    key: index,
+    href: section.link,
+    passHref: true
+  }, /*#__PURE__*/React__namespace.createElement(material.Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 1,
+      cursor: "pointer"
+    }
+  }, section.icon, open && /*#__PURE__*/React__namespace.createElement(material.Typography, {
+    sx: {
+      pl: 2
+    }
+  }, section.title))))), /*#__PURE__*/React__namespace.createElement(material.Box, {
+    component: "main",
+    sx: {
+      flexGrow: 1,
+      p: 3,
+      minHeight: "100vh"
+    }
+  }, /*#__PURE__*/React__namespace.createElement(DrawerHeader, null), children));
+}
+
+exports.default = Sidebar;

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ var ScrollNavbar = require('./components/ScrollNavbar.js');
 var FluidBackgroundV2 = require('./components/FluidBackgroundV2.js');
 var RegisterForm = require('./components/forms/RegisterForm.js');
 var SigninForm = require('./components/forms/SigninForm.js');
+var Sidebar = require('./components/dashboard/Sidebar.js');
 
 
 
@@ -39,3 +40,4 @@ exports.ScrollNavbar = ScrollNavbar.default;
 exports.FluidBackground = FluidBackgroundV2.default;
 exports.RegisterForm = RegisterForm.default;
 exports.SigninForm = SigninForm.default;
+exports.Sidebar = Sidebar.default;

package/dist/esm/components/StrapiErrors.js

@@ -4,6 +4,7 @@
  * @license MIT
  */
   
+import React__default from 'react';
 import { Alert } from '@mui/material';
 
 function StrapiErrors(_ref) {
@@ -11,7 +12,7 @@ function StrapiErrors(_ref) {
     error
   } = _ref;
   if (!(error !== null && error !== void 0 && error.message)) return null;
-  return /*#__PURE__*/React.createElement(Alert, {
+  return /*#__PURE__*/React__default.createElement(Alert, {
     severity: "error"
   }, error.message);
 }

package/dist/esm/components/dashboard/Sidebar.js

@@ -0,0 +1,197 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { styled, useTheme, Box, CssBaseline, Toolbar, IconButton, Typography, SpeedDial, SpeedDialAction, Divider } from '@mui/material';
+import MuiDrawer from '@mui/material/Drawer';
+import MuiAppBar from '@mui/material/AppBar';
+import { Menu, AccountCircle, ChevronRight, ChevronLeft } from '@mui/icons-material';
+
+const drawerWidth = 290;
+const DrawerHeader = styled("div")(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar
+  };
+});
+function Sidebar(_ref2) {
+  let {
+    children,
+    data
+  } = _ref2;
+  const {
+    sections = [],
+    actions = [],
+    sx = {},
+    title
+  } = data;
+  console.log("sections", sections);
+  console.log("actions", actions);
+  useRouter();
+  const theme = useTheme();
+  const AppbarSxOpen = {
+    zIndex: theme.zIndex.drawer + 1,
+    marginLeft: drawerWidth,
+    width: "calc(100% - ".concat(drawerWidth, "px)"),
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  };
+  const AppbarSxClosed = {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  };
+  const drawerSxOpen = {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    overflowX: "hidden",
+    "& .MuiDrawer-paper": {
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      overflowX: "hidden"
+    }
+  };
+  const drawerSxClosed = {
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: "hidden",
+    width: "calc(".concat(theme.spacing(7), " + 1px)"),
+    [theme.breakpoints.up("sm")]: {
+      width: "calc(".concat(theme.spacing(8), " + 1px)")
+    },
+    "& .MuiDrawer-paper": {
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      }),
+      overflowX: "hidden",
+      width: "calc(".concat(theme.spacing(7), " + 1px)"),
+      [theme.breakpoints.up("sm")]: {
+        width: "calc(".concat(theme.spacing(8), " + 1px)")
+      }
+    }
+  };
+  const [open, setOpen] = React.useState(false);
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      ...sx
+    }
+  }, /*#__PURE__*/React.createElement(CssBaseline, null), /*#__PURE__*/React.createElement(MuiAppBar, {
+    position: "fixed",
+    sx: [open && AppbarSxOpen, !open && AppbarSxClosed]
+  }, /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleDrawerOpen,
+    edge: "start",
+    sx: {
+      marginRight: 5,
+      ...(open && {
+        display: "none"
+      })
+    }
+  }, /*#__PURE__*/React.createElement(Menu, null)), /*#__PURE__*/React.createElement(Link, {
+    href: "/dashboard",
+    legacyBehavior: true
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h6",
+    noWrap: true,
+    sx: {
+      cursor: "pointer"
+    }
+  }, title !== null && title !== void 0 ? title : "Dashboard")), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: "relative",
+      height: "40px",
+      flexGrow: 1
+    }
+  }, /*#__PURE__*/React.createElement(SpeedDial, {
+    ariaLabel: "...",
+    icon: /*#__PURE__*/React.createElement(AccountCircle, null),
+    direction: "down",
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: 40,
+      "& .MuiFab-root": {
+        width: 40,
+        height: 40
+      }
+    }
+  }, actions.map((action, index) => /*#__PURE__*/React.createElement(SpeedDialAction, {
+    key: index,
+    icon: action.icon,
+    "aria-label": action.name,
+    tooltipTitle: action.name,
+    onClick: action.action
+  })))))), /*#__PURE__*/React.createElement(MuiDrawer, {
+    variant: "permanent",
+    open: open,
+    sx: [open && drawerSxOpen, !open && drawerSxClosed]
+  }, /*#__PURE__*/React.createElement(DrawerHeader, null, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleDrawerClose
+  }, theme.direction === "rtl" ? /*#__PURE__*/React.createElement(ChevronRight, null) : /*#__PURE__*/React.createElement(ChevronLeft, null))), /*#__PURE__*/React.createElement(Divider, null), sections.map((section, index) => /*#__PURE__*/React.createElement(Link, {
+    key: index,
+    href: section.link,
+    passHref: true
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      p: 1,
+      cursor: "pointer"
+    }
+  }, section.icon, open && /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      pl: 2
+    }
+  }, section.title))))), /*#__PURE__*/React.createElement(Box, {
+    component: "main",
+    sx: {
+      flexGrow: 1,
+      p: 3,
+      minHeight: "100vh"
+    }
+  }, /*#__PURE__*/React.createElement(DrawerHeader, null), children));
+}
+
+export { Sidebar as default };

package/dist/esm/index.js

@@ -19,3 +19,4 @@ export { default as ScrollNavbar } from './components/ScrollNavbar.js';
 export { default as FluidBackground } from './components/FluidBackgroundV2.js';
 export { default as RegisterForm } from './components/forms/RegisterForm.js';
 export { default as SigninForm } from './components/forms/SigninForm.js';
+export { default as Sidebar } from './components/dashboard/Sidebar.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.222",
+  "version": "0.1.224",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/StrapiErrors.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Alert } from "@mui/material";
 
 interface StrapiErrorsProps {

package/src/components/ZodErrors.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export function ZodErrors({ error }: { error: string[] }) {
   if (!error) return null;
 

package/src/components/dashboard/Sidebar.tsx

@@ -0,0 +1,248 @@
+import * as React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import {
+  styled,
+  useTheme,
+  Box,
+  Divider,
+  CssBaseline,
+  Typography,
+  Toolbar,
+  IconButton,
+  SpeedDial,
+  SpeedDialAction,
+} from "@mui/material";
+import MuiDrawer from "@mui/material/Drawer";
+import MuiAppBar from "@mui/material/AppBar";
+import {
+  Menu as MenuIcon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  AccountCircle as AccountCircleIcon,
+  Dashboard as DashboardIcon,
+  Login as LoginIcon,
+  Logout as LogoutIcon,
+  PeopleAlt as PeopleAltIcon,
+  RocketLaunch as RocketLaunchIcon,
+} from "@mui/icons-material";
+import { type Theme } from "@mui/material";
+import { SxProps } from "@mui/system";
+
+const drawerWidth = 290;
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+}));
+
+interface SidebarProps {
+  title: string;
+  sections: Array<{
+    title: string;
+    icon: React.ReactNode;
+    link: string;
+  }>;
+  actions: Array<{
+    icon: React.ReactNode;
+    name: string;
+    action: () => void;
+  }>;
+  sx?: SxProps<Theme>;
+}
+
+function Sidebar({
+  children,
+  data,
+}: Readonly<{
+  data: SidebarProps;
+  children: React.ReactNode;
+}>): React.JSX.Element {
+  const { sections = [], actions = [], sx = {}, title } = data;
+
+  console.log("sections", sections);
+  console.log("actions", actions);
+
+  const router = useRouter();
+
+  const theme = useTheme();
+
+  const AppbarSxOpen = {
+    zIndex: theme.zIndex.drawer + 1,
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  };
+
+  const AppbarSxClosed = {
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  };
+
+  const drawerSxOpen = {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    overflowX: "hidden",
+    "& .MuiDrawer-paper": {
+      width: drawerWidth,
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+      overflowX: "hidden",
+    },
+  };
+
+  const drawerSxClosed = {
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: "hidden",
+    width: `calc(${theme.spacing(7)} + 1px)`,
+    [theme.breakpoints.up("sm")]: {
+      width: `calc(${theme.spacing(8)} + 1px)`,
+    },
+    "& .MuiDrawer-paper": {
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+      }),
+      overflowX: "hidden",
+      width: `calc(${theme.spacing(7)} + 1px)`,
+      [theme.breakpoints.up("sm")]: {
+        width: `calc(${theme.spacing(8)} + 1px)`,
+      },
+    },
+  };
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <Box sx={{ display: "flex", ...sx }}>
+      <CssBaseline />
+
+      <MuiAppBar
+        position="fixed"
+        sx={[open && AppbarSxOpen, !open && AppbarSxClosed]}
+      >
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            sx={{
+              marginRight: 5,
+              ...(open && { display: "none" }),
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Link href="/dashboard" legacyBehavior>
+            <Typography variant="h6" noWrap sx={{ cursor: "pointer" }}>
+              {title ?? "Dashboard"}
+            </Typography>
+          </Link>
+          <Box
+            sx={{
+              position: "relative",
+              height: "40px",
+              flexGrow: 1,
+            }}
+          >
+            <SpeedDial
+              ariaLabel="..."
+              icon={<AccountCircleIcon />}
+              direction="down"
+              sx={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+                width: 40,
+                "& .MuiFab-root": { width: 40, height: 40 },
+              }}
+            >
+              {actions.map((action, index) => (
+                <SpeedDialAction
+                  key={index}
+                  icon={action.icon}
+                  aria-label={action.name}
+                  tooltipTitle={action.name}
+                  onClick={action.action}
+                />
+              ))}
+            </SpeedDial>
+          </Box>
+        </Toolbar>
+      </MuiAppBar>
+
+      <MuiDrawer
+        variant="permanent"
+        open={open}
+        sx={[open && drawerSxOpen, !open && drawerSxClosed]}
+      >
+        <DrawerHeader>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === "rtl" ? (
+              <ChevronRightIcon />
+            ) : (
+              <ChevronLeftIcon />
+            )}
+          </IconButton>
+        </DrawerHeader>
+        <Divider />
+        {sections.map((section, index) => (
+          <Link key={index} href={section.link} passHref>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                p: 1,
+                cursor: "pointer",
+              }}
+            >
+              {section.icon}
+              {open && <Typography sx={{ pl: 2 }}>{section.title}</Typography>}
+            </Box>
+          </Link>
+        ))}
+      </MuiDrawer>
+
+      <Box component="main" sx={{ flexGrow: 1, p: 3, minHeight: "100vh" }}>
+        <DrawerHeader />
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+export default Sidebar;

package/src/index.js

@@ -13,3 +13,4 @@ export { default as ScrollNavbar } from "./components/ScrollNavbar.tsx";
 export { default as FluidBackground } from "./components/FluidBackgroundV2.tsx";
 export { default as RegisterForm } from "./components/forms/RegisterForm.tsx";
 export { default as SigninForm } from "./components/forms/SigninForm.tsx";
+export { default as Sidebar } from "./components/dashboard/Sidebar.tsx";

package/src/stories/SideBar.stories.js

@@ -0,0 +1,37 @@
+import Sidebar from "../components/dashboard/Sidebar.tsx";
+import React from "react";
+import AccountBoxIcon from "@mui/icons-material/AccountBox";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import LogoutIcon from "@mui/icons-material/Logout";
+
+export default {
+  title: "UMWD/Sidebar",
+  component: Sidebar,
+};
+
+const Template = ({ ...args }) => (
+  <Sidebar data={{ ...args }}>
+    <h1>Children</h1>
+  </Sidebar>
+);
+
+export const HelloWorld = Template.bind({});
+
+HelloWorld.args = {
+  title: "Admin Panel",
+  actions: [
+    {
+      icon: <LogoutIcon />,
+      name: "Log-Out",
+      action: () => console.log("Log-Out"),
+    },
+  ],
+  sections: [
+    {
+      title: "My Account",
+      icon: <AccountBoxIcon />,
+      link: "/account",
+    },
+  ],
+};