Integrate routing with sidemenu

src/App.tsx

@@ -24,7 +24,7 @@ function App() {
 					<Route path='register/:buildingId' element={<EntryPage children={<RegisterForm />} />} />
 					<Route path='register/error' element={<EntryPage children={<div>Invalid invitational link - screen to be implemented</div>} />} />
 					<Route path='login' element={<EntryPage children={<LoginForm />} />} />
-					<Route path='tenant' element={<Application />} />
+					<Route path='tenant/*' element={<Application />} />
 					<Route path='*' element={<Navigate replace to="login" />} />
 				</Routes>
 			</Router>

src/components/ApplicationTab.tsx

 import { Box } from "@mui/material"
+import { Navigate, Route, Routes } from "react-router-dom";
 
 const classes = {
     wrapper: {
         backgroundColor: 'rgb(241, 245, 249)',
-        minHeight: '95vh', 
+        minHeight: '95vh',
         width: '100%',
         flex: 1,
     }
@@ -11,6 +12,17 @@ const classes = {
 
 export const ApplicationTab = () => {
     return (
-        <Box sx={classes.wrapper}></Box>
+        <Box sx={classes.wrapper}>
+            <Routes>
+                <Route path='overview' element={<div>Hello from overview</div>} />
+                <Route path='notifications' element={<div>Hello from notifications</div>} />
+                <Route path='issues' element={<div>Hello from issues</div>} />
+                <Route path='voting' element={<div>Hello from voting</div>} />
+                <Route path='invoices' element={<div>Hello from invoices</div>} />
+                <Route path='building-invoices' element={<div>Hello from building invoices</div>} />
+                <Route path='documents' element={<div>Hello from documents</div>} />
+                <Route path='*' element={<Navigate replace to="overview" />} />
+            </Routes>
+        </Box>
     )
 }
\ No newline at end of file

src/components/LoginForm.tsx

@@ -89,7 +89,7 @@ export const LoginForm = () => {
         }
         localStorage.setItem(JWT_TENANT, res);
 
-        navigate('../tenant');
+        navigate('../tenant/overview');
     }
 
     const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>): void => {

src/components/SideMenu/SideMenu.tsx

@@ -6,6 +6,7 @@ import { UserIcon } from "../icons/UserIcon";
 import { SideMenuItem } from "../SideMenuItem";
 import { subMenu } from "./SideMenuData";
 import "./SideMenu.css";
+import { useLocation } from "react-router-dom";
 
 const classes = {
     logo: {
@@ -39,6 +40,13 @@ const classes = {
 export const SideMenu = ({ active, toggleSideMenu }: { active: boolean, toggleSideMenu: (open: boolean) => void }) => {
 
     const [tenantInfo, setTenantInfo] = useState<any>();
+    const location = useLocation();
+    const [selectedItem, setSelectedItem] = useState(location.pathname.split('/').at(-1)!);
+
+    const changeSelectedItem = (item: string) => {
+        setSelectedItem(item);
+        toggleSideMenu(false);
+    };
 
     useEffect(() => {
         getTenantInfo((err: any, data: any) => {
@@ -64,10 +72,10 @@ export const SideMenu = ({ active, toggleSideMenu }: { active: boolean, toggleSi
                             </Box>
                         </Box>
                         {subMenu.map((menu, index) => (
-                            <SideMenuItem key={index} content={menu} />
+                            <SideMenuItem key={index} content={menu} selectedItem={selectedItem} changeSelectedItem={changeSelectedItem} />
                         ))}
                     </div>
-                    <div className="transparent" onClick={() => {toggleSideMenu(false)}}></div>
+                    <div className="transparent" onClick={() => { toggleSideMenu(false) }}></div>
                 </div>
             }
         </>

src/components/SideMenu/SideMenuData.tsx

@@ -14,18 +14,18 @@ export const subMenu: SubMenu[] = [
     {
         title: 'Glavni meni',
         items: [
-            { title: 'Pregled', icon: <HomeIcon /> },
-            { title: 'Obaveštenja', icon: <NotificationIcon /> },
-            { title: 'Aktivnosti', icon: <ActivityIcon /> },
-            { title: 'Glasanje', icon: <VotingIcon /> }
+            { title: 'Pregled', icon: <HomeIcon />, path: 'overview' },
+            { title: 'Obaveštenja', icon: <NotificationIcon />, path: 'notifications' },
+            { title: 'Aktivnosti', icon: <ActivityIcon />, path: 'issues' },
+            { title: 'Glasanje', icon: <VotingIcon />, path: 'voting' }
         ]
     },
     {
         title: 'Računi/Finansije',
         items: [
-            { title: 'Moj Račun', icon: <InvoicesIcon /> },
-            { title: 'Finansije zgrade', icon: <BuidlingInvoicesIcon /> },
-            { title: 'Dokumenta', icon: <DocumentIcon /> }]
+            { title: 'Moj Račun', icon: <InvoicesIcon />, path: 'invoices' },
+            { title: 'Finansije zgrade', icon: <BuidlingInvoicesIcon />, path: 'building-invoices' },
+            { title: 'Dokumenta', icon: <DocumentIcon />, path: 'documents' }]
     },
     {
         title: 'Aplikacija',

src/components/SideMenuItem.tsx

 import { Box, Typography } from "@mui/material";
+import { useLocation, useNavigate } from "react-router-dom";
 import { SubMenu } from "../internal-types";
 
 const classes = {
-    wrapper : { 
-        display: 'flex', 
-        flexDirection: 'column', 
-        color: 'white', 
-        gap: '10px' 
+    wrapper: {
+        display: 'flex',
+        flexDirection: 'column',
+        color: 'white',
+        gap: '5px'
     },
-    itemTitle: { 
+    itemTitle: {
         color: 'rgb(24, 95, 167)',
-        paddingInline: '10%', 
+        paddingInline: '10%',
     },
-    itemsWrapper: { 
-        display: 'flex', 
-        flexDirection: 'row', 
+    itemsWrapper: {
+        display: 'flex',
+        flexDirection: 'row',
         gap: '15px',
         alignItems: 'center',
-        paddingInline: '10%', 
-        // boxSizing: 'border-box',
+        paddingInline: '10%',
+        paddingBlock: '2.5px',
+        boxSizing: 'border-box',
         // backgroundColor: 'red',
-        borderRadius: '5px'
-        
+        borderRadius: '5px',
+        userSelect: 'none',
+        ':hover': {
+            backgroundColor: 'rgba(150, 150, 150, 0.2)'
+        }
+    },
+    selectedItem: {
+        backgroundColor: 'rgba(200, 200, 200, 0.3)',
+        '& .MuiTypography-root': {
+            fontWeight: 'bold'
+        },
+        '&:hover': {
+            backgroundColor: 'rgba(200, 200, 200, 0.3)'
+        },
+        '& .icons-stroke': {
+            stroke: 'white'
+        }
     }
 } as const;
 
-export const SideMenuItem = ({ content }: { content: SubMenu }) => {
+export const SideMenuItem = ({ content, selectedItem, changeSelectedItem }: { content: SubMenu, selectedItem: string, changeSelectedItem: (item: string) => void }) => {
+
+    const navigate = useNavigate();
+
     return (
         <Box sx={classes.wrapper}>
             <Typography sx={classes.itemTitle}> {content.title.toUpperCase()}</Typography>
             {content.items.map((item, ind) => (
-                <Box sx={classes.itemsWrapper} key={ind}>
+                <Box sx={selectedItem === item.path ? { ...classes.itemsWrapper, ...classes.selectedItem } : classes.itemsWrapper} key={ind} onClick={() => {
+                    if (item.path) {
+                        navigate(item.path);
+                        changeSelectedItem(item.path);
+                    }
+                }}>
                     {!!item.icon && item.icon}
                     <Typography>{item.title}</Typography>
                 </Box>

src/internal-types.ts

@@ -25,5 +25,6 @@ export type SubMenu = {
 
 export type SubMenuItem = {
     icon?: ReactElement,
-    title: string
+    title: string,
+    path?: string
 }
\ No newline at end of file