fix: sidebar styling

ccontrols · Dec 23, 2020 · 9750307 · 9750307
1 parent c34c592
commit 9750307
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/examples/stories/src/tutorial/getting-started/ui-customization.mdx b/examples/stories/src/tutorial/getting-started/ui-customization.mdx
@@ -371,8 +371,8 @@ The sidebar items are also [ActionBar](/api/components-actionbar--overview) and
   if (!title) {
     actions.push({ id: 'title', hidden: true })
   }
-  if (!filter) {
-    actions.push({ id: 'filter', hidden: true })
+  if (filter) {
+    actions.push({ id: 'filter', hidden: false })
   }
   return (
       <Fragment>
@@ -389,7 +389,7 @@ The sidebar items are also [ActionBar](/api/components-actionbar--overview) and
           </svg>
         </Box>  
       ),
-    },${!title ? `\n    { id: 'title', hidden: true },` : ''}${!filter ? `\n    { id: 'filter', hidden: true },` : ''}
+    },${!title ? `\n    { id: 'title', hidden: true },` : ''}${filter ? `\n    { id: 'filter', hidden: false },` : ''}
   ]
 }`}
           </Source>

diff --git a/ui/app/src/Sidebar/Sidebar.tsx b/ui/app/src/Sidebar/Sidebar.tsx
@@ -204,7 +204,7 @@ export const Sidebar: FC<SidebarProps> = ({
         return acc;
       }, menuItems);
     }
-    const actions: ActionItems = [...sidebar];
+    const actions: ActionItems = [];
     if (propsTitle || label) {
       actions.push({
         node: (
@@ -231,7 +231,9 @@ export const Sidebar: FC<SidebarProps> = ({
         </Box>
       ),
       id: 'filter',
+      hidden: true,
     });
+    actions.push(...sidebar);
     return (
       <AppSidebar variant="appsidebar.sidebar" id="sidebar">
         {responsive && (

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -35,13 +35,13 @@ export const ActionBar: FC<ActionBarProps> = ({
         return (
           <Box
             key={`${typeof node === 'string' ? node : 'item'}_${index}`}
-            variant={`${themeKey}.item`}
             sx={{
               mr: index === 0 ? 1 : 0,
               ml: nextGroup !== group || group === undefined ? 2 : 1,
               display: 'flex',
               flexDirection: 'row',
               alignItems: 'center',
+              variant: `${themeKey}.item`,
             }}
           >
             {typeof node === 'string' ? (

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -888,7 +888,7 @@ export const theme: ControlsTheme = {
     default: {
       overflowX: 'hidden',
       position: 'sticky',
-      top: '5rem',
+      top: '4.5rem',
       maxWidth: '300px',
       overflowY: 'auto',
       backgroundColor: 'background',
@@ -962,6 +962,9 @@ export const theme: ControlsTheme = {
       fontSize: 1,
       color: 'mutedText',
       fontWeight: 'body',
+      ':hover': {
+        textDecoration: 'underline',
+      },
     },
     toggle: {
       position: 'fixed',
@@ -975,6 +978,9 @@ export const theme: ControlsTheme = {
       display: 'flex',
       flexDirection: 'column',
     },
+    item: {
+      ml: 0,
+    },
     items: {
       my: 2,
     },
@@ -986,6 +992,7 @@ export const theme: ControlsTheme = {
       display: 'flex',
       flexDirection: 'column',
       px: 2,
+      mb: 2,
     },
   },
   appheader: {