- Update sidebar menu design.

- This does not include update of collapsible.
StenaIT · Sep 6, 2023 · 74da771 · 74da771
1 parent df44a27
commit 74da771
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 43 deletions.
diff --git a/packages/panels/src/components/nav-bar/NavBar.stories.tsx b/packages/panels/src/components/nav-bar/NavBar.stories.tsx
@@ -37,7 +37,6 @@ import {
   faUserFriends,
 } from "@fortawesome/free-solid-svg-icons";
 import { SidebarMenuCollapsible } from "../sidebar-menu/SidebarMenuCollapsible";
-import { SidebarMenuSeparator } from "../sidebar-menu/SidebarMenuSeparator";
 import { Story } from "@storybook/react";
 import { NavBarHeading } from "./NavBarHeading";
 import { SidebarRailMenu } from "../sidebar-menu/rail/SidebarRailMenu";
@@ -64,7 +63,7 @@ export default {
 };
 
 export const Demo: Story<Pick<NavBarProps, "variant">> = ({ variant }) => {
-  const [isOpen, open, close] = useBoolean(false);
+  const [isOpen, open, close] = useBoolean(true);
   const onClick = () => {};
 
   return (
@@ -104,8 +103,6 @@ export const Demo: Story<Pick<NavBarProps, "variant">> = ({ variant }) => {
               <SidebarMenuLink indent label={"Level 2.4"} onClick={onClick} />
             </SidebarMenuCollapsible>
 
-            <SidebarMenuSeparator />
-
             <SidebarMenuHeading label={"Support"} />
             <SidebarMenuLink
               leftIcon={faBook}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css
@@ -1,13 +1,13 @@
 .sidebarMenu {
   /* Theme vars */
-  --swui-sidebar-menu-separator-color: var(--lhds-color-blue-700);
-  --swui-sidebar-menu-text-color: var(--swui-white);
-  --swui-sidebar-menu-icon-color: var(--swui-white);
-  --swui-sidebar-menu-background-color: var(--lhds-color-blue-500);
-  --swui-sidebar-menu-background-color-hover: var(--lhds-color-blue-700);
-  --swui-sidebar-menu-background-color-focus: var(--lhds-color-blue-700);
-  --swui-sidebar-menu-background-color-active: var(--lhds-color-blue-600);
-  --swui-sidebar-menu-item-selected: var(--lhds-color-blue-800);
+  --swui-sidebar-menu-separator-color: var(--swui-white);
+  --swui-sidebar-menu-text-color: var(--lhds-color-ui-900);
+  --swui-sidebar-menu-icon-color: var(--lhds-color-ui-900);
+  --swui-sidebar-menu-background-color: var(--lhds-color-ui-50);
+  --swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-100);
+  --swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-200);
+  --swui-sidebar-menu-background-color-active: var(--lhds-color-ui-200);
+  --swui-sidebar-menu-item-selected: var(--lhds-color-blue-100);
   --swui-sidebar-menu-content-padding: var(--swui-metrics-indent)
     var(--swui-metrics-indent) var(--swui-metrics-indent) 0;
 

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx
@@ -62,8 +62,6 @@ export const Overview = () => {
           <SidebarMenuLink indent label={"Level 2.4"} onClick={onClick} />
         </SidebarMenuCollapsible>
 
-        <SidebarMenuSeparator />
-
         <SidebarMenuHeading label={"Support"} />
         <SidebarMenuLink
           leftIcon={faBook}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenu.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, Column, Space } from "@stenajs-webui/core";
+import { Box, BoxProps, Column, Indent, Space } from "@stenajs-webui/core";
 import cx from "classnames";
 import * as React from "react";
 import styles from "./SidebarMenu.module.css";
@@ -8,7 +8,6 @@ import {
 } from "./SidebarMenuCloseButton";
 import { getNavbarHeight } from "../nav-bar/NavbarHeightStyleUtil";
 import { NavBarVariant } from "../nav-bar/NavBar";
-import { SidebarMenuSeparator } from "./SidebarMenuSeparator";
 
 export type SidebarMenuVariant = NavBarVariant;
 
@@ -44,19 +43,24 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
       data-collapsed={collapsed || undefined}
       {...boxProps}
     >
+      <Space num={2} />
+
       {!hideCloseButton && (
         <>
-          <SidebarMenuCloseButton onClick={onCloseClick} />
-          <SidebarMenuSeparator />
-          <Space />
+          <Indent>
+            <SidebarMenuCloseButton onClick={onCloseClick} />
+          </Indent>
+          <Space num={2} />
         </>
       )}
       <Box
         className={styles.sidebarMenuContent}
         height={"100%"}
         background={"var(--current-background-color)"}
       >
-        <Column flex={1}>{children}</Column>
+        <Column flex={1} gap={1}>
+          {children}
+        </Column>
       </Box>
     </Box>
   );

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.module.css
@@ -1,15 +1,16 @@
 .sidebarMenuCloseButton {
   /* Theme vars */
-  --swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-50);
-  --swui-sidebar-menu-close-button-background-color: var(--lhds-color-blue-500);
+  --swui-sidebar-menu-close-button-height: 32px;
+  --swui-sidebar-menu-close-button-text-color: var(--lhds-color-ui-900);
+  --swui-sidebar-menu-close-button-background-color: var(--lhds-color-ui-50);
   --swui-sidebar-menu-close-button-background-color-hover: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-100
   );
   --swui-sidebar-menu-close-button-background-color-focus: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-200
   );
   --swui-sidebar-menu-close-button-background-color-active: var(
-    --lhds-color-blue-500
+    --lhds-color-ui-200
   );
 
   /* Current */
