Moved BaseLayout into routes, made sidebar icons highlighted dependin…

…g on the page
Strexas · Sep 2, 2024 · 4ee533e · 4ee533e
1 parent 9827844
commit 4ee533e
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 47 deletions.
diff --git a/app/front-end/src/app/provider.tsx b/app/front-end/src/app/provider.tsx
@@ -1,4 +1,3 @@
-import { BaseLayout } from '@/components/layouts/baseLayout';
 import { SessionContextProvider, ThemeContextProvider } from '@/stores';
 import { CircularProgress } from '@mui/material';
 import React from 'react';
@@ -41,9 +40,7 @@ export const AppProvider = ({ children }: AppProviderProps) => {
       fallback={<CircularProgress sx={{ display: 'flex', justifyItems: 'center', alignContent: 'center' }} />}
     >
       <SessionContextProvider>
-        <ThemeContextProvider>
-          <BaseLayout>{children}</BaseLayout>
-        </ThemeContextProvider>
+        <ThemeContextProvider>{children}</ThemeContextProvider>
       </SessionContextProvider>
     </React.Suspense>
   );

diff --git a/app/front-end/src/app/router.tsx b/app/front-end/src/app/router.tsx
@@ -1,3 +1,4 @@
+import { BaseLayout } from '@/components/layouts/baseLayout';
 import { Paths } from '@/types';
 import { useMemo } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@@ -32,14 +33,26 @@ export const AppRouter = () => {
           path: Paths.HOME,
           lazy: async () => {
             const { Home } = await import('./routes/home');
-            return { Component: Home };
+            return {
+              Component: (props) => (
+                <BaseLayout>
+                  <Home {...props} />
+                </BaseLayout>
+              ),
+            };
           },
         },
         {
           path: Paths.NOTFOUND,
           lazy: async () => {
             const { NotFound } = await import('./routes/notFound');
-            return { Component: NotFound };
+            return {
+              Component: (props) => (
+                <BaseLayout>
+                  <NotFound {...props} />
+                </BaseLayout>
+              ),
+            };
           },
         },
       ]),

diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx
@@ -8,6 +8,7 @@ interface Props {
   height?: string;
   borderRadius?: string;
   onClick?: () => void;
+  isActive?: boolean;
 }
 
 /**
@@ -29,7 +30,15 @@ interface Props {
  *
  * @returns {JSX.Element} The `IconTitleButton` component rendering an icon button and an optional title.
  */
-export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, borderRadius, onClick }) => {
+export const IconTitleButton: React.FC<Props> = ({
+  icon,
+  title,
+  width,
+  height,
+  borderRadius,
+  onClick,
+  isActive = false,
+}) => {
   const Theme = useTheme();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
@@ -41,8 +50,11 @@ export const IconTitleButton: React.FC<Props> = ({ icon, title, width, height, b
           borderRadius: borderRadius || '1rem',
           transition: 'background-color 0.5s ease',
           ':hover': {
-            backgroundColor: alpha(Theme.palette.primary.contrastText, 0.2),
+            backgroundColor: isActive
+              ? alpha(Theme.palette.primary.contrastText, 0.3)
+              : alpha(Theme.palette.primary.contrastText, 0.2),
           },
+          backgroundColor: isActive ? alpha(Theme.palette.primary.contrastText, 0.3) : 'transparent',
         }}
         onClick={onClick}
       >

diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx
@@ -109,10 +109,7 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           flexDirection: 'row',
         }}
       >
