chore: implement collapsed navigation

web/src/components/Navigation.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import { useEffect } from "react";
 import { NavLink } from "react-router-dom";
@@ -16,10 +17,12 @@ interface NavLinkItem {
 }
 
 interface Props {
+  collapsed?: boolean;
   className?: string;
 }
 
 const Navigation = (props: Props) => {
+  const { collapsed, className } = props;
   const t = useTranslate();
   const user = useCurrentUser();
   const inboxStore = useInboxStore();
@@ -45,31 +48,31 @@ const Navigation = (props: Props) => {
     id: "header-home",
     path: "/",
     title: t("common.home"),
-    icon: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Home className="w-6 h-auto opacity-70" />,
   };
   const timelineNavLink: NavLinkItem = {
     id: "header-timeline",
     path: "/timeline",
     title: t("timeline.title"),
-    icon: <Icon.GanttChartSquare className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />,
   };
   const resourcesNavLink: NavLinkItem = {
     id: "header-resources",
     path: "/resources",
     title: t("common.resources"),
-    icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />,
   };
   const exploreNavLink: NavLinkItem = {
     id: "header-explore",
     path: "/explore",
     title: t("common.explore"),
-    icon: <Icon.Globe2 className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />,
   };
   const profileNavLink: NavLinkItem = {
     id: "header-profile",
     path: user ? `/u/${encodeURIComponent(user.username)}` : "",
     title: t("common.profile"),
-    icon: <Icon.User2 className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.User2 className="w-6 h-auto opacity-70" />,
   };
   const inboxNavLink: NavLinkItem = {
     id: "header-inbox",
@@ -78,7 +81,7 @@ const Navigation = (props: Props) => {
     icon: (
       <>
         <div className="relative">
-          <Icon.Bell className="mr-3 w-6 h-auto opacity-70" />
+          <Icon.Bell className="w-6 h-auto opacity-70" />
           {hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>}
         </div>
       </>
@@ -88,25 +91,25 @@ const Navigation = (props: Props) => {
     id: "header-archived",
     path: "/archived",
     title: t("common.archived"),
-    icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Archive className="w-6 h-auto opacity-70" />,
   };
   const settingNavLink: NavLinkItem = {
     id: "header-setting",
     path: "/setting",
     title: t("common.settings"),
-    icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Settings className="w-6 h-auto opacity-70" />,
   };
   const signInNavLink: NavLinkItem = {
     id: "header-auth",
     path: "/auth",
     title: t("common.sign-in"),
-    icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.LogIn className="w-6 h-auto opacity-70" />,
   };
   const aboutNavLink: NavLinkItem = {
     id: "header-about",
     path: "/about",
     title: t("common.about"),
-    icon: <Icon.Smile className="mr-3 w-6 h-auto opacity-70" />,
+    icon: <Icon.Smile className="w-6 h-auto opacity-70" />,
   };
 
   const navLinks: NavLinkItem[] = user
@@ -117,16 +120,17 @@ const Navigation = (props: Props) => {
     <header
       className={classNames(
         "w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
-        props.className
+        className
       )}
     >
-      <UserBanner />
+      <UserBanner collapsed={collapsed} />
       <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (
           <NavLink
             className={({ isActive }) =>
               classNames(
-                "w-full px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
+                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
+                collapsed ? "" : "w-full px-4",
                 isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent"
               )
             }
@@ -135,9 +139,14 @@ const Navigation = (props: Props) => {
             id={navLink.id}
             unstable_viewTransition
           >
-            <>
-              {navLink.icon} {navLink.title}
-            </>
+            {props.collapsed ? (
+              <Tooltip title={navLink.title} placement="right" arrow>
+                <div>{navLink.icon}</div>
+              </Tooltip>
+            ) : (
+              navLink.icon
+            )}
+            {!props.collapsed && <span className="ml-3">{navLink.title}</span>}
           </NavLink>
         ))}
       </div>