feat: UI tweak new sidebar (#7165)

frontend/src/component/layout/MainLayout/DraftBanner/DraftBanner.tsx

@@ -40,9 +40,11 @@ const StyledDraftBanner = styled(Box)(({ theme }) => ({
     paddingRight: theme.spacing(9),
     marginLeft: 'auto',
     marginRight: 'auto',
-    [theme.breakpoints.down(1024)]: {
+    [theme.breakpoints.down('lg')]: {
         marginLeft: 0,
         marginRight: 0,
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
     },
     [theme.breakpoints.down('sm')]: {
         minWidth: '100%',

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -70,6 +70,12 @@ const NewMainLayoutContent = styled(Grid)(({ theme }) => ({
         paddingRight: theme.spacing(1),
         margin: 0,
     },
+    [theme.breakpoints.up('xl')]: {
+        maxWidth: '1920px',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+    },
+    minHeight: '94vh',
 }));
 
 const StyledImg = styled('img')(() => ({

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx

@@ -59,6 +59,7 @@ import GitHubIcon from '@mui/icons-material/GitHub';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import { basePath } from 'utils/formatPath';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import type { Theme } from '@mui/material/styles/createTheme';
 
 export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
     fill: theme.palette.neutral.main,
@@ -82,6 +83,14 @@ const EnterprisePlanBadge = () => (
     </Tooltip>
 );
 
+const listItemButtonStyle = (theme: Theme) => ({
+    borderRadius: theme.spacing(0.5),
+    borderLeft: `${theme.spacing(0.5)} solid transparent`,
+    '&:hover': {
+        borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
+    },
+});
+
 const FullListItem: FC<{
     href: string;
     text: string;
@@ -90,11 +99,16 @@ const FullListItem: FC<{
 }> = ({ href, text, badge, onClick, children }) => {
     return (
         <ListItem disablePadding onClick={onClick}>
-            <ListItemButton dense={true} component={Link} to={href}>
+            <ListItemButton
+                dense={true}
+                component={Link}
+                to={href}
+                sx={listItemButtonStyle}
+            >
                 <ListItemIcon sx={(theme) => ({ minWidth: theme.spacing(4) })}>
                     {children}
                 </ListItemIcon>
-                <ListItemText primary={text} />
+                <ListItemText sx={{ whiteSpace: 'nowrap' }} primary={text} />
                 {badge}
             </ListItemButton>
         </ListItem>
@@ -148,7 +162,12 @@ const MiniListItem: FC<{ href: string; text: string }> = ({
 }) => {
     return (
         <ListItem disablePadding>
-            <ListItemButton dense={true} component={Link} to={href}>
+            <ListItemButton
+                dense={true}
+                component={Link}
+                to={href}
+                sx={listItemButtonStyle}
+            >
                 <Tooltip title={text} placement='right'>
                     <ListItemIcon
                         sx={(theme) => ({ minWidth: theme.spacing(4) })}
@@ -163,8 +182,7 @@ const MiniListItem: FC<{ href: string; text: string }> = ({
 
 export const StyledBox = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
-    paddingTop: theme.spacing(2),
+    padding: theme.spacing(2, 1, 6, 1),
-    paddingBottom: theme.spacing(6),
 }));
 
 const icons: Record<string, typeof SvgIcon> = {
@@ -206,19 +224,22 @@ const IconRenderer: FC<{ path: string }> = ({ path }) => {
     return <IconComponent />;
 };
 
+const ShowHideWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'mode',
+})<{ mode: 'mini' | 'full' }>(({ theme, mode }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    margin: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
+    cursor: 'pointer',
+}));
+
 const ShowHide: FC<{ mode: 'full' | 'mini'; onChange: () => void }> = ({
     mode,
     onChange,
 }) => {
     return (
-        <Box
+        <ShowHideWrapper onClick={onChange} mode={mode}>
-            sx={(theme) => ({
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                margin: theme.spacing(2, 1, 0, mode === 'mini' ? 1 : 2),
-            })}
-        >
             {mode === 'full' && (
                 <Box
                     sx={(theme) => ({
@@ -229,10 +250,16 @@ const ShowHide: FC<{ mode: 'full' | 'mini'; onChange: () => void }> = ({
                     Hide (⌘ + B)
                 </Box>
             )}
-            <IconButton onClick={onChange}>
+            <IconButton>
-                {mode === 'full' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+                {mode === 'full' ? (
+                    <ChevronLeftIcon />
+                ) : (
+                    <Tooltip title='Expand (⌘ + B)' placement='right'>
+                        <ChevronRightIcon />
+                    </Tooltip>
+                )}
             </IconButton>
-        </Box>
+        </ShowHideWrapper>
     );
 };