fix: sidebar fixes

Author: Rainbrand

console/ui/.eslintrc.cjs

@@ -22,5 +22,6 @@ module.exports = {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     '@typescript-eslint/no-misused-promises': 'off',
     '@typescript-eslint/no-unsafe-argument': 'off',
+    'react-hooks/exhaustive-deps': 'off',
   },
 };

console/ui/src/entities/sidebar-item/model/types.ts

@@ -4,7 +4,7 @@ export interface SidebarItemProps {
   path: string;
   label: string;
   icon?: ComponentType<SVGProps<SVGSVGElement>>;
-  isActive?: string;
+  isActive?: boolean;
   isCollapsed?: boolean;
   target?: string;
 }

console/ui/src/entities/sidebar-item/ui/SidebarItemContent.tsx

@@ -12,7 +12,7 @@ const SidebarItemContent: FC<SidebarItemProps> = ({
   isCollapsed,
 }) => {
   const theme = useTheme();
-  
+
   return (
     <ListItemButton
       sx={{
@@ -39,8 +39,8 @@ const SidebarItemContent: FC<SidebarItemProps> = ({
         {SidebarIcon ? <SidebarIcon width="30px" height="30px" /> : null}
       </ListItemIcon>
       {!isCollapsed ? (
-        <ListItemText 
-          primary={label} 
+        <ListItemText
+          primary={label}
           sx={{
             color: 'text.primary',
             '& .MuiListItemText-primary': {

console/ui/src/widgets/sidebar/model/constants.ts

@@ -49,6 +49,6 @@ export const sidebarLowData = (t: TFunction) => [
   },
 ];
 
-export const OPEN_SIDEBAR_WIDTH = '220px';
+export const OPEN_SIDEBAR_WIDTH = '222px';
 
-export const COLLAPSED_SIDEBAR_WIDTH = '62px';
+export const COLLAPSED_SIDEBAR_WIDTH = '66px';

console/ui/src/widgets/sidebar/ui/index.tsx

@@ -17,7 +17,7 @@ const Sidebar = () => {
   const toggleSidebarCollapse = () => {
     setIsCollapsed((prev) => {
       const newValue = !prev;
-      localStorage.setItem('isSidebarCollapsed', newValue);
+      localStorage.setItem('isSidebarCollapsed', String(newValue));
       return newValue;
     });
   };
@@ -30,43 +30,38 @@ const Sidebar = () => {
     if ((!isCollapsed && isLesserThan1600) || (isCollapsed && !isLesserThan1600)) toggleSidebarCollapse();
   }, [isLesserThan1600]);
 
-  const sidebarItems = sidebarData(t).map((item) => (
-    <SidebarItem
-      key={item.label + item.path}
-      {...item}
-      isActive={isActive(item.path)} //TODO: fix
-      isCollapsed={isCollapsed}
-    />
-  ));
-
-  const sidebarLowIcons = sidebarLowData(t).map((item) => (
-    <SidebarItem key={item.label + item.path} isCollapsed={isCollapsed} target="_blank" {...item} />
-  ));
-
   return (
     <Drawer
       variant="permanent"
       sx={{
         width: isCollapsed ? COLLAPSED_SIDEBAR_WIDTH : OPEN_SIDEBAR_WIDTH,
         flexShrink: 0,
+        overflow: 'auto',
         [`& .MuiDrawer-paper`]: {
           width: isCollapsed ? COLLAPSED_SIDEBAR_WIDTH : OPEN_SIDEBAR_WIDTH,
           boxSizing: 'border-box',
           transition: 'width .1s ease-in-out',
         },
       }}>
       <Toolbar />
-      <Stack
-        direction="column"
-        height="100%"
-        width="100%"
-        overflow="auto"
-        alignItems="flex-start"
-        justifyContent="center">
-        <List sx={{ width: '100%' }}>{sidebarItems}</List>
+      <Stack direction="column" height="100%" width="100%" alignItems="flex-start" justifyContent="center">
+        <List sx={{ width: '100%' }}>
+          {sidebarData(t).map((item) => (
+            <SidebarItem
+              key={item.label + item.path}
+              {...item}
+              isActive={isActive(item.path)}
+              isCollapsed={isCollapsed}
+            />
+          ))}
+        </List>
         <Box sx={{ height: '100%' }} />
         <Divider flexItem />
-        <List sx={{ width: '100%', padding: '8px 0 8px 0' }}>{sidebarLowIcons}</List>
+        <List sx={{ width: '100%', padding: '8px 0 8px 0' }}>
+          {sidebarLowData(t).map((item) => (
+            <SidebarItem key={item.label + item.path} isCollapsed={isCollapsed} target="_blank" {...item} />
+          ))}
+        </List>
         <Divider flexItem />
         <IconButton
           sx={{