fix: sidebar scroll navigation

ccontrols · Jun 3, 2020 · 1c08913 · 1c08913
1 parent 3a55929
commit 1c08913
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx
@@ -292,8 +292,9 @@ export const Navmenu: FC<NavMenuProps> = ({
             textDecoration: 'none',
             cursor: 'pointer',
           }}
-          onClick={() => {
+          onClick={(e: any) => {
             if (items) {
+              e.stopPropagation();
               onMenuChange(item, isExpanded);
             } else if (typeof onSelect === 'function') {
               onSelect(item);

diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -65,7 +65,11 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
   return collapsed ? null : (
     <Box sx={style} {...rest}>
       <div
-        sx={{ position: !responsive ? 'fixed' : undefined }}
+        sx={{
+          position: !responsive ? 'fixed' : undefined,
+          height: '100%',
+          overflowY: 'auto',
+        }}
         onClick={() => responsive && setCollapsed(true)}
       >
         <Flex

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -69,7 +69,16 @@ export const Sidebar: FC<SidebarProps> = ({ docPath, buttonClass, title }) => {
 
       const docs: string[] = Object.keys(storeProvider.getDocs() || []);
       const sortedDocs =
-        options && options.storySort ? docs.sort(options.storySort) : docs;
+        options && options.storySort
+          ? docs.sort((a: string, b: string) => {
+              //@ts-ignore
+              const sort = options.storySort(a, b);
+              if (sort !== 0) {
+                return sort;
+              }
+              return docs.indexOf(a) - docs.indexOf(b);
+            })
+          : docs;
       const menuItems = sortedDocs.reduce((acc: MenuItems, doc: string) => {
         const levels = doc.split('/');
         createMenuItem(levels, levels, acc);