fix: sidebar full height

ccontrols · May 30, 2020 · cb2cdbe · cb2cdbe
1 parent 97bd559
commit cb2cdbe
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 26 deletions.
diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx
@@ -43,7 +43,7 @@ export const Layout: FC<LayoutProps> = ({
       />
       <SEO title={title} />
       <SidebarContextProvider>
-        <Flex sx={{ flexDirection: 'row' }}>
+        <Flex sx={{ flexDirection: 'row', alignItems: 'stretch' }}>
           <Sidebar storyId={storyId} />
           <Container>
             <Tabs>

diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
@@ -104,7 +104,7 @@ export const Sidebar: FC<SidebarProps> = ({ storyId }) => {
 
   const [search, setSearch] = useState<string | undefined>(undefined);
   return (
-    <AppSidebar sx={{ px: 1 }} width={380}>
+    <AppSidebar sx={{ px: 1, backgroundColor: 'gray' }} width={380}>
       {siteTitle}
       <Input
         placeholder="search stories..."

diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx
@@ -350,8 +350,8 @@ export const Navmenu: FC<NavMenuProps> = props => {
   };
   const { filteredItems } = state;
   return (
-    <React.Fragment>
+    <Box as="nav">
       {filteredItems && filteredItems.map(item => renderItem(item, 1))}
-    </React.Fragment>
+    </Box>
   );
 };
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { FC, Fragment, useContext } from 'react';
+import React, { FC, useContext } from 'react';
 import { jsx, Box, Flex, BoxProps, Heading } from 'theme-ui';
 import { useBreakpointIndex } from '@theme-ui/match-media';
 import { Collapsible, CollapsibleProps } from '@component-controls/components';
@@ -47,26 +47,27 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
   const isCollapsed =
     (collapsible && size <= 1 && collapsed === undefined) || collapsed === true;
   return (
-    <Fragment>
-      <Collapsible isOpen={!isCollapsed} easing="ease-in-out" {...animate}>
-        <Box sx={{ width }} {...rest}>
-          <Flex sx={{ pb: 1, flexDirection: 'row', alignItems: 'center' }}>
-            {title && (
-              <Box as="header">
-                {typeof title === 'string' ? (
-                  <Heading as="h3" sx={{ pl: 2 }}>
-                    {title}
-                  </Heading>
-                ) : (
-                  title
-                )}
-              </Box>
-            )}
-          </Flex>
+    <Collapsible isOpen={!isCollapsed} easing="ease-in-out" {...animate}>
+      <Box
+        sx={{ overflowY: 'auto', height: '100%', overflowX: 'hidden', width }}
+        {...rest}
+      >
+        <Flex sx={{ pb: 1, flexDirection: 'row', alignItems: 'center' }}>
+          {title && (
+            <Box as="header">
+              {typeof title === 'string' ? (
+                <Heading as="h3" sx={{ pl: 2 }}>
+                  {title}
+                </Heading>
+              ) : (
+                title
+              )}
+            </Box>
+          )}
+        </Flex>
 
-          {children}
-        </Box>
-      </Collapsible>
-    </Fragment>
+        {children}
+      </Box>
+    </Collapsible>
   );
 };
diff --git a/ui/components/src/Collapsible/Collapsible.tsx b/ui/components/src/Collapsible/Collapsible.tsx
@@ -20,7 +20,7 @@ export const Collapsible: FC<CollapsibleProps> = ({
   ...rest
 }) => {
   return (
-    <AnimateHeight {...rest} height={isOpen ? 'auto' : 0}>
+    <AnimateHeight height={isOpen ? 'auto' : 0} {...rest}>
       {isOpen ? children : ''}
     </AnimateHeight>
   );