@campxdev/react-blueprint 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/assets/images/icons.tsx

@@ -314,3 +314,114 @@ export const LeftIcon = () => (
     </g>
   </svg>
 );
+
+export const DashBoardIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <g
+        id="vuesax_linear_chart-2"
+        data-name="vuesax/linear/chart-2"
+        transform="translate(-236 -188)"
+      >
+        <g id="chart-2" transform="translate(236 188)">
+          <path
+            id="Vector"
+            d="M4.667,13.333h4c3.333,0,4.667-1.333,4.667-4.667v-4C13.333,1.333,12,0,8.667,0h-4C1.333,0,0,1.333,0,4.667v4C0,12,1.333,13.333,4.667,13.333Z"
+            transform="translate(1.333 1.333)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M1.333,8.667A1.337,1.337,0,0,0,2.667,7.333v-6A1.333,1.333,0,0,0,0,1.333v6A1.333,1.333,0,0,0,1.333,8.667Z"
+            transform="translate(9 3.667)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M1.333,5A1.337,1.337,0,0,0,2.667,3.667V1.333A1.333,1.333,0,0,0,0,1.333V3.667A1.333,1.333,0,0,0,1.333,5Z"
+            transform="translate(4.333 7.333)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-4"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export const HomeIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <g
+        id="vuesax_linear_home-2"
+        data-name="vuesax/linear/home-2"
+        transform="translate(-620 -188)"
+      >
+        <g id="home-2" transform="translate(620 188)">
+          <path
+            id="Vector"
+            d="M4.68.548l-3.593,2.8A3.172,3.172,0,0,0,0,5.562V10.5a2.817,2.817,0,0,0,2.807,2.813h7.72a2.815,2.815,0,0,0,2.807-2.807V5.655a3.149,3.149,0,0,0-1.2-2.3L8.013.468A2.991,2.991,0,0,0,4.68.548Z"
+            transform="translate(1.333 1.345)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M0,2V0"
+            transform="translate(8 9.993)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Layout/LayoutWrapper/LayoutWrapper.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { DashBoardIcon } from "../../../assets/images/icons";
 import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
 
 // Define the default export with Meta type including the component type
@@ -22,10 +23,9 @@ export const Primary: Story = {
   render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
   args: {
     menu: [
-      { name: "Item 1", path: "/" },
+      { name: "Tickets", path: "/home", icon: DashBoardIcon },
       { name: "Item 2", path: "/item2" },
     ],
-    title: "Home",
     children: <>hi</>,
   },
 };

package/src/components/Layout/LayoutWrapper/LayoutWrapper.tsx

@@ -1,9 +1,13 @@
-import { Box, IconButton, Toolbar, Typography } from "@mui/material";
+import { IconButton, Toolbar, Typography } from "@mui/material";
 
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
 import { LeftIcon, RightIcon } from "../../../assets/images/icons";
 import { SideNavigation } from "../SideNavigation/SideNavigation";
+import {
+  StyledLayoutContainer,
+  StyledMainContainer,
+} from "../SideNavigation/styles/styles";
 
 export interface LayoutWrapperProps {
   title?: string;
@@ -22,43 +26,50 @@ export const LayoutWrapper = ({
   );
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
+  const [active, setActive] = useState(0);
+
   const handleDrawer = () => {
     setOpen(!open);
   };
 
+  console.log(active, menu[active].name);
+
   return (
-    <Box width={"100%"}>
-      <Toolbar sx={{ paddingLeft: "0px !important" }}>
-        {showIcon && (
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawer}
-            edge="start"
-            sx={{ mr: 0.5 }}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-          >
-            {open && isHovered ? (
-              <LeftIcon />
-            ) : !open && isHovered ? (
-              <RightIcon />
-            ) : (
-              <MenuIcon />
-            )}
-          </IconButton>
-        )}
-        <Typography variant="subtitle1" noWrap>
-          {title}
-        </Typography>
-      </Toolbar>
+    <StyledLayoutContainer>
+      <StyledMainContainer>
+        <Toolbar sx={{ paddingLeft: "0px !important" }}>
+          {showIcon && (
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawer}
+              edge="start"
+              sx={{ mr: 0.5 }}
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+            >
+              {open && isHovered ? (
+                <LeftIcon />
+              ) : !open && isHovered ? (
+                <RightIcon />
+              ) : (
+                <MenuIcon />
+              )}
+            </IconButton>
+          )}
+          <Typography variant="subtitle1" noWrap>
+            {title ? title : menu[active].name}
+          </Typography>
+        </Toolbar>
 
-      <SideNavigation
-        menu={menu}
-        children={children}
-        open={open}
-        handleDrawer={handleDrawer}
-      />
-    </Box>
+        <SideNavigation
+          menu={menu}
+          children={children}
+          open={open}
+          handleDrawer={handleDrawer}
+          setActive={setActive}
+        />
+      </StyledMainContainer>
+    </StyledLayoutContainer>
   );
 };

