Fix MainNavigation scrollbar overlapping sidebar icons

.changeset/fix-main-navigation-scrollbar.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Fix scrollbar overlapping icons in MainNavigation by adding `overflow-y: auto` and `scrollbar-gutter: stable`

packages/admin/admin/src/mui/mainNavigation/MainNavigation.styles.ts

@@ -30,6 +30,13 @@ export type OwnerState = {
 const getSharedStyles = (theme: Theme, headerHeight: number) => css`
     background-color: ${theme.palette.common.white};
     overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
     height: calc(100% - ${headerHeight}px);
     top: ${headerHeight}px;
 

storybook/src/admin/mui/Menu.stories.tsx

@@ -12,7 +12,25 @@ import {
     MasterLayout,
     useWindowSize,
 } from "@comet/admin";
-import { CometColor, Dashboard, Settings, Sort } from "@comet/admin-icons";
+import {
+    Account,
+    Archive,
+    Assets,
+    Calendar,
+    CometColor,
+    Dashboard,
+    Document,
+    File,
+    Folder,
+    Language,
+    Link,
+    Mail,
+    Preview,
+    Settings,
+    Sort,
+    Tag,
+    Wrench,
+} from "@comet/admin-icons";
 import { Card, CardContent, Typography } from "@mui/material";
 import { Route, Switch } from "react-router";
 
@@ -100,3 +118,87 @@ export const _Menu = {
 
     parameters: { layout: "fullscreen" },
 };
+
+const AppMenuWithManyItems = () => {
+    const windowSize = useWindowSize();
+
+    return (
+        <MainNavigation variant={windowSize.width < permanentMenuMinWidth ? "temporary" : "permanent"}>
+            <MainNavigationItemGroup title="Content">
+                <MainNavigationItemRouterLink primary="Dashboard" icon={<Dashboard />} to="/dashboard" />
+                <MainNavigationItemRouterLink primary="Pages" icon={<Document />} to="/pages" />
+                <MainNavigationItemRouterLink primary="Assets" icon={<Assets />} to="/assets" />
+                <MainNavigationItemRouterLink primary="Files" icon={<File />} to="/files" />
+                <MainNavigationItemRouterLink primary="Folders" icon={<Folder />} to="/folders" />
+                <MainNavigationCollapsibleItem primary="Blog" icon={<Tag />}>
+                    <MainNavigationItemRouterLink primary="Posts" to="/blog/posts" />
+                    <MainNavigationItemRouterLink primary="Categories" to="/blog/categories" />
+                    <MainNavigationItemRouterLink primary="Tags" to="/blog/tags" />
+                </MainNavigationCollapsibleItem>
+            </MainNavigationItemGroup>
+            <MainNavigationItemGroup title="Communication">
+                <MainNavigationItemRouterLink primary="Mail Campaigns" icon={<Mail />} to="/email" />
+                <MainNavigationItemRouterLink primary="Newsletters" icon={<Mail />} to="/newsletters" />
+                <MainNavigationItemRouterLink primary="Preview" icon={<Preview />} to="/preview" />
+                <MainNavigationCollapsibleItem primary="Languages" icon={<Language />}>
+                    <MainNavigationItemRouterLink primary="English" to="/languages/en" />
+                    <MainNavigationItemRouterLink primary="German" to="/languages/de" />
+                    <MainNavigationItemRouterLink primary="French" to="/languages/fr" />
+                    <MainNavigationItemRouterLink primary="Spanish" to="/languages/es" />
+                </MainNavigationCollapsibleItem>
+            </MainNavigationItemGroup>
+            <MainNavigationItemGroup title="Structure">
+                <MainNavigationItemRouterLink primary="Links" icon={<Link />} to="/links" />
+                <MainNavigationItemRouterLink primary="Calendar" icon={<Calendar />} to="/calendar" />
+                <MainNavigationItemRouterLink primary="Archive" icon={<Archive />} to="/archive" />
+                <MainNavigationItemRouterLink primary="Accounts" icon={<Account />} to="/accounts" />
+            </MainNavigationItemGroup>
+            <MainNavigationItemGroup title="Settings">
+                <MainNavigationItemRouterLink primary="Settings" badgeContent={2} icon={<Settings />} to="/settings" />
+                <MainNavigationItemRouterLink primary="Configuration" icon={<Wrench />} to="/configuration" />
+                <MainNavigationItemRouterLink primary="Sort" icon={<Sort />} to="/sort" />
+                <MainNavigationItemAnchorLink
+                    primary="Comet Admin"
+                    secondary="View on GitHub"
+                    target="_blank"
+                    href="https://github.com/vivid-planet/comet"
+                    icon={<CometColor />}
+                />
+            </MainNavigationItemGroup>
+        </MainNavigation>
+    );
+};
+
+export const MenuWithManyItems = {
+    render: () => (
+        <MasterLayout headerComponent={Header} menuComponent={AppMenuWithManyItems}>
+            <Switch>
+                <Route path="/" exact render={() => <Content>Root</Content>} />
+                <Route path="/dashboard" render={() => <Content>Dashboard</Content>} />
+                <Route path="/pages" render={() => <Content>Pages</Content>} />
+                <Route path="/assets" render={() => <Content>Assets</Content>} />
+                <Route path="/files" render={() => <Content>Files</Content>} />
+                <Route path="/folders" render={() => <Content>Folders</Content>} />
+                <Route path="/blog/posts" render={() => <Content>Blog Posts</Content>} />
+                <Route path="/blog/categories" render={() => <Content>Blog Categories</Content>} />
+                <Route path="/blog/tags" render={() => <Content>Blog Tags</Content>} />
+                <Route path="/email" render={() => <Content>Email Campaigns</Content>} />
+                <Route path="/newsletters" render={() => <Content>Newsletters</Content>} />
+                <Route path="/preview" render={() => <Content>Preview</Content>} />
+                <Route path="/languages/en" render={() => <Content>English</Content>} />
+                <Route path="/languages/de" render={() => <Content>German</Content>} />
+                <Route path="/languages/fr" render={() => <Content>French</Content>} />
+                <Route path="/languages/es" render={() => <Content>Spanish</Content>} />
+                <Route path="/links" render={() => <Content>Links</Content>} />
+                <Route path="/calendar" render={() => <Content>Calendar</Content>} />
+                <Route path="/archive" render={() => <Content>Archive</Content>} />
+                <Route path="/accounts" render={() => <Content>Accounts</Content>} />
+                <Route path="/settings" render={() => <Content>Settings</Content>} />
+                <Route path="/configuration" render={() => <Content>Configuration</Content>} />
+                <Route path="/sort" render={() => <Content>Sort</Content>} />
+            </Switch>
+        </MasterLayout>
+    ),
+
+    parameters: { layout: "fullscreen" },
+};