fix: sidebar css issues

ccontrols · Jun 14, 2020 · fbfb1d6 · fbfb1d6
1 parent 6bb4133
commit fbfb1d6
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 79 deletions.
diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -1,6 +1,9 @@
 /** @jsx jsx */
 import React, { FC, useContext } from 'react';
 import { jsx, Box, BoxProps, Heading } from 'theme-ui';
+import { get } from '@theme-ui/css';
+import { useTheme } from '@component-controls/components';
+
 import { SidebarContext } from './SidebarContext';
 
 export interface SidebarProps {
@@ -9,16 +12,6 @@ export interface SidebarProps {
    */
   title?: React.ReactNode;
 
-  /**
-   * The width of the side bar in pixels
-   */
-  width?: number;
-
-  /**
-   * min width for sidebar
-   */
-  minWidth?: number;
-
   /**
    * Whether the sidebar can be collapsed
    */
@@ -35,51 +28,34 @@ export interface SidebarProps {
  */
 export const Sidebar: FC<SidebarProps & BoxProps> = ({
   title,
-  width = '100%',
-  minWidth,
   children,
+  variant,
   ...rest
 }) => {
   const toggleContext = useContext(SidebarContext);
   const { collapsed, responsive, setCollapsed } = toggleContext || {};
-
+  const theme = useTheme();
   return collapsed ? null : (
     <Box
       variant={responsive ? 'sidebar.responsive' : 'sidebar.default'}
-      sx={
-        responsive
-          ? undefined
-          : {
-              width,
-              minWidth,
-            }
-      }
+      sx={get(theme, variant)}
+      onClick={() => responsive && setCollapsed(true)}
       {...rest}
     >
-      <Box
-        variant={
-          responsive ? 'sidebar.innerresponsive' : 'sidebar.innerdefault'
-        }
-        sx={{
-          width: responsive ? undefined : width,
-        }}
-        onClick={() => responsive && setCollapsed(true)}
-      >
-        <Box variant={'sidebar.headercontainer'}>
-          {title && (
-            <Box as="header">
-              {typeof title === 'string' ? (
-                <Heading as="h3" variant={'sidebar.heading'}>
-                  {title}
-                </Heading>
-              ) : (
-                title
-              )}
-            </Box>
-          )}
-        </Box>
-        {children}
+      <Box variant={'sidebar.headercontainer'}>
+        {title && (
+          <Box as="header">
+            {typeof title === 'string' ? (
+              <Heading as="h3" variant={'sidebar.heading'}>
+                {title}
+              </Heading>
+            ) : (
+              title
+            )}
+          </Box>
+        )}
       </Box>
+      <Box variant="sidebar.inner">{children}</Box>
     </Box>
   );
 };
diff --git a/ui/app-components/src/typings.d.ts b/ui/app-components/src/typings.d.ts
@@ -1 +1,2 @@
 declare module '@theme-ui/match-media';
+declare module '@theme-ui/css';
diff --git a/ui/app/src/App/App.tsx b/ui/app/src/App/App.tsx
@@ -45,7 +45,7 @@ export const App: FC<AppProps> = ({ title, children }) => {
       <SEO title={title} />
       <SkipLinks items={items} />
       <Box variant="app">
-        <Header title={title}></Header>
+        <Header />
         {children}
         <Footer />
       </Box>

diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
@@ -61,7 +61,7 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
       <SidebarContext.Consumer>
         {({ SidebarClose, SidebarToggle, collapsed, responsive }) => (
           <div>
-            <AppSidebar width={300} id="contextbar">
+            <AppSidebar id="contextbar">
               {responsive && (
                 <Header sx={{ boxShadow: 'unset' }}>
                   <SidebarClose />

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -99,7 +99,7 @@ export const Sidebar: FC<SidebarProps> = ({
   }, [type, storeProvider]);
   const [search, setSearch] = useState<string | undefined>(undefined);
   return (
-    <AppSidebar variant="appsidebar.sidebar" width={300} id="sidebar">
+    <AppSidebar variant="appsidebar.sidebar" id="sidebar">
       {responsive && (
         <Header sx={{ boxShadow: 'unset' }}>
           <SidebarClose />

diff --git a/ui/app/src/SidebarsPage/SidebarsPage.tsx b/ui/app/src/SidebarsPage/SidebarsPage.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useRef, ReactNode } from 'react';
-import { jsx, Box, Flex } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import * as qs from 'qs';
 import { PageType } from '@component-controls/specification';
 import { Tabs, Tab, TabList, TabPanel } from '@component-controls/components';
@@ -49,7 +49,7 @@ export const SidebarsPage: FC<DocPageProps> = ({ pagesFn, type }) => {
     0,
   );
   return (
-    <Flex sx={{ flex: '1 0 auto' }}>
+    <Box variant="appsidebarpage.container">
       <Sidebar type={type} />
       <Box sx={{ flexGrow: 1 }} id="content">
         <Tabs
@@ -86,6 +86,6 @@ export const SidebarsPage: FC<DocPageProps> = ({ pagesFn, type }) => {
         </Tabs>
       </Box>
       <SideContext pageRef={pageRef} />
-    </Flex>
+    </Box>
   );
 };
diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /* eslint react/jsx-key: 0 */
-import { jsx, Box, BoxProps, Text, Theme } from 'theme-ui';
+import { jsx, Box, BoxProps, Text } from 'theme-ui';
 import { FC } from 'react';
 import { transparentize } from 'polished';
 import { get } from '@theme-ui/css';
@@ -39,8 +39,7 @@ export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({
       variant="tag.default"
       {...rest}
       sx={{
-        backgroundColor: (t: Theme) =>
-          transparentize(transparentAmount, t.colors?.[color] || color),
+        backgroundColor: transparentize(transparentAmount, color),
         border: `1px solid ${color}`,
         ...get(theme, variant),
       }}

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -400,36 +400,24 @@ export const theme: Theme = {
   sidebar: {
     default: {
       overflowX: 'hidden',
-      position: 'relative',
-      flexShrink: 0,
+      position: 'sticky',
+      top: 60,
+      maxHeight: '100vh',
+      overflowY: 'auto',
+      backgroundColor: 'background',
     },
     responsive: {
       overflowX: 'hidden',
-      flexShrink: 0,
-      position: 'fixed',
-      width: '100%',
-      minWidth: '100%',
-      zIndex: 9999,
       backgroundColor: 'background',
       top: 0,
       left: 0,
-      bottom: 0,
-    },
-    innerdefault: {
-      position: 'fixed',
-      height: '100vh',
-      overflowY: 'auto',
-      a: {
-        '&.active': {
-          borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
-        },
-        ':hover': {
-          backgroundColor: 'shadow',
-        },
-      },
+      right: 0,
+      height: '100%',
+      width: '100%',
+      zIndex: 9999,
+      position: 'absolute',
     },
-    innerresponsive: {
-      overflowY: 'auto',
+    inner: {
       a: {
         '&.active': {
           borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`,
@@ -494,7 +482,7 @@ export const theme: Theme = {
     toggle: {
       position: 'fixed',
       right: '1rem',
-      bottom: '2rem',
+      bottom: '3rem',
       backgroundColor: 'gray',
     },
   },
@@ -532,8 +520,7 @@ export const theme: Theme = {
   },
   appfooter: {
     container: {
-      py: 3,
-      px: '320px',
+      p: 3,
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
@@ -585,6 +572,16 @@ export const theme: Theme = {
   taglist: {
     container: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
   },
+  appsidebarpage: {
+    container: {
+      display: 'grid',
+      gridGap: '16px',
+      flex: 1,
+      minHeight: '100vh',
+      gridTemplateColumns: '300px 1fr 250px',
+      position: 'relative',
+    },
+  },
 };
 
 export const useTheme = (): Theme => {