@@ -26,7 +27,7 @@
   background-color: var(--current-background-color);
   color: var(--swui-sidebar-menu-close-button-text-color);
   cursor: pointer;
-  height: var(--swui-sidebar-menu-item-height);
+  height: var(--swui-sidebar-menu-close-button-height);
   padding: 0;
   margin: 0;
   box-sizing: border-box;
@@ -55,11 +56,13 @@
   .iconWrapper {
     justify-content: center;
     align-items: center;
-    width: var(--swui-sidebar-menu-item-height);
-    height: var(--swui-sidebar-menu-item-height);
+    width: var(--swui-sidebar-menu-close-button-height);
+    height: var(--swui-sidebar-menu-close-button-height);
   }
 
   .icon {
-    color: var(--swui-sidebar-menu-close-button-text-color);
+    path {
+      fill: var(--swui-sidebar-menu-close-button-text-color);
+    }
   }
 }
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css
@@ -1,7 +1,7 @@
 .label {
   font-size: var(--current-text-size, var(--swui-font-size-medium));
   line-height: var(--current-line-height, var(--swui-line-height-medium));
-  font-weight: var(--swui-button-font-weight);
+  font-weight: var(--swui-font-weight-text-bold);
   font-family: var(--swui-font-buttons);
   color: var(--current-text-color);
 }

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.module.css
@@ -1,5 +1,5 @@
 .sidebarMenuHeading {
-  --swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-300);
+  --swui-sidebar-menu-heading-text-color: var(--lhds-color-ui-600);
 
   /* Styling */
 

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx
@@ -20,7 +20,7 @@ export const SidebarMenuHeading: React.FC<SidebarMenuHeadingProps> = ({
   ...textProps
 }) => {
   return (
-    <Box spacing={2} indent={2}>
+    <Box indent={2} spacing={1}>
       <CollapsibleContent
         className={styles.sidebarMenuHeading}
         contentLeft={contentLeft}
@@ -29,6 +29,7 @@ export const SidebarMenuHeading: React.FC<SidebarMenuHeadingProps> = ({
         <Text
           variant={"overline"}
           color={"var(--swui-sidebar-menu-heading-text-color)"}
+          size={"small"}
           {...textProps}
         >
           {label}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx
@@ -1,4 +1,4 @@
-import { ButtonElementProps, Indent, Row } from "@stenajs-webui/core";
+import { Box, ButtonElementProps, Indent, Row } from "@stenajs-webui/core";
 import * as React from "react";
 import { CSSProperties, ReactNode } from "react";
 import { ButtonContent, ButtonContentProps } from "@stenajs-webui/elements";
@@ -86,14 +86,16 @@ export const SidebarMenuLink: React.FC<SidebarMenuLinkProps> = ({
   );
 
   return (
-    <>
-      {renderLink({
-        ...buttonProps,
-        activeClassName: contentStyles.selected,
-        className: innerClassName,
-        children: innerChildren,
-        style: innerStyle,
-      })}
-    </>
+    <Box indent={1} width={"100%"}>
+      <Box width={"100%"} borderRadius={"99rem"} overflow={"hidden"}>
+        {renderLink({
+          ...buttonProps,
+          activeClassName: contentStyles.selected,
+          className: innerClassName,
+          children: innerChildren,
+          style: innerStyle,
+        })}
+      </Box>
+    </Box>
   );
 };
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuSeparator.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuSeparator.tsx
@@ -8,7 +8,7 @@ export const SidebarMenuSeparator: React.FC<SidebarMenuSeparatorProps> = (
   separatorLineProps
 ) => (
   <SeparatorLine
-    color={cssColor("--lhds-color-blue-600")}
+    color={cssColor("--lhds-color-ui-400")}
     {...separatorLineProps}
   />
 );