- Fix alignment to the edge of sidebar menu. Everything should have c…

…orrect alignment now.
StenaIT · Sep 7, 2023 · 968747c · 968747c
1 parent 2c98325
commit 968747c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 38 deletions.
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenu.stories.tsx
@@ -65,6 +65,10 @@ export const Overview = () => {
           </SidebarMenuCollapsible>
         </SidebarMenuCollapsible>
 
+        <SidebarMenuCollapsible label={"No icon"}>
+          <SidebarMenuLink label={"Level 2"} onClick={onClick} />
+        </SidebarMenuCollapsible>
+
         <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
@@ -31,7 +31,7 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
 
   return (
     <Box
-      indent={2}
+      indent={1}
       className={cx(
         styles.sidebarMenu,
         collapsed ? styles.collapsed : null,

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButtonRow.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButtonRow.tsx
@@ -9,7 +9,12 @@ export const SidebarMenuCloseButtonRow: React.FC<
   SidebarMenuCloseButtonRowProps
 > = ({ onClick }) => {
   return (
-    <Row justifyContent={"space-between"} alignItems={"center"} flex={1}>
+    <Row
+      justifyContent={"space-between"}
+      alignItems={"center"}
+      flex={1}
+      indent={1}
+    >
       <FlatButton leftIcon={stenaTimes} onClick={onClick} variant={"danger"} />
       <StenaFlag className={styles.stenaFlag} />
     </Row>

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx
@@ -46,25 +46,25 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
       background={"var(--current-background-color)"}
       aria-expanded={expanded}
     >
-      <Box width={"100%"}>
-        <Box
-          width={"100%"}
-          borderRadius={"99rem"}
-          overflow={"hidden"}
-          justifyContent={"space-between"}
+      <Box
+        width={"100%"}
+        borderRadius={"99rem"}
+        overflow={"hidden"}
+        justifyContent={"space-between"}
+      >
+        <button
+          className={innerClassName}
+          style={innerStyle}
+          onClick={() => setExpanded(!expanded)}
         >
-          <button
-            className={innerClassName}
-            style={innerStyle}
-            onClick={() => setExpanded(!expanded)}
-          >
-            <Row justifyContent={"space-between"}>
-              <Row>
-                {leftIcon ? (
+          <Row justifyContent={"space-between"} indent={2}>
+            <Row>
+              {leftIcon && (
+                <>
                   <Box
-                    width={"var(--swui-sidebar-menu-item-height)"}
                     alignItems={"center"}
                     justifyContent={"center"}
+                    width={"16px"}
                   >
                     <Icon
                       icon={leftIcon}
@@ -73,33 +73,31 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
                       data-hover={true}
                     />
                   </Box>
-                ) : (
-                  <Indent num={1} />
-                )}
-                <Text variant={"bold"} className={styles.label}>
-                  {label}
-                </Text>
-              </Row>
-              <Row>
-                <Icon
-                  icon={expanded ? faChevronUp : faChevronDown}
-                  size={12}
-                  color={cssColor("--lhds-color-blue-600")}
-                />
-                <Indent />
-              </Row>
+                  <Indent />
+                </>
+              )}
+              <Text variant={"bold"} className={styles.label}>
+                {label}
+              </Text>
             </Row>
-          </button>
-        </Box>
+            <Row>
+              <Icon
+                icon={expanded ? faChevronUp : faChevronDown}
+                size={12}
+                color={cssColor("--lhds-color-blue-600")}
+              />
+            </Row>
+          </Row>
+        </button>
       </Box>
 
       {expanded && (
-        <Indent>
+        <>
           <Space />
           <SidebarMenuCollapsibleGroupBox indent={indent}>
             {children}
           </SidebarMenuCollapsibleGroupBox>
-        </Indent>
+        </>
       )}
     </Box>
   );

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx
@@ -9,7 +9,7 @@ export const SidebarMenuHeading: React.FC<SidebarMenuHeadingProps> = ({
   label,
 }) => {
   return (
-    <Box height={"32px"} justifyContent={"center"}>
+    <Box height={"32px"} justifyContent={"center"} indent={1}>
       <Space />
       <Text variant={"overline"} size={"smaller"}>
         {label}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx
@@ -65,7 +65,7 @@ export const SidebarMenuLink: React.FC<SidebarMenuLinkProps> = ({
 
   const innerChildren = (
     <Row spacing={1} flex={1} alignItems={"center"}>
-      {!hasContentLeft && <Indent />}
+      <Indent num={hasContentLeft ? 0.5 : 1} />
       <ButtonContent
         label={label}
         loading={loading}