Add more pages | Zustand Local | Aliases

components/core/Shell/NavBar/NavBar.jsx

@@ -5,7 +5,8 @@ import {
   useNavigate,
   useParams
 } from 'react-router';
-import { Stack } from '@mui/material';
+import { Avatar, Stack } from '@mui/material';
+import { useLocalStore } from '@components';
 
 const NavBox = styled(Stack)`
   width: 100%;
@@ -80,11 +81,12 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const routeParams = useParams();
+  const { user } = useLocalStore();
 
   const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
   const tabRefs = useRef({});
 
-  const isAdmin = true; // to be changed to check
+  const isAdmin = user?.isAdmin;
 
   const navItems = [
     {
@@ -94,10 +96,16 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
       matches: ['', 'home']
     },
     {
-      name: 'About Us',
+      name: 'Schedule',
-      id: 'about',
+      id: 'schedule',
-      href: '/about',
+      href: '/schedule',
-      matches: ['about', 'aboutus']
+      matches: ['schedule']
+    },
+    {
+      name: 'Settings',
+      id: 'settings',
+      href: '/settings',
+      matches: ['settings', 'settings']
     },
     {
       name: 'Administrator Panel',
@@ -105,6 +113,14 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
       href: '/admin',
       matches: ['admin'],
       hidden: !isAdmin
+    },
+    // Keep this Last (Replaced with the profile icon)
+    {
+      name: 'Profile',
+      id: 'profile',
+      href: '/profile',
+      matches: ['profile'],
+      hidden: true
     }
   ];
 
@@ -124,7 +140,7 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
   };
 
   const onUserIconClick = () => {
-    navigate('/settings');
+    navigate('/profile');
   };
 
   useEffect(() => {
@@ -143,7 +159,6 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
     <NavBox direction='column'>
       <NavGroup direction='row'>
         <LeftContainer>
-          {/* <Icon /> */}
           <Title
             style={{
               color: 'darkgray',
@@ -172,6 +187,17 @@ export const NavBar = ({ notifications, disableNav, settings }) => {
             }
             return null;
           }).filter((item) => item !== null)}
+          <Tab
+            key='profile'
+            ref={(el) => { tabRefs.current['profile'] = el; }}
+          >
+            <Avatar
+              style={{paddingTop: '3px'}}
+              onClick={() => onUserIconClick()}
+            >
+              {`${user?.firstName[0]}${user?.lastName[0]}`}
+            </Avatar>
+          </Tab>
           <SlidingIndicator style={indicatorStyle} />
         </RightContainer>
       </NavGroup>

components/index.js

@@ -1 +1,2 @@
 export * from './core';
+export * from './stores';

components/stores/index.js

@@ -0,0 +1 @@
+export { useLocalStore } from './useLocalStore';

components/stores/useLocalStore.js

@@ -0,0 +1,6 @@
+import { create } from 'zustand';
+
+export const useLocalStore = create((set) => ({
+  user: null,
+  setUser: (user) => set({ user }),
+}));

package-lock.json

@@ -14,7 +14,8 @@
         "@mui/material": "^7.1.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
-        "react-router-dom": "^7.6.0"
+        "react-router-dom": "^7.6.0",
+        "zustand": "^5.0.5"
       },
       "devDependencies": {
         "@emotion/babel-plugin": "^11.13.5",
@@ -3534,6 +3535,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.5.tgz",
+      "integrity": "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -16,7 +16,8 @@
     "@mui/material": "^7.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0"
+    "react-router-dom": "^7.6.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.13.5",

src/pages/About/index.js

@@ -1 +0,0 @@
-export { About } from './About';

src/pages/Home/Home.jsx

@@ -4,13 +4,13 @@ import { Link } from 'react-router-dom';
 export const Home = () => {
 
   useEffect(() => {
-    document.title = 'ShiftSync | Home'
+    document.title = 'ShiftSync | Home';
   }, []);
 
   return (
     <div>
       <h1>Home Page</h1>
-      <Link to="/about">Go to About</Link>
+      <Link to="/settings">Go to Settings</Link>
     </div>
   );
 };

src/pages/Profile/Profile.jsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-export const About = () => {
+export const Profile = () => {
 
   useEffect(() => {
-    document.title = 'ShiftSync | About Us'
+    document.title = 'ShiftSync | Profile';
   }, []);
 
   return (
     <div>
-      <h1>About Page</h1>
+      <h1>Profile Page</h1>
       <Link to="/">Go to Home</Link>
     </div>
   );

src/pages/Profile/index.js

@@ -0,0 +1 @@
+export { Profile } from './Profile';

src/pages/Schedule/Schedule.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+export const Schedule = () => {
+
+  useEffect(() => {
+    document.title = 'ShiftSync | Schedule';
+  }, []);
+
+  return (
+    <div>
+      <h1>Schedule Page</h1>
+      <Link to="/">Go to Home</Link>
+    </div>
+  );
+};

src/pages/Schedule/index.js

@@ -0,0 +1 @@
+export { Schedule } from './Schedule';

src/pages/Settings/Settings.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+export const Settings = () => {
+
+  useEffect(() => {
+    document.title = 'ShiftSync | Settings';
+  }, []);
+
+  return (
+    <div>
+      <h1>Settings Page</h1>
+      <Link to="/">Go to Home</Link>
+    </div>
+  );
+};

src/pages/Settings/index.js

@@ -0,0 +1 @@
+export { Settings } from './Settings';

src/pages/index.js

@@ -1,2 +1,4 @@
 export { Home } from './Home';
-export { About } from './About';
+export { Profile } from './Profile';
+export { Schedule } from './Schedule';
+export { Settings } from './Settings';

src/router/AppRouter.jsx

@@ -1,14 +1,27 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Routes, Route } from 'react-router-dom';
-import { Home, About } from '@src/pages';
+import { Home, Profile, Schedule, Settings } from '@src/pages';
-import { Shell } from '../../components';
+import { Shell } from '@components';
+import { useLocalStore } from '@components';
 
 const AppRouter = () => {
+  const { setUser } = useLocalStore();
+
+  useEffect(() => {
+    setUser({
+      firstName: 'Matt',
+      lastName: 'DiMeglio',
+      email: 'mdimeglio@shift-sync.com',
+      isAdmin: false
+    })
+  }, []);
   return (
     <Shell>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
+        <Route path="/schedule" element={<Schedule />} />
+        <Route path="/settings" element={<Settings />} />
+        <Route path="/profile" element={<Profile />} />
       </Routes>
     </Shell>
   );

vite.config.js

@@ -8,6 +8,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '@src': path.resolve(__dirname, 'src'),
+      '@components': path.resolve(__dirname, 'components'),
+      '@api': path.resolve(__dirname, 'api'),
     },
   },
 });