feat(layout): improve styles

Author: suvashvishowkarma

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

@@ -10,10 +10,7 @@
     1px solid var(--border-color, #e5e7eb)
   );
   --_layout-header-max-width: var(--dz-layout-header-max-width, 1920px);
-  --_layout-header-logo-max-width: var(
-    --dz-layout-header-logo-max-width,
-    150px
-  );
+  --_layout-header-logo-max-width: var(--dz-layout-header-logo-max-width, 8rem);
   --_layout-header-gap: var(--dz-layout-header-gap, 1.5rem);
 
   background: var(--_layout-header-bg);

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

@@ -4,5 +4,6 @@
 @import "./layout.css";
 @import "./logo.css";
 @import "./sidebar.css";
+@import "./sticky-collapsible-footer.css";
+@import "./toggle-menu.css";
 @import "./vars.css";
-@import "./sticky-collapsible-footer.css"

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

@@ -1,5 +1,5 @@
 .dz-layout .dz-logo {
-  --_layout-logo-max-width: var(--dz-layout-logo-max-width, 150px);
+  --_layout-logo-max-width: var(--dz-layout-logo-max-width, 8rem);
 }
 
 .dz-layout .dz-logo img {

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

@@ -9,11 +9,11 @@
   --_layout-sidebar-color: var(--dz-layout-sidebar-color, #2c2c2c);
   --_layout-sidebar-collapsed-width: var(
     --dz-layout-sidebar-collapsed-width,
-    1.2rem
+    0
   );
   --_layout-sidebar-logo-max-width: var(
     --dz-layout-sidebar-logo-max-width,
-    6.75rem
+    8rem
   );
   --_layout-sidebar-padding-h: var(--dz-layout-sidebar-padding-h, 1.5rem);
   --_layout-sidebar-padding-v: var(--dz-layout-sidebar-padding-v, 1rem);
@@ -63,8 +63,7 @@
   overflow-x: hidden;
 }
 
-.dz-layout > .dz-sidebar > :not(.dz-sidebar-header),
-.dz-layout > .dz-sidebar[data-header="false"] > :not(.dz-snavigation-menu) {
+.dz-layout > .dz-sidebar > :not(.dz-sidebar-header):not(.dz-navigation-menu) {
   border-top: 1px solid var(--_layout-sidebar-separator-color);
 }
 

packages/layout/src/assets/css/components/layout/toggle-menu.css

@@ -0,0 +1,26 @@
+.dz-layout .dz-toggle-menu {
+  --_background-color: var(--dz-secondary-color);
+
+  border-radius: 50%;
+  cursor: pointer;
+  height: 2.875rem;
+  line-height: 1;
+  padding: 0.75rem;
+  text-align: center;
+  width: 2.875rem;
+  transition: background-color var(--transition-duration) ease;
+}
+
+.dz-layout .dz-toggle-menu:hover {
+  background-color: color-mix(in srgb, var(--_background-color) 10%, white);
+}
+.dz-layout .dz-toggle-menu:focus {
+  background-color: color-mix(in srgb, var(--_background-color) 10%, white);
+}
+.dz-layout .dz-toggle-menu:active {
+  background-color: color-mix(in srgb, var(--_background-color) 20%, white);
+}
+
+.dz-layout .dz-toggle-menu > i {
+  font-size: 1.25rem;
+}

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

@@ -1,8 +1,9 @@
 :root {
-  --dz-layout-logo-max-width: 6.75rem;
+  --dz-layout-logo-max-width: 8rem;
 
   --dz-layout-sidebar-bg: white;
   --dz-layout-sidebar-border: 1px solid var(--border-color, #e5e7eb);
+  --dz-layout-sidebar-collapsed-width: 0;
   --dz-layout-sidebar-color: var(--color, #374151);
   --dz-layout-sidebar-logo-max-width: var(--dz-layout-logo-max-width);
   --dz-layout-sidebar-padding-h: 1.5rem;
@@ -24,7 +25,7 @@
   --dz-layout-header-border: 1px solid var(--border-color, #e5e7eb);
   --dz-layout-header-color: var(--color, #374151);
   --dz-layout-header-gap: 1.5rem;
-  --dz-layout-header-logo-max-width: 120px;
+  --dz-layout-header-logo-max-width: var(--dz-layout-logo-max-width);
   --dz-layout-header-max-width: 1920px;
   --dz-layout-header-padding-h: var(--dz-layout-main-padding-h, 1rem);
   --dz-layout-header-padding-v: 0.5rem;

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

@@ -14,6 +14,10 @@
   grid-area: header;
 }
 
+.dz-header-layout > header > .dz-header-container > .dz-toggle-menu {
+  margin-right: -0.75rem;
+}
+
 .dz-header-layout > main {
   grid-area: main;
   max-width: 100%;

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

@@ -10,6 +10,11 @@
   display: none;
 }
 
+.dz-sidebar-header-layout > header > .dz-header-container > .dz-toggle-menu,
+.dz-sidebar-header-layout > .dz-sidebar > .dz-sidebar-header > .dz-toggle-menu {
+  margin-right: -0.75rem;
+}
+
 .dz-sidebar-header-layout > .dz-sidebar {
   grid-area: header;
 }
@@ -43,6 +48,7 @@
 
   .dz-sidebar-header-layout > header > .dz-header-container > .dz-toggle-menu {
     display: block;
+    margin-left: -0.75rem;
   }
 
   .dz-sidebar-header-layout > .dz-sidebar {

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

@@ -6,6 +6,10 @@
   width: 100%;
 }
 
+.dz-sidebar-only-layout > header > .dz-header-container > .dz-toggle-menu {
+  margin-right: -0.75rem;
+}
+
 .dz-sidebar-only-layout > .dz-sidebar {
   grid-area: header;
 }

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

@@ -39,8 +39,8 @@ export const Header = ({
   const renderContent = () => {
     return (
       <>
-        {!noLogo && <Logo />}
         {!noToggle && <ToggleMenuMobile />}
+        {!noLogo && <Logo />}
         {title && <HeaderTitle title={title} />}
         {headerAddon && headerAddon}
         {navigationMenu && (