support use of both fixed sidebar & header

azouaoui-med · May 3, 2021 · a80aed8 · a80aed8
1 parent 3ca3a50
commit a80aed8
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 311 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [1.0.2] - 2020-10-10
+## [1.0.2] - 2021-05-04
+
+- add support for using both fixed sidebar and fixed header
+
+## [1.1.0] - 2020-10-10
 
 - fix sidebar width so it doesn't shrink
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css-pro-layout",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "CSS library for building responsive and customizable page layouts",
   "main": "dist/css/css-pro-layout.css",
   "files": [
@@ -25,6 +25,7 @@
     "start:example": "live-server --port=3131 --entry-file=./examples/ --watch=./examples/basic/,./dist/",
     "start": "concurrently \" yarn start:example\" \" yarn sass:watch\"",
     "start:website": "yarn --cwd ./website start",
+    "build:website": "yarn --cwd ./website build",
     "deploy:website": "yarn --cwd ./website build && gh-pages -d website/build"
   },
   "devDependencies": {
@@ -38,7 +39,7 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.2",
     "live-server": "^1.2.1",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "postcss": "^7.0.32",
     "postcss-cli": "^7.1.1",
     "prettier": "^2.0.5",

diff --git a/src/less/css-pro-layout.less b/src/less/css-pro-layout.less
@@ -15,6 +15,22 @@
       display: block;
     }
   }
+
+  ~ .layout {
+    .header {
+      width: 100% !important;
+      transition: none;
+    }
+  }
+}
+
+.breakpoints() {
+  break-point-xs: @breakpoint-xs;
+  break-point-sm: @breakpoint-sm;
+  break-point-md: @breakpoint-md;
+  break-point-lg: @breakpoint-lg;
+  break-point-xl: @breakpoint-xl;
+  break-point-xxl: @breakpoint-xxl;
 }
 
 .break-point-rtl() {
@@ -30,16 +46,26 @@
   }
 }
 
+.setBreakPoint(@name; @value) {
+  &.@{name} {
+    @media (max-width: @value) {
+      .break-point();
+    }
+  }
+}
+
 .layout {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
   flex-grow: 1;
+
   &.has-sidebar {
     flex-direction: row;
   }
   .header {
+    transition: width, 0.3s;
     height: @header-height;
     min-height: @header-height;
     position: relative;
@@ -53,36 +79,9 @@
       min-width: @sidebar-collapsed-width;
     }
 
-    &.break-point-xs {
-      @media (max-width: @breakpoint-xs) {
-        .break-point();
-      }
-    }
-    &.break-point-sm {
-      @media (max-width: @breakpoint-sm) {
-        .break-point();
-      }
-    }
-    &.break-point-md {
-      @media (max-width: @breakpoint-md) {
-        .break-point();
-      }
-    }
-    &.break-point-lg {
-      @media (max-width: @breakpoint-lg) {
-        .break-point();
-      }
-    }
-    &.break-point-xl {
-      @media (max-width: @breakpoint-xl) {
-        .break-point();
-      }
-    }
-    &.break-point-xxl {
-      @media (max-width: @breakpoint-xxl) {
-        .break-point();
-      }
-    }
+    each(.breakpoints(), {
+      .setBreakPoint(@key, @value);
+    });
   }
   .footer {
     height: @footer-height;
@@ -105,35 +104,24 @@
 
   .sidebar-toggler {
     display: none;
-    // TODO : replace the code below with a for loop
-    &.break-point-xs {
-      @media (max-width: @breakpoint-xs) {
-        display: initial;
-      }
-    }
-    &.break-point-sm {
-      @media (max-width: @breakpoint-sm) {
-        display: initial;
-      }
-    }
-    &.break-point-md {
-      @media (max-width: @breakpoint-md) {
-        display: initial;
-      }
-    }
-    &.break-point-lg {
-      @media (max-width: @breakpoint-lg) {
-        display: initial;
-      }
-    }
-    &.break-point-xl {
-      @media (max-width: @breakpoint-xl) {
-        display: initial;
+
+    each(.breakpoints(), {
+      &.@{key} {
+        @media (max-width: @value) {
+          display: initial;
+        }
       }
-    }
-    &.break-point-xxl {
-      @media (max-width: @breakpoint-xxl) {
-        display: initial;
+    });
+  }
+
+  &.fixed-sidebar {
+    height: 100%;
+    .sidebar {
+      height: 100%;
+      overflow: auto;
+      ~ .layout {
+        height: 100%;
+        overflow: auto;
       }
     }
   }
@@ -142,59 +130,36 @@
     .header {
       position: fixed;
       width: 100%;
-      z-index: 1;
+      z-index: 2;
       ~ .layout,
       ~ .content {
         margin-top: @header-height;
       }
     }
-  }
-
-  &.fixed-sidebar {
-    height: 100%;
-    .sidebar {
-      height: 100%;
-      overflow: auto;
-      ~ .layout {
-        height: 100%;
-        overflow: auto;
+    &.fixed-sidebar {
+      .header {
+        width: calc(100% - @sidebar-width);
+      }
+      .sidebar.collapsed {
+        ~ .layout {
+          .header {
+            width: calc(100% - @sidebar-collapsed-width);
+          }
+        }
       }
     }
   }
 
   &.rtl {
     direction: rtl;
     .sidebar {
-      &.break-point-xs {
-        @media (max-width: @breakpoint-xs) {
-          .break-point-rtl();
-        }
-      }
-      &.break-point-sm {
-        @media (max-width: @breakpoint-sm) {
-          .break-point-rtl();
-        }
-      }
-      &.break-point-md {
-        @media (max-width: @breakpoint-md) {
-          .break-point-rtl();
-        }
-      }
-      &.break-point-lg {
-        @media (max-width: @breakpoint-lg) {
-          .break-point-rtl();
-        }
-      }
-      &.break-point-xl {
-        @media (max-width: @breakpoint-xl) {
-          .break-point-rtl();
-        }
-      }
-      &.break-point-xxl {
-        @media (max-width: @breakpoint-xxl) {
-          .break-point-rtl();
+      each(.breakpoints(), {
+        &.@{key} {
+          @media (max-width: @value) {
+            .break-point-rtl();
+          }
         }
-      }
+      });
     }
   }
 }