@campxdev/react-blueprint 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -31,6 +31,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "push-package": "npm run build && npm publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

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

@@ -22,10 +22,9 @@ export const Primary: Story = {
   render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
   args: {
     menu: [
-      { name: "Item 1", path: "/" },
+      { name: "Home", path: "/home" },
       { name: "Item 2", path: "/item2" },
     ],
-    title: "Home",
     children: <>hi</>,
   },
 };

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

@@ -22,6 +22,8 @@ export const LayoutWrapper = ({
   );
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
+  const [active, setActive] = useState(0);
+
   const handleDrawer = () => {
     setOpen(!open);
   };
@@ -49,7 +51,7 @@ export const LayoutWrapper = ({
           </IconButton>
         )}
         <Typography variant="subtitle1" noWrap>
-          {title}
+          {title ? title : menu[active].name}
         </Typography>
       </Toolbar>
 
@@ -58,6 +60,7 @@ export const LayoutWrapper = ({
         children={children}
         open={open}
         handleDrawer={handleDrawer}
+        setActive={setActive}
       />
     </Box>
   );

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

@@ -15,6 +15,7 @@ export interface SideNavigationProps {
   children: React.ReactNode;
   open?: any;
   handleDrawer?: any;
+  setActive: any;
 }
 
 export interface MenuItemProps {
@@ -26,6 +27,7 @@ export interface MenuItemProps {
     iconType: string;
   };
   index: number;
+  setActive: any;
 }
 
 export const SideNavigation = ({
@@ -33,6 +35,7 @@ export const SideNavigation = ({
   children,
   open,
   handleDrawer,
+  setActive,
 }: SideNavigationProps) => {
   return (
     <Stack gap="20px" direction={"row"}>
@@ -44,7 +47,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 +61,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);
@@ -69,20 +77,13 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
       <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

package/src/components/export.ts

@@ -7,3 +7,4 @@ export * from "./Input/TextField/TextField";
 export * from "./Layout/Header/AppHeader";
 export * from "./Layout/Header/AppLogo";
 export * from "./Layout/Header/AppsMenu";
+export * from "./Layout/LayoutWrapper/LayoutWrapper";