Sidebar is collapsible (#4614)

* sidebar collapsible

* add more colors on object avatar

* handle icon on 1st level object section

* added scrollarea component

* scroll object section

* size adjustement

* cleaning

* animate dropdown menu

* css adjustment

* reduce shift

* update constant for local storage

* add useLocalStorage to store menu state

* fix initial sidebar state from local storage

* revert test update (mistake)

---------

Co-authored-by: pa-lem <[email protected]>

Author: bilalabbad

frontend/app/package-lock.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@svgr/rollup": "^8.1.0",

frontend/app/package.json

@@ -77,17 +77,17 @@ const UnauthenticatedAccountMenu = () => {
   return (
     <DropdownMenu>
       <Link
-        className="flex items-center h-14 rounded-lg p-2 gap-2 hover:bg-indigo-50"
+        className="flex items-center h-14 w-full rounded-lg p-2 gap-2 hover:bg-indigo-50 overflow-hidden"
         to="/login"
         state={{ from: location }}
       >
-        <div className="bg-indigo-50 rounded-full h-10 w-10 flex items-center justify-center overflow-hidden border border-white">
+        <div className="bg-indigo-50 rounded-full h-10 w-10 flex items-center justify-center overflow-hidden border border-white shrink-0">
           <Icon icon="mdi:user" className="text-5xl relative top-1 text-neutral-600" />
         </div>
 
-        <div className="flex flex-col items-start flex-grow">
-          <span className="font-semibold text-sm">Log in</span>
-          <span className="text-xs text-neutral-500">anonymous</span>
+        <div className="group-data-[collapsed=true]/sidebar:hidden overflow-hidden">
+          <div className="font-semibold text-sm truncate">Log in</div>
+          <div className="text-xs text-neutral-500 truncate">anonymous</div>
         </div>
 
         <DropdownMenuTrigger
@@ -100,7 +100,7 @@ const UnauthenticatedAccountMenu = () => {
             variant="ghost"
             size="square"
             data-testid="unauthenticated-menu-trigger"
-            className="hover:bg-indigo-100"
+            className="shrink-0 ml-auto hover:bg-indigo-100 group-data-[collapsed=true]/sidebar:hidden"
           >
             <Icon icon="mdi:dots-vertical" className="text-lg" />
           </Button>
@@ -153,15 +153,20 @@ const AuthenticatedAccountMenu = ({
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
-          className="h-auto gap-2 hover:bg-indigo-50 rounded-lg p-2"
+          className="h-auto w-full justify-start gap-2 hover:bg-indigo-50 rounded-lg p-2 overflow-hidden text-left"
           data-testid="authenticated-menu-trigger"
         >
-          <Avatar name={profile?.name?.value} className="h-10 w-10" />
-          <div className="flex flex-col items-start">
-            <span className="font-semibold text-sm">{profile?.label?.value}</span>
-            <span className="text-xs text-neutral-500">{profile?.role?.value}</span>
+          <Avatar name={profile?.name?.value} className="h-10 w-10 shrink-0" />
+
+          <div className="group-data-[collapsed=true]/sidebar:hidden overflow-hidden">
+            <div className="font-semibold text-sm truncate">{profile?.label?.value}</div>
+            <div className="text-xs text-neutral-500 truncate">{profile?.role?.value}</div>
           </div>
-          <Icon icon="mdi:dots-vertical" className="text-lg m-2 ml-auto" />
+
+          <Icon
+            icon="mdi:dots-vertical"
+            className="text-lg m-2 ml-auto group-data-[collapsed=true]/sidebar:hidden transition-all"
+          />
         </Button>
       </DropdownMenuTrigger>
 
@@ -191,7 +196,7 @@ const AccountMenuSkeleton = () => {
     <div className="flex items-center gap-2 p-2">
       <Skeleton className="rounded-full h-10 w-10" />
 
-      <div className="flex-grow space-y-2">
+      <div className="flex-grow space-y-2 group-data-[collapsed=true]/sidebar:hidden">
         <Skeleton className="h-4 w-4/5" />
         <Skeleton className="h-2 w-3/5" />
       </div>

frontend/app/src/components/account-menu.tsx

@@ -60,11 +60,12 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 interface ButtonWithTooltipProps extends ButtonProps {
   tooltipContent?: TooltipProps["content"];
   tooltipEnabled?: TooltipProps["enabled"];
+  side?: TooltipProps["side"];
 }
 
 export const ButtonWithTooltip = forwardRef<HTMLButtonElement, ButtonWithTooltipProps>(
-  ({ tooltipContent, tooltipEnabled, ...props }, ref) => (
-    <Tooltip enabled={tooltipEnabled} content={tooltipContent}>
+  ({ tooltipContent, tooltipEnabled, side, ...props }, ref) => (
+    <Tooltip enabled={tooltipEnabled} content={tooltipContent} side={side}>
       <Button ref={ref} {...props} />
     </Tooltip>
   )