feat: responsive context sidebar

ccontrols · Jun 2, 2020 · 295cdc3 · 295cdc3
1 parent 72bbc3d
commit 295cdc3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 29 deletions.
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -9,9 +9,16 @@ export interface SidebarProps {
    */
   title?: React.ReactNode;
 
-  /** The width of the side bar in pixels */
+  /**
+   * The width of the side bar in pixels
+   */
   width?: number;
 
+  /**
+   * min width for sidebar
+   */
+  minWidth?: number;
+
   /**
    * Whether the sidebar can be collapsed
    */
@@ -29,32 +36,38 @@ export interface SidebarProps {
 export const Sidebar: FC<SidebarProps & BoxProps> = ({
   title,
   width = '100%',
+  minWidth,
   children,
   ...rest
 }) => {
   const toggleContext = useContext(SidebarContext);
-  const { collapsed, responsive } = toggleContext || {};
+  const { collapsed, responsive, setCollapsed } = toggleContext || {};
   const defaultStyle: SxStyleProp = {
     overflowY: 'auto',
     overflowX: 'hidden',
     width,
+    minWidth,
     position: 'relative',
   };
   const style: SxStyleProp = !responsive
     ? defaultStyle
     : {
         ...defaultStyle,
-        position: 'absolute',
+        position: 'fixed',
         width: '100%',
         minWidth: '100%',
         zIndex: 9999,
         backgroundColor: 'background',
         top: 0,
         left: 0,
+        bottom: 0,
       };
   return collapsed ? null : (
     <Box sx={style} {...rest}>
-      <div sx={{ position: 'fixed' }}>
+      <div
+        sx={{ position: !responsive ? 'fixed' : undefined }}
+        onClick={() => responsive && setCollapsed(true)}
+      >
         <Flex
           sx={{
             pb: 1,

diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
@@ -59,32 +59,44 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
   return (
     <SidebarContextProvider>
       <SidebarContext.Consumer>
-        {({ SidebarClose, responsive }) => (
-          <AppSidebar width={380}>
-            {responsive && (
-              <Header shadow={false}>
-                <SidebarClose />
-              </Header>
+        {({ SidebarClose, SidebarToggle, collapsed, responsive }) => (
+          <div>
+            <AppSidebar width={300} minWidth={250}>
+              {responsive && (
+                <Header shadow={false}>
+                  <SidebarClose />
+                </Header>
+              )}
+              <Box
+                sx={{
+                  px: 2,
+                  borderLeft: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+                }}
+              >
+                <Flex as="nav" sx={{ flexDirection: 'column' }}>
+                  {items?.map((el, index) => (
+                    <NavLink
+                      key={`context_link_${index}`}
+                      href={el.getAttribute('href') || undefined}
+                      className={el === activeItem ? 'active' : undefined}
+                    >
+                      {el.getAttribute('data-title')}
+                    </NavLink>
+                  ))}
+                </Flex>
+              </Box>
+            </AppSidebar>
+            {collapsed && (
+              <SidebarToggle
+                sx={{
+                  position: 'fixed',
+                  right: '1rem',
+                  bottom: '2rem',
+                  backgroundColor: 'gray',
+                }}
+              />
             )}
-            <Box
-              sx={{
-                px: 2,
-                borderLeft: (t: Theme) => `1px solid ${t.colors?.shadow}`,
-              }}
-            >
-              <Flex as="nav" sx={{ flexDirection: 'column' }}>
-                {items?.map((el, index) => (
-                  <NavLink
-                    key={`context_link_${index}`}
-                    href={el.getAttribute('href') || undefined}
-                    className={el === activeItem ? 'active' : undefined}
-                  >
-                    {el.getAttribute('data-title')}
-                  </NavLink>
-                ))}
-              </Flex>
-            </Box>
-          </AppSidebar>
+          </div>
         )}
       </SidebarContext.Consumer>
     </SidebarContextProvider>

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -83,6 +83,7 @@ export const Sidebar: FC<SidebarProps> = ({ kindPath, buttonClass, title }) => {
         borderRight: (t: Theme) => `1px solid ${t.colors?.shadow}`,
       }}
       width={380}
+      minWidth={300}
     >
       {responsive && (
         <Header shadow={false}>
@@ -97,6 +98,7 @@ export const Sidebar: FC<SidebarProps> = ({ kindPath, buttonClass, title }) => {
             placeholder="filter stories..."
             value={search}
             onChange={e => setSearch(e.target.value)}
+            onClick={e => e.stopPropagation()}
           />
         </Box>
         <Navmenu