Addressed issues, made it so the navigation buttons could be disabled

Strexas · Sep 2, 2024 · 5227150 · 5227150
1 parent 3c4167d
commit 5227150
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 48 deletions.
diff --git a/app/front-end/src/components/buttons/IconTitleButton.tsx b/app/front-end/src/components/buttons/IconTitleButton.tsx
@@ -1,4 +1,3 @@
-import { Colors } from '@/types';
 import { alpha, Box, IconButton, Typography, useTheme } from '@mui/material';
 
 interface Props {
@@ -9,6 +8,7 @@ interface Props {
   borderRadius?: string;
   onClick?: () => void;
   isActive?: boolean;
+  disabled?: boolean;
 }
 
 /**
@@ -38,8 +38,10 @@ export const IconTitleButton: React.FC<Props> = ({
   borderRadius,
   onClick,
   isActive = false,
+  disabled = false,
 }) => {
   const Theme = useTheme();
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
       <IconButton
@@ -49,19 +51,34 @@ export const IconTitleButton: React.FC<Props> = ({
           height: height || '3rem',
           borderRadius: borderRadius || '1rem',
           transition: 'background-color 0.5s ease',
+          color: disabled ? alpha(Theme.palette.primary.contrastText, 0.4) : Theme.palette.primary.contrastText,
           ':hover': {
-            backgroundColor: isActive
-              ? alpha(Theme.palette.primary.contrastText, 0.3)
-              : alpha(Theme.palette.primary.contrastText, 0.2),
+            backgroundColor: disabled
+              ? 'transparent'
+              : 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',
+          backgroundColor: disabled
+            ? 'transparent'
+            : isActive
+              ? alpha(Theme.palette.primary.contrastText, 0.3)
+              : 'transparent',
         }}
-        onClick={onClick}
+        onClick={disabled ? () => {} : onClick}
       >
         {icon}
       </IconButton>
       {title && (
-        <Typography sx={{ color: Colors.backgroundPrimaryLight, fontSize: '0.875rem', fontWeight: 'bold' }}>
+        <Typography
+          sx={{
+            color: disabled ? alpha(Theme.palette.primary.contrastText, 0.4) : Theme.palette.primary.contrastText,
+            fontSize: '0.875rem',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+          }}
+          onClick={disabled ? () => {} : onClick}
+        >
           {title}
         </Typography>
       )}

diff --git a/app/front-end/src/components/layouts/baseLayout.tsx b/app/front-end/src/components/layouts/baseLayout.tsx
@@ -1,5 +1,5 @@
 import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs';
-import { Sidebar } from '@/components/sidebar/sidebar';
+import { Sidebar } from '@/components/sidebar';
 import { Colors } from '@/types';
 import { Box, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';

diff --git a/app/front-end/src/components/sidebar/index.ts b/app/front-end/src/components/sidebar/index.ts
@@ -0,0 +1 @@
+export { Sidebar } from './sidebar';
diff --git a/app/front-end/src/components/sidebar/sidebar.tsx b/app/front-end/src/components/sidebar/sidebar.tsx
@@ -1,13 +1,13 @@
 import { IconTitleButton } from '@/components/buttons/IconTitleButton';
-import { Colors, Paths } from '@/types';
+import { 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';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 interface SidebarProps {
   settingsDialogOpen: () => void;
@@ -16,6 +16,7 @@ interface SidebarProps {
 
 export const Sidebar: React.FC<SidebarProps> = ({ settingsDialogOpen, shortcutsDialogOpen }) => {
   const location = useLocation();
+  const navigate = useNavigate();
 
   return (
     <Box sx={{ width: '4.2vw', height: '100%', display: 'flex', flexDirection: 'column' }}>
@@ -30,36 +31,33 @@ export const Sidebar: React.FC<SidebarProps> = ({ settingsDialogOpen, shortcutsD
           alignItems: 'center',
         }}
       >
-        <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>
+        <IconTitleButton
+          icon={
+            <HomeIcon
+              sx={{
+                width: '1.5rem',
+                height: '1.5rem',
+              }}
+            />
+          }
+          title={'Home'}
+          isActive={location.pathname === Paths.HOME}
+          onClick={() => navigate(Paths.HOME)}
+        />
+        <IconTitleButton
+          icon={
+            <AutoModeIcon
+              sx={{
+                width: '1.5rem',
+                height: '1.5rem',
+              }}
+            />
+          }
+          title={'Macros'}
+          isActive={location.pathname === Paths.MACROS}
+          onClick={() => navigate(Paths.MACROS)}
+          disabled
+        />
       </Box>
       <Box
         sx={{
@@ -73,17 +71,11 @@ export const Sidebar: React.FC<SidebarProps> = ({ settingsDialogOpen, shortcutsD
         }}
       >
         <IconTitleButton
-          icon={
-            <SettingsOutlinedIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
-          }
+          icon={<SettingsOutlinedIcon sx={{ width: '1.5rem', height: '1.5rem' }} />}
           onClick={settingsDialogOpen}
         />
         <IconTitleButton
-          icon={
-            <SwitchAccessShortcutIcon
-              sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
-            />
-          }
+          icon={<SwitchAccessShortcutIcon sx={{ width: '1.5rem', height: '1.5rem' }} />}
           onClick={shortcutsDialogOpen}
         />
       </Box>