Nav bar and sidebar menu redesign

packages/elements/src/index.ts

@@ -1,3 +1,6 @@
+import { ReactComponent as StenaFlagSvg } from "./icons/StenaFlag.svg";
+
+export const StenaFlag = StenaFlagSvg;
 export * from "./icons/ui/IconsUi";
 export * from "./icons/misc/IconsMisc";
 export * from "./components/ui/banners/banner/Banner";

packages/modal/src/components/drawer/Drawer.module.css

@@ -10,6 +10,10 @@
     position: absolute;
     transition: transform var(--swui-animation-time-medium) ease-in-out;
 
+    &:focus-visible {
+      outline: unset;
+    }
+
     &.slideFromLeft,
     &.slideFromRight {
       transform: translateX(var(--translate-x-outside-screen, 0));

packages/panels/src/components/nav-bar/NavBar.module.css

@@ -1,6 +1,6 @@
 .navBar {
   /* Theme vars */
-  --swui-navbar-background-color: var(--lhds-color-blue-500);
+  --swui-navbar-background-color: var(--lhds-color-ui-50);
   --swui-navbar-item-background-color-hover: var(--lhds-color-blue-700);
   --swui-navbar-item-background-color-selected: var(--lhds-color-blue-600);
   --swui-navbar-item-background-color-selected-hover: var(

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";
@@ -93,19 +92,12 @@ export const Demo: Story<Pick<NavBarProps, "variant">> = ({ variant }) => {
               label={"Selected"}
             />
             <SidebarMenuCollapsible label={"Level 1.2"} leftIcon={faChartBar}>
-              <SidebarMenuLink indent label={"Level 2.1"} onClick={onClick} />
-              <SidebarMenuLink indent label={"Level 2.2"} onClick={onClick} />
-              <SidebarMenuLink
-                indent
-                label={"Level 2.3"}
-                onClick={onClick}
-                selected
-              />
-              <SidebarMenuLink indent label={"Level 2.4"} onClick={onClick} />
+              <SidebarMenuLink label={"Level 2.1"} onClick={onClick} />
+              <SidebarMenuLink label={"Level 2.2"} onClick={onClick} />
+              <SidebarMenuLink label={"Level 2.3"} onClick={onClick} selected />
+              <SidebarMenuLink label={"Level 2.4"} onClick={onClick} />
             </SidebarMenuCollapsible>
 
-            <SidebarMenuSeparator />
-
             <SidebarMenuHeading label={"Support"} />
             <SidebarMenuLink
               leftIcon={faBook}
@@ -117,17 +109,6 @@ export const Demo: Story<Pick<NavBarProps, "variant">> = ({ variant }) => {
               label={"Contact"}
               onClick={() => alert("Click on contact")}
             />
-
-            <Box>
-              <Box spacing={8}>
-                <Icon
-                  icon={faPaperPlane}
-                  color={"var(--swui-white)"}
-                  size={50}
-                  data-hover={true}
-                />
-              </Box>
-            </Box>
           </SidebarMenu>
         </Column>
       </Drawer>

packages/panels/src/components/nav-bar/NavBarButton.module.css

@@ -1,19 +1,19 @@
 .navBarButton {
   /* Theme vars */
-  --swui-nav-bar-button-text-color: var(--lhds-color-ui-50);
+  --swui-nav-bar-button-text-color: var(--lhds-color-blue-600);
   --swui-nav-bar-button-background-color: transparent;
-  --swui-nav-bar-button-background-color-hover: var(--lhds-color-blue-900);
-  --swui-nav-bar-button-background-color-focus: var(--lhds-color-blue-700);
-  --swui-nav-bar-button-background-color-active: var(--lhds-color-blue-800);
-  --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-600);
+  --swui-nav-bar-button-background-color-hover: var(--lhds-color-ui-100);
+  --swui-nav-bar-button-background-color-focus: var(--lhds-color-ui-200);
+  --swui-nav-bar-button-background-color-active: var(--lhds-color-ui-200);
+  --swui-nav-bar-button-background-color-selected: var(--lhds-color-blue-200);
   --swui-nav-bar-button-background-color-selected-hover: var(
-    --lhds-color-blue-700
+    --lhds-color-blue-100
   );
   --swui-nav-bar-button-background-color-selected-focus: var(
-    --lhds-color-blue-700
+    --lhds-color-blue-300
   );
   --swui-nav-bar-button-background-color-selected-active: var(
-    --lhds-color-blue-800
+    --lhds-color-blue-200
   );
 
   /* Flatbutton overrrides */

packages/panels/src/components/nav-bar/NavBarPopoverButton.tsx

@@ -20,7 +20,7 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
   children,
   ...navBarButtonProps
 }) => {
-  const [isOpen, open, close] = useBoolean(false);
+  const [isOpen, , close, toggle] = useBoolean(false);
 
   return (
     <Popover
@@ -34,7 +34,7 @@ export const NavBarPopoverButton: React.FC<NavBarPopoverButtonProps> = ({
         </>
       }
     >
-      <NavBarButton {...navBarButtonProps} onClick={open} />
+      <NavBarButton {...navBarButtonProps} onClick={toggle} />
     </Popover>
   );
 };

packages/panels/src/components/nav-bar/NavBarSearchField.module.css

@@ -11,7 +11,7 @@
   --swui-textinput-animation-time: var(--swui-animation-time-fast);
 
   --swui-textinput-placeholder-color: var(--lhds-color-ui-500);
-  --swui-textinput-bg-color: var(--lhds-color-blue-600);
+  --swui-textinput-bg-color: var(--lhds-color-blue-50);
   --swui-textinput-border-color: transparent;
   --swui-textinput-border-color-hover: transparent;
 

packages/panels/src/components/nav-bar/NavBarSideMenuButton.module.css

@@ -1,15 +1,15 @@
 .sidebarMenuButton {
   /* Theme vars */
-  --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-ui-50);
-  --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-blue-500);
+  --swui-nav-bar-side-menu-button-text-color: var(--lhds-color-blue-600);
+  --swui-nav-bar-side-menu-button-background-color: var(--lhds-color-ui-50);
   --swui-nav-bar-side-menu-button-background-color-hover: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-100
   );
   --swui-nav-bar-side-menu-button-background-color-focus: var(
-    --lhds-color-blue-600
+    --lhds-color-ui-200
   );
   --swui-nav-bar-side-menu-button-background-color-active: var(
-    --lhds-color-blue-700
+    --lhds-color-ui-200
   );
 
   /* State vars */
@@ -53,6 +53,8 @@
   }
 
   .icon {
-    color: var(--swui-nav-bar-side-menu-button-text-color);
+    path {
+      fill: var(--swui-nav-bar-side-menu-button-text-color);
+    }
   }
 }

