Merge pull request #129 from supabase/fix/menu-bar-styling

fix: menu styling, background color, added new left bar active border…

Author: MildTomato

src/components/Menu/Menu.module.css

@@ -12,7 +12,20 @@
 
 .sbui-menu__item--active {
   @apply bg-gray-100;
-  @apply dark:bg-dark-800;
+  @apply dark:bg-dark-900;
+
+  @apply text-gray-900;
+  @apply dark:text-white;
+}
+
+.sbui-menu__item--active .sbui-menu__content {
+  @apply text-gray-900;
+  @apply dark:text-white;
+}
+
+.sbui-menu__item--active--bar {
+  @apply border-l-4 border-brand-500;
+  border-left-style: solid;
 }
 
 .sbui-menu__item--rounded {

src/components/Menu/Menu.stories.tsx

@@ -46,6 +46,42 @@ export const withRounded = (args: any) => (
   </Menu>
 )
 
+export const withGroupTitles = () => (
+  <Menu>
+    <Menu.Group title="First group" />
+    <Menu.Item rounded icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+    <Menu.Item rounded icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+    <Menu.Item rounded icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+    <Menu.Group title="Second group" />
+    <Menu.Item rounded icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+    <Menu.Item rounded icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+  </Menu>
+)
+
+export const withActiveBar = () => (
+  <Menu>
+    <Menu.Group title="First group" />
+    <Menu.Item icon={<IconMail />}>Account settings</Menu.Item>
+    <Menu.Item active showActiveBar icon={<IconMail />}>
+      Account settings
+    </Menu.Item>
+    <Menu.Item icon={<IconMail />}>Account settings</Menu.Item>
+    <Menu.Group title="Second group" />
+    <Menu.Item icon={<IconMail />}>Account settings</Menu.Item>
+    <Menu.Item icon={<IconMail />}>Account settings</Menu.Item>
+  </Menu>
+)
+
 Default.args = {
   title: 'I am a title',
   titleExtra: <Typography.Link>Learn more</Typography.Link>,

src/components/Menu/Menu.tsx

@@ -21,6 +21,7 @@ interface ItemProps {
   rounded?: boolean
   onClick?: any
   doNotCloseOverlay?: boolean
+  showActiveBar?: boolean
 }
 
 export function Item({
@@ -30,9 +31,12 @@ export function Item({
   rounded,
   onClick,
   doNotCloseOverlay = false,
+  showActiveBar = false,
 }: ItemProps) {
   let classes = [MenuStyles['sbui-menu__item']]
   if (active) classes.push(MenuStyles['sbui-menu__item--active'])
+  if (active && showActiveBar)
+    classes.push(MenuStyles['sbui-menu__item--active--bar'])
   if (rounded) classes.push(MenuStyles['sbui-menu__item--rounded'])
 
   const itemOnClick = onClick
@@ -69,7 +73,7 @@ export function Item({
 }
 
 interface GroupProps {
-  children: React.ReactNode
+  children?: React.ReactNode
   icon?: React.ReactNode
   title: string
 }