- Move styling to CSS module, instead of locally in SidebarMenuCollap…

…sible component.
StenaIT · Sep 7, 2023 · bebe119 · bebe119
1 parent 968747c
commit bebe119
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 12 deletions.
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx
@@ -31,16 +31,6 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
 }) => {
   const [expanded, setExpanded] = useState<boolean>(initialExpand);
 
-  const innerClassName = cx(
-    contentStyles.button,
-    expanded ? contentStyles.selected : undefined,
-    className
-  );
-
-  const innerStyle = {
-    height: "var(--swui-sidebar-menu-item-height)",
-  };
-
   return (
     <Box
       background={"var(--current-background-color)"}
@@ -53,8 +43,11 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
         justifyContent={"space-between"}
       >
         <button
-          className={innerClassName}
-          style={innerStyle}
+          className={cx(
+            contentStyles.button,
+            expanded ? contentStyles.selected : undefined,
+            className
+          )}
           onClick={() => setExpanded(!expanded)}
         >
           <Row justifyContent={"space-between"} indent={2}>

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css
@@ -24,6 +24,7 @@
   border: 0;
   padding: 0;
   background: var(--current-background-color);
+  height: var(--swui-sidebar-menu-item-height);
 
   [data-collapsed] [aria-expanded="true"] &,
   &:hover {