fix: show scrollbar in navigation menu

apps/web/src/components/navigation-menu/index.js

@@ -27,6 +27,7 @@ import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import useLocation from "../../hooks/use-location";
+import { FlexScrollContainer } from "../scroll-container";
 
 function shouldSelectNavItem(route, pin) {
   if (pin.type === "notebook") {
@@ -126,96 +127,96 @@ function NavigationMenu(props) {
       bg={"bgSecondary"}
       px={0}
     >
-      <Flex
+      <FlexScrollContainer>
-        flexDirection="column"
+        <Flex flexDirection="column">
-        sx={{
+          {routes.map((item) => (
-          overflow: "scroll",
+            <NavigationItem
-          scrollbarWidth: "none",
+              key={item.path}
-          "::-webkit-scrollbar": { width: 0, height: 0 },
+              title={item.title}
-          msOverflowStyle: "none",
+              icon={item.icon}
-        }}
+              isNew={item.isNew}
-      >
+              selected={
-        {routes.map((item) => (
+                item.path === "/"
-          <NavigationItem
+                  ? location === item.path
-            key={item.path}
+                  : location.startsWith(item.path)
-            title={item.title}
-            icon={item.icon}
-            isNew={item.isNew}
-            selected={
-              item.path === "/"
-                ? location === item.path
-                : location.startsWith(item.path)
-            }
-            onClick={() => {
-              if (!isMobile && location === item.path)
-                return toggleNavigationContainer();
-              _navigate(item.path);
-            }}
-          />
-        ))}
-        {colors.map((color) => (
-          <NavigationItem
-            key={color.id}
-            title={db.colors.alias(color.id)}
-            icon={Circle}
-            selected={location === `/colors/${color.id}`}
-            color={color.title.toLowerCase()}
-            onClick={() => {
-              _navigate(`/colors/${color.id}`);
-            }}
-            menu={{
-              items: [
-                {
-                  key: "rename",
-                  title: () => "Rename color",
-                  onClick: async ({ color }) => {
-                    await showRenameColorDialog(color.id);
-                  },
-                },
-              ],
-              extraData: { color },
-            }}
-          />
-        ))}
-        <Box width="85%" height="0.8px" bg="border" alignSelf="center" my={1} />
-        {pins.map((pin) => (
-          <NavigationItem
-            key={pin.id}
-            title={pin.type === "tag" ? db.tags.alias(pin.id) : pin.title}
-            menu={{
-              items: [
-                {
-                  key: "removeshortcut",
-                  title: () => "Remove shortcut",
-                  onClick: async ({ pin }) => {
-                    await db.settings.unpin(pin.id);
-                    refreshNavItems();
-                  },
-                },
-              ],
-              extraData: { pin },
-            }}
-            icon={
-              pin.type === "notebook"
-                ? Notebook2
-                : pin.type === "tag"
-                ? Tag2
-                : Topic
-            }
-            isShortcut
-            selected={shouldSelectNavItem(location, pin)}
-            onClick={() => {
-              if (pin.type === "notebook") {
-                _navigate(`/notebooks/${pin.id}`);
-              } else if (pin.type === "topic") {
-                _navigate(`/notebooks/${pin.notebookId}/${pin.id}`);
-              } else if (pin.type === "tag") {
-                _navigate(`/tags/${pin.id}`);
               }
-            }}
+              onClick={() => {
+                if (!isMobile && location === item.path)
+                  return toggleNavigationContainer();
+                _navigate(item.path);
+              }}
+            />
+          ))}
+          {colors.map((color) => (
+            <NavigationItem
+              key={color.id}
+              title={db.colors.alias(color.id)}
+              icon={Circle}
+              selected={location === `/colors/${color.id}`}
+              color={color.title.toLowerCase()}
+              onClick={() => {
+                _navigate(`/colors/${color.id}`);
+              }}
+              menu={{
+                items: [
+                  {
+                    key: "rename",
+                    title: () => "Rename color",
+                    onClick: async ({ color }) => {
+                      await showRenameColorDialog(color.id);
+                    },
+                  },
+                ],
+                extraData: { color },
+              }}
+            />
+          ))}
+          <Box
+            width="85%"
+            height="0.8px"
+            bg="border"
+            alignSelf="center"
+            my={1}
           />
-        ))}
+          {pins.map((pin) => (
-      </Flex>
+            <NavigationItem
+              key={pin.id}
+              title={pin.type === "tag" ? db.tags.alias(pin.id) : pin.title}
+              menu={{
+                items: [
+                  {
+                    key: "removeshortcut",
+                    title: () => "Remove shortcut",
+                    onClick: async ({ pin }) => {
+                      await db.settings.unpin(pin.id);
+                      refreshNavItems();
+                    },
+                  },
+                ],
+                extraData: { pin },
+              }}
+              icon={
+                pin.type === "notebook"
+                  ? Notebook2
+                  : pin.type === "tag"
+                  ? Tag2
+                  : Topic
+              }
+              isShortcut
+              selected={shouldSelectNavItem(location, pin)}
+              onClick={() => {
+                if (pin.type === "notebook") {
+                  _navigate(`/notebooks/${pin.id}`);
+                } else if (pin.type === "topic") {
+                  _navigate(`/notebooks/${pin.notebookId}/${pin.id}`);
+                } else if (pin.type === "tag") {
+                  _navigate(`/tags/${pin.id}`);
+                }
+              }}
+            />
+          ))}
+        </Flex>
+      </FlexScrollContainer>
       <Flex flexDirection="column">
         {theme === "light" ? (
           <NavigationItem