feat(layout): update layout classes and styles

Author: suvashvishowkarma

packages/layout/src/assets/css/components/layout/sidebar.css

@@ -98,13 +98,13 @@
 
   .dz-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
     cursor: pointer;
-    display: flex;
+    display: none;
     padding: 0.4rem;
     transition: all ease-in var(--_layout-sidebar-transition-duration);
   }
 
-  .dz-layout > .dz-sidebar.fixed > .dz-sidebar-header > .dz-toggle-menu {
-    display: none;
+  .dz-layout > .dz-sidebar.collapsible > .dz-sidebar-header > .dz-toggle-menu {
+    display: flex;
   }
 
   .dz-layout[aria-expanded="false"]

packages/layout/src/assets/css/layouts/sidebar-header-layout.css

@@ -46,7 +46,10 @@
     grid-area: header;
   }
 
-  .dz-sidebar-header-layout > header > .dz-header-container > .dz-toggle-menu {
+  .dz-sidebar-header-layout.collapsible
+    > header
+    > .dz-header-container
+    > .dz-toggle-menu {
     display: block;
     margin-left: -0.75rem;
   }

packages/layout/src/assets/css/layouts/sidebar-only-layout.css

@@ -36,6 +36,13 @@
     grid-area: sidebar;
   }
 
+  .dz-sidebar-only-layout > .dz-sidebar {
+    --_layout-sidebar-collapsed-width: var(
+      --dz-layout-sidebar-collapsed-width,
+      1.5rem
+    );
+  }
+
   .dz-sidebar-only-layout > main {
     overflow-y: auto;
   }

packages/layout/src/components/Layout/Layout.tsx

@@ -5,24 +5,36 @@ import { LayoutProvider, useLayoutContext } from "../../context/LayoutProvider";
 type LayoutProperties = {
   children?: React.ReactNode;
   className?: string;
+  collapsible?: boolean;
   fixed?: boolean;
   userMenuLocation?: "sidebar" | "header";
 };
 
 const LayoutComponent = ({
   children,
   className,
+  collapsible = false,
   fixed,
   userMenuLocation,
 }: LayoutProperties) => {
   const { menuDesktopOpen, menuMobileOpen } = useLayoutContext();
   const isLargeScreen = useMediaQuery("(min-width: 576px)");
 
+  let classNames = "dz-layout";
+  if (className) {
+    classNames += ` ${className}`;
+  }
+  if (fixed) {
+    classNames += " fixed";
+  }
+  if (collapsible) {
+    classNames += " collapsible";
+  }
+  classNames = classNames.trimEnd();
+
   return (
     <div
-      className={`dz-layout ${className || ""} ${
-        fixed ? "fixed" : ""
-      }`.trimEnd()}
+      className={classNames}
       aria-expanded={isLargeScreen ? menuDesktopOpen : menuMobileOpen}
       data-user-menu-location={userMenuLocation}
     >
@@ -34,13 +46,15 @@ const LayoutComponent = ({
 export const Layout = ({
   children,
   className,
+  collapsible = false,
   fixed,
   userMenuLocation,
 }: LayoutProperties) => {
   return (
     <LayoutProvider>
       <LayoutComponent
         className={className}
+        collapsible={collapsible}
         fixed={fixed}
         userMenuLocation={userMenuLocation}
       >

packages/layout/src/components/Layout/Sidebar/Sidebar.tsx

@@ -56,7 +56,7 @@ export const Sidebar = ({
   };
 
   return (
-    <div className={`dz-sidebar ${!collapsible ? "fixed" : ""}`.trim()}>
+    <div className={`dz-sidebar ${collapsible ? "collapsible" : ""}`.trim()}>
       {children || renderContent()}
     </div>
   );

packages/layout/src/layouts/SidebarHeaderLayout.tsx

@@ -16,10 +16,6 @@ export interface SidebarHeaderLayoutProperties {
   headerAddon?: React.ReactNode;
   navigationMenu?: NavMenuType;
   noLocaleSwitcher?: boolean;
-  noLogo?: boolean;
-  noSidebarHeader?: boolean;
-  noSidebarFooter?: boolean;
-  noToggle?: boolean;
   title?: string | React.ReactNode;
   userMenu?: NavMenuItemType;
   userMenuMode?: NavGroupDisplayMode;
@@ -30,17 +26,13 @@ export interface SidebarHeaderLayoutProperties {
 export const SidebarHeaderLayout = ({
   children,
   className,
-  collapsible,
+  collapsible = true,
   customHeader,
   customSidebar,
   displayNavIcons = true,
   headerAddon,
   navigationMenu,
   noLocaleSwitcher = false,
-  noLogo = false,
-  noSidebarHeader,
-  noSidebarFooter = false,
-  noToggle = false,
   title,
   userMenu,
   userMenuMode,
@@ -50,16 +42,15 @@ export const SidebarHeaderLayout = ({
   return (
     <Layout
       className={`dz-sidebar-header-layout ${className || ""}`.trimEnd()}
+      collapsible={collapsible}
       userMenuLocation={userMenuLocation}
     >
       {customHeader || (
         <Header
           displayNavIcons={displayNavIcons}
           headerAddon={headerAddon}
           menu={userMenu}
-          noLogo={noLogo}
           noLocaleSwitcher={noLocaleSwitcher}
-          noToggle={noToggle}
           title={title}
         />
       )}
@@ -68,8 +59,6 @@ export const SidebarHeaderLayout = ({
           collapsible={collapsible}
           displayNavIcons={displayNavIcons}
           navigationMenu={navigationMenu}
-          noHeader={noSidebarHeader}
-          noFooter={noSidebarFooter}
           noLocaleSwitcher={noLocaleSwitcher}
           userMenu={userMenu}
           userMenuMode={userMenuMode}