packages/panels/src/components/nav-bar/NavBarUserButton.module.css

@@ -1,12 +1,10 @@
 .navBarUserButton {
   /* Theme vars */
-  --swui-nav-bar-user-button-text-color: var(--lhds-color-ui-50);
-  --swui-nav-bar-user-button-background-color: var(--lhds-color-blue-700);
-  --swui-nav-bar-user-button-background-color-hover: var(--lhds-color-blue-900);
-  --swui-nav-bar-user-button-background-color-focus: var(--lhds-color-blue-700);
-  --swui-nav-bar-user-button-background-color-active: var(
-    --lhds-color-blue-800
-  );
+  --swui-nav-bar-user-button-text-color: var(--lhds-color-blue-600);
+  --swui-nav-bar-user-button-background-color: var(--lhds-color-ui-50);
+  --swui-nav-bar-user-button-background-color-hover: var(--lhds-color-ui-100);
+  --swui-nav-bar-user-button-background-color-focus: var(--lhds-color-ui-100);
+  --swui-nav-bar-user-button-background-color-active: var(--lhds-color-ui-200);
 
   /* FlatButton overrides */
   --swui-flat-button-text-color: var(--swui-nav-bar-user-button-text-color);

packages/panels/src/components/nav-bar/NavbarHeightStyleUtil.ts

@@ -1,8 +1,8 @@
 import { NavBarVariant } from "./NavBar";
 
 const variantToHeight: Record<NavBarVariant, number> = {
-  compact: 40,
-  standard: 48,
+  compact: 32,
+  standard: 40,
   relaxed: 64,
 };
 

packages/panels/src/components/sidebar-menu/SidebarMenu.module.css

@@ -1,15 +1,16 @@
 .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-content-padding: var(--swui-metrics-indent)
-    var(--swui-metrics-indent) var(--swui-metrics-indent) 0;
+  --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: transparent;
+  --swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-400);
+  --swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-400);
+  --swui-sidebar-menu-background-color-active: var(--lhds-color-ui-300);
+  --swui-sidebar-menu-background-selected: var(--lhds-color-blue-100);
+  --swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);
+  --swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);
+  --swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);
 
   /* State vars */
   --current-separator-color: var(--swui-sidebar-menu-separator-color);
@@ -25,8 +26,16 @@
   --current-background-color-active: var(
     --swui-sidebar-menu-background-color-active
   );
-  --current-item-selected: var(--swui-sidebar-menu-item-selected);
-  --current-content-padding: var(--swui-sidebar-menu-content-padding);
+  --current-background-selected: var(--swui-sidebar-menu-background-selected);
+  --current-background-selected-hover: var(
+    --swui-sidebar-menu-background-selected-hover
+  );
+  --current-background-selected-focus: var(
+    --swui-sidebar-menu-background-selected-focus
+  );
+  --current-background-selected-active: var(
+    --swui-sidebar-menu-background-selected-active
+  );
 
   /* Styling */
 

packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx

@@ -51,18 +51,23 @@ export const Overview = () => {
           label={"Selected"}
         />
         <SidebarMenuCollapsible label={"Level 1.2"} leftIcon={faChartBar}>
-          <SidebarMenuLink indent label={"Level 2.1"} onClick={onClick} />
-          <SidebarMenuLink indent label={"Level 2.2"} onClick={onClick} />
-          <SidebarMenuLink
-            indent
-            label={"Level 2.3"}
-            onClick={onClick}
-            selected
-          />
-          <SidebarMenuLink indent label={"Level 2.4"} onClick={onClick} />
+          <SidebarMenuLink label={"Level 2.1"} onClick={onClick} />
+          <SidebarMenuLink label={"Level 2.2"} onClick={onClick} />
+          <SidebarMenuLink label={"Level 2.3"} onClick={onClick} selected />
+          <SidebarMenuLink label={"Level 2.4"} onClick={onClick} />
+          <SidebarMenuCollapsible label={"Level 2.5"} leftIcon={faChartBar}>
+            <SidebarMenuLink label={"Level 3.1"} onClick={onClick} />
+            <SidebarMenuLink label={"Level 3.2"} onClick={onClick} />
+            <SidebarMenuCollapsible label={"Level 3.3"} leftIcon={faChartBar}>
+              <SidebarMenuLink label={"Level 4.1"} onClick={onClick} />
+              <SidebarMenuLink label={"Level 4.2"} onClick={onClick} />
+            </SidebarMenuCollapsible>
+          </SidebarMenuCollapsible>
         </SidebarMenuCollapsible>
 
-        <SidebarMenuSeparator />
+        <SidebarMenuCollapsible label={"No icon"}>
+          <SidebarMenuLink label={"Level 2"} onClick={onClick} />
+        </SidebarMenuCollapsible>
 
         <SidebarMenuHeading label={"Support"} />
         <SidebarMenuLink
@@ -103,10 +108,10 @@ export const WithoutIcons = () => {
           label={"Customers"}
         />
         <SidebarMenuCollapsible label={"Statistics"}>
-          <SidebarMenuLink indent label={"Total"} onClick={onClick} />
-          <SidebarMenuLink indent label={"Sales region"} onClick={onClick} />
-          <SidebarMenuLink indent label={"Routes"} onClick={onClick} selected />
-          <SidebarMenuLink indent label={"Sellers"} onClick={onClick} />
+          <SidebarMenuLink label={"Total"} onClick={onClick} />
+          <SidebarMenuLink label={"Sales region"} onClick={onClick} />
+          <SidebarMenuLink label={"Routes"} onClick={onClick} selected />
+          <SidebarMenuLink label={"Sellers"} onClick={onClick} />
         </SidebarMenuCollapsible>
 
         <SidebarMenuSeparator />

packages/panels/src/components/sidebar-menu/SidebarMenu.tsx

@@ -3,17 +3,16 @@ import cx from "classnames";
 import * as React from "react";
 import styles from "./SidebarMenu.module.css";
 import {
-  SidebarMenuCloseButton,
-  SidebarMenuCloseButtonProps,
-} from "./SidebarMenuCloseButton";
+  SidebarMenuCloseButtonRow,
+  SidebarMenuCloseButtonRowProps,
+} from "./SidebarMenuCloseButtonRow";
 import { getNavbarHeight } from "../nav-bar/NavbarHeightStyleUtil";
 import { NavBarVariant } from "../nav-bar/NavBar";
-import { SidebarMenuSeparator } from "./SidebarMenuSeparator";
 
 export type SidebarMenuVariant = NavBarVariant;
 
 export interface SidebarMenuProps extends BoxProps {
-  onCloseClick?: SidebarMenuCloseButtonProps["onClick"];
+  onCloseClick?: SidebarMenuCloseButtonRowProps["onClick"];
   hideCloseButton?: boolean;
   collapsed?: boolean;
   variant?: SidebarMenuVariant;
@@ -32,6 +31,7 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
 
   return (
     <Box
+      indent={1}
       className={cx(
         styles.sidebarMenu,
         collapsed ? styles.collapsed : null,
@@ -44,19 +44,22 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
       data-collapsed={collapsed || undefined}
       {...boxProps}
     >
+      <Space num={1.5} />
+
       {!hideCloseButton && (
         <>
-          <SidebarMenuCloseButton onClick={onCloseClick} />
-          <SidebarMenuSeparator />
-          <Space />
+          <SidebarMenuCloseButtonRow onClick={onCloseClick} />
+          <Space num={1.5} />
         </>
       )}
       <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>
   );