package/src/components/Layout/SideNavigation/SideNavigation.tsx

@@ -1,5 +1,6 @@
-import { Box, ListItemIcon, ListItemText, Stack } from "@mui/material";
+import { ListItemIcon, Stack } from "@mui/material";
 import { useMatch, useResolvedPath } from "react-router-dom";
+import { HomeIcon } from "../../../assets/images/icons";
 import { Typography } from "../../Typography/Typography";
 import {
   Main,
@@ -15,6 +16,7 @@ export interface SideNavigationProps {
   children: React.ReactNode;
   open?: any;
   handleDrawer?: any;
+  setActive: any;
 }
 
 export interface MenuItemProps {
@@ -26,6 +28,7 @@ export interface MenuItemProps {
     iconType: string;
   };
   index: number;
+  setActive: any;
 }
 
 export const SideNavigation = ({
@@ -33,6 +36,7 @@ export const SideNavigation = ({
   children,
   open,
   handleDrawer,
+  setActive,
 }: SideNavigationProps) => {
   return (
     <Stack gap="20px" direction={"row"}>
@@ -44,7 +48,12 @@ export const SideNavigation = ({
       >
         <StyledList>
           {menu?.map((item: any, index: number) => (
-            <MenuItem menuItem={item} index={index} key={index} />
+            <MenuItem
+              menuItem={item}
+              index={index}
+              key={index}
+              setActive={setActive}
+            />
           ))}
         </StyledList>
       </StyledDrawer>
@@ -53,7 +62,7 @@ export const SideNavigation = ({
   );
 };
 
-const MenuItem = ({ menuItem, index }: MenuItemProps) => {
+const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
   const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
 
   let resolved = useResolvedPath(path);
@@ -64,46 +73,25 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
 
   // if (!hasAccess) return null
 
+  console.log(index, "path");
+
   return (
     <StyledListItem key={path} disablePadding match={match}>
       <StyledLinkButton
         to={path}
         style={{ width: "100%" }}
-        // onClick={() =>
-        //   // sideNavStore.update((s) => {
-        //   //   s.active = index
-        //   // })
-        // }
+        onClick={() => setActive(index)}
       >
         <StyledListItemButton>
           <ListItemIcon
             sx={{
               minWidth: "16px",
               marginRight: "8px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
             }}
           >
-            <Box
-              sx={{
-                minWidth: "16px",
-                marginRight: "8px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {/* <GetSidenavIconByType
-                  iconType={iconType}
-                  color={match ? '#323167' : '#000'}
-                /> */}
-              {/* {getSidenavIconByType(iconType, 'red')} */}
-            </Box>
+            {Icon ? <Icon /> : <HomeIcon />}
           </ListItemIcon>
-          <ListItemText
-            primary={<Typography variant="subtitle3">{name}</Typography>}
-          />
+          <Typography variant="subtitle3">{name}</Typography>
         </StyledListItemButton>
       </StyledLinkButton>
     </StyledListItem>

package/src/components/Layout/SideNavigation/styles/styles.tsx

@@ -1,4 +1,11 @@
-import { Drawer, List, ListItem, ListItemButton, styled } from "@mui/material";
+import {
+  Box,
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  styled,
+} from "@mui/material";
 import { Link } from "react-router-dom";
 const drawerWidth: number = 240;
 
@@ -20,12 +27,6 @@ export const StyledDrawer = styled(Drawer)(() => ({
   },
 }));
 
-export const StyledList = styled(List)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  height: "calc(100vh - 120px)",
-  paddingTop: "20px",
-}));
-
 interface StyledListItemProps {
   match: any;
 }
@@ -33,13 +34,16 @@ interface StyledListItemProps {
 export const StyledListItem = styled(ListItem)<StyledListItemProps>(
   ({ theme, match }) => ({
     backgroundColor: match ? theme.palette.secondary.main : "none",
+    width: "auto",
+    margin: "5px 8px",
+    borderRadius: "5px",
   })
 );
 export const StyledListItemButton = styled(ListItemButton)(() => ({
   alignItems: "center",
   display: "flex",
-  paddingBottom: "4px",
-  paddingTop: "4px",
+  paddingBottom: "5px",
+  paddingTop: "5px",
 }));
 
 export const StyledLinkButton = styled(Link)({
@@ -82,3 +86,22 @@ export const Main = styled("main", {
     marginLeft: 0,
   },
 }));
+
+export const StyledMainContainer = styled("main")(() => ({
+  width: "90%",
+  margin: "auto",
+  overflowY: "auto",
+}));
+
+export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
+  width: "100%",
+  position: "fixed",
+  top: "60px",
+  backgroundColor: theme.palette.background.default,
+}));
+
+export const StyledList = styled(List)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  height: "calc(100vh - 120px)",
+  paddingTop: "20px",
+}));