-        <Sidebar
-          handleSettingsDialogOpen={handleSettingsDialogOpen}
-          handleShortcutsDialogOpen={handleShortcutsDialogOpen}
-        />
+        <Sidebar settingsDialogOpen={handleSettingsDialogOpen} shortcutsDialogOpen={handleShortcutsDialogOpen} />
 
         <Box
           sx={{

diff --git a/app/front-end/src/components/sidebar/sidebar.tsx b/app/front-end/src/components/sidebar/sidebar.tsx
@@ -1,21 +1,24 @@
 import { IconTitleButton } from '@/components/buttons/IconTitleButton';
-import { Colors } from '@/types';
+import { Colors, Paths } from '@/types';
 import {
   AutoMode as AutoModeIcon,
   Home as HomeIcon,
   SettingsOutlined as SettingsOutlinedIcon,
   SwitchAccessShortcut as SwitchAccessShortcutIcon,
 } from '@mui/icons-material';
 import { Box } from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
 
 interface SidebarProps {
-  handleSettingsDialogOpen: () => void;
-  handleShortcutsDialogOpen: () => void;
+  settingsDialogOpen: () => void;
+  shortcutsDialogOpen: () => void;
 }
 
-export const Sidebar: React.FC<SidebarProps> = ({ handleSettingsDialogOpen, handleShortcutsDialogOpen }) => {
+export const Sidebar: React.FC<SidebarProps> = ({ settingsDialogOpen, shortcutsDialogOpen }) => {
+  const location = useLocation();
+
   return (
-    <Box sx={{ width: '5vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <Box sx={{ width: '4.2vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
       <Box
         sx={{
           width: '100%',
@@ -27,30 +30,36 @@ export const Sidebar: React.FC<SidebarProps> = ({ handleSettingsDialogOpen, hand
           alignItems: 'center',
         }}
       >
-        <IconTitleButton
-          icon={
-            <HomeIcon
-              sx={{
-                width: '1.5rem',
-                height: '1.5rem',
-                color: Colors.backgroundPrimaryLight,
-              }}
-            />
-          }
-          title={'Home'}
-        />
-        <IconTitleButton
-          icon={
-            <AutoModeIcon
-              sx={{
-                width: '1.5rem',
-                height: '1.5rem',
-                color: Colors.backgroundPrimaryLight,
-              }}
-            />
-          }
-          title={'Macros'}
-        />
+        <Link to={Paths.HOME} style={{ textDecoration: 'none' }}>
+          <IconTitleButton
+            icon={
+              <HomeIcon
+                sx={{
+                  width: '1.5rem',
+                  height: '1.5rem',
+                  color: Colors.backgroundPrimaryLight,
+                }}
+              />
+            }
+            title={'Home'}
+            isActive={location.pathname === Paths.HOME}
+          />
+        </Link>
+        <Link to={Paths.MACROS} style={{ textDecoration: 'none' }}>
+          <IconTitleButton
+            icon={
+              <AutoModeIcon
+                sx={{
+                  width: '1.5rem',
+                  height: '1.5rem',
+                  color: Colors.backgroundPrimaryLight,
+                }}
+              />
+            }
+            title={'Macros'}
+            isActive={location.pathname === Paths.MACROS}
+          />
+        </Link>
       </Box>
       <Box
         sx={{
@@ -67,15 +76,15 @@ export const Sidebar: React.FC<SidebarProps> = ({ handleSettingsDialogOpen, hand
           icon={
             <SettingsOutlinedIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
           }
-          onClick={handleSettingsDialogOpen}
+          onClick={settingsDialogOpen}
         />
         <IconTitleButton
           icon={
             <SwitchAccessShortcutIcon
               sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
             />
           }
-          onClick={handleShortcutsDialogOpen}
+          onClick={shortcutsDialogOpen}
         />
       </Box>
     </Box>

diff --git a/app/front-end/src/types/constants/paths.ts b/app/front-end/src/types/constants/paths.ts
@@ -16,12 +16,13 @@
  * @example
  * // Example usage of Paths
  * import { Paths } from './path/to/paths';
- * 
+ *
  * // Configure routing
  * <Route path={Paths.HOME} component={HomePage} />
  * <Route path={Paths.NOTFOUND} component={NotFoundPage} />
  */
 export const Paths = {
-    HOME: '/',
-    NOTFOUND: '*',
-};
+  HOME: '/',
+  MACROS: '/macros',
+  NOTFOUND: '*',
+};