feat: expandable sidebar

webapp/src/views/projects/projectMenu/ProjectMenu.tsx

@@ -9,6 +9,8 @@ import {
   Translate01,
   UploadCloud02,
   User01,
+  ChevronLeft,
+  ChevronRight,
 } from '@untitled-ui/icons-react';
 import { Link, LINKS, PARAMS } from 'tg.constants/links';
 import { useConfig } from 'tg.globalContext/helpers';
@@ -19,10 +21,20 @@ import { SideLogo } from './SideLogo';
 import { useProjectPermissions } from 'tg.hooks/useProjectPermissions';
 import { useGlobalContext } from 'tg.globalContext/GlobalContext';
 import { Integration, Stars } from 'tg.component/CustomIcons';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { createAdder } from 'tg.fixtures/pluginAdder';
 import { useAddProjectMenuItems } from 'tg.ee';
 import { useProject } from 'tg.hooks/useProject';
+import { IconButton, styled } from '@mui/material';
+
+const StyledToggleButton = styled(IconButton)`
+  margin: auto;
+  margin-bottom: 70px;
+  color: ${({ theme }) => theme.palette.emphasis[600]};
+  &:hover {
+    color: ${({ theme }) => theme.palette.emphasis[800]};
+  }
+`;
 
 export const ProjectMenu = () => {
   const project = useProject();
@@ -34,6 +46,8 @@ export const ProjectMenu = () => {
 
   const topBarHeight = useGlobalContext((c) => c.layout.topBarHeight);
 
+  const [expanded, setExpanded] = useState(false);
+
   const baseItems = [
     {
       id: 'projects',
@@ -157,9 +171,9 @@ export const ProjectMenu = () => {
   const items = addEeItems(baseItems);
 
   return (
-    <SideMenu>
+    <SideMenu expanded={expanded}>
       <SideLogo hidden={!topBarHeight} />
-      {items.map((item, index) => {
+      {items.map((item) => {
         if (!item.condition({ config, satisfiesPermission })) return null;
         const { dataCy, icon: Icon, link, ...rest } = item;
         return (
@@ -172,9 +186,16 @@ export const ProjectMenu = () => {
             {...rest}
             icon={<Icon />}
             data-cy={dataCy}
+            expanded={expanded}
           />
         );
       })}
+      <StyledToggleButton
+        onClick={() => setExpanded((prev) => !prev)}
+        size="small"
+      >
+        {expanded ? <ChevronLeft /> : <ChevronRight />}
+      </StyledToggleButton>
     </SideMenu>
   );
 };

webapp/src/views/projects/projectMenu/SideMenu.tsx

@@ -3,29 +3,37 @@ import { styled } from '@mui/material';
 import { useGlobalContext } from 'tg.globalContext/GlobalContext';
 
 export const MENU_WIDTH = 60;
+export const MENU_WIDTH_EXPANDED = 200;
 
-const StyledMenuWrapper = styled('div')`
-  min-width: ${MENU_WIDTH}px;
+const StyledMenuWrapper = styled('div')<{ expanded: boolean }>`
+  min-width: ${({ expanded }) =>
+    expanded ? MENU_WIDTH_EXPANDED : MENU_WIDTH}px;
+  transition: min-width 0.2s ease-in-out;
 `;
 
-const StyledMenuFixed = styled('menu')`
+const StyledMenuFixed = styled('menu')<{ expanded: boolean }>`
   position: fixed;
   top: 0px;
   bottom: 0px;
   overscroll-behavior: contain;
   margin: 0px;
   padding: 0px;
-  width: ${MENU_WIDTH}px;
+  width: ${({ expanded }) => (expanded ? MENU_WIDTH_EXPANDED : MENU_WIDTH)}px;
   display: flex;
   flex-direction: column;
+  transition: width 0.2s ease-in-out;
 `;
 
-export const SideMenu: React.FC = ({ children }) => {
+export const SideMenu: React.FC<{
+  expanded: boolean;
+  children: React.ReactNode;
+}> = ({ expanded, children }) => {
   const topBannerHeight = useGlobalContext((c) => c.layout.topBannerHeight);
 
   return (
-    <StyledMenuWrapper>
+    <StyledMenuWrapper expanded={expanded}>
       <StyledMenuFixed
+        expanded={expanded}
         sx={{ top: topBannerHeight }}
         color="secondary"
         data-cy="project-menu-items"

webapp/src/views/projects/projectMenu/SideMenuItem.tsx

@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
 import { styled, Tooltip } from '@mui/material';
 import { QuickStartHighlight } from 'tg.component/layout/QuickStartGuide/QuickStartHighlight';
 
-const StyledItem = styled('li')`
+const StyledItem = styled('li')<{ expanded: boolean }>`
   display: flex;
   list-style: none;
   flex-direction: column;
@@ -16,24 +16,37 @@ const StyledItem = styled('li')`
 
   & .link {
     display: flex;
-    padding: 10px 0px;
+    padding: 10px ${({ expanded }) => (expanded ? '16px' : '0px')};
     cursor: pointer;
-    justify-content: center;
+    justify-content: ${({ expanded }) => (expanded ? 'flex-start' : 'center')};
+    align-items: center;
+    gap: ${({ expanded }) => (expanded ? '12px' : '0px')};
     color: ${({ theme }) => theme.palette.emphasis[600]};
     outline: 0;
     transition: all 0.2s ease-in-out;
     &:focus,
     &:hover {
       color: ${({ theme }) => theme.palette.emphasis[800]};
     }
-    width: 44px;
+    width: ${({ expanded }) => (expanded ? 'calc(100% - 8px)' : '44px')};
+    margin: ${({ expanded }) => (expanded ? '0 4px' : '0')};
     border-radius: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-decoration: none;
   }
 
   & .selected {
     color: ${({ theme }) => theme.palette.primaryText + ' !important'};
     background: ${({ theme }) => theme.palette.grey[500] + '33 !important'};
   }
+
+  & .text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
 `;
 
 type Props = {
@@ -44,6 +57,7 @@ type Props = {
   hidden?: boolean;
   'data-cy': string;
   quickStart?: SideMenuItemQuickStart;
+  expanded?: boolean;
 };
 
 export type SideMenuItemQuickStart = Omit<
@@ -58,6 +72,7 @@ export function SideMenuItem({
   matchAsPrefix,
   hidden,
   quickStart,
+  expanded = false,
   ...props
 }: Props) {
   const match = useLocation();
@@ -87,7 +102,7 @@ export function SideMenuItem({
   }
 
   return (
-    <StyledItem data-cy="project-menu-item">
+    <StyledItem data-cy="project-menu-item" expanded={expanded}>
       {wrapWithQuickStart(
         <Tooltip
           title={text}
@@ -103,6 +118,7 @@ export function SideMenuItem({
             className={clsx('link', { selected: isSelected })}
           >
             {icon}
+            {expanded && <span className="text">{text}</span>}
           </Link>
         </Tooltip>
       )}