Refactor sidebar CSS

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/scripts/sections/sidebar.js

@@ -6,19 +6,19 @@ function toggleSidebar () {
   if (sidebar == null) {
     return
   }
-  if (sidebar.classList.contains('hide')) {
+  if (sidebar.classList.contains('expanded')) {
-    sidebar.classList.remove('hide')
+    sidebar.classList.remove('expanded')
   } else {
     // if toc-section is open, then close it first
     const toc = document.getElementById('toc-section')
     if (toc != null && toc.classList.contains('hide')) {
       toc.classList.remove('hide')
     }
-    // add "hide" class
+    // add "expanded" class
-    sidebar.classList.add('hide')
+    sidebar.classList.add('expanded')
     // if it is mobile device. then scroll to top.
     const { isMobile } = getDeviceState()
-    if (isMobile && sidebar.classList.contains('hide')) {
+    if (isMobile && sidebar.classList.contains('expanded')) {
       document.body.scrollTop = 0
       document.documentElement.scrollTop = 0
       if (document.getElementById('hero-area') != null) {

assets/styles/application.template.scss

@@ -42,6 +42,7 @@
 // components
 @import './components/cards';
 @import './components/buttons';
+@import './components/links';
 
 
 // override

assets/styles/components/links.scss

@@ -0,0 +1,15 @@
+.list-link {
+    text-decoration: none;
+    color: #131313;
+    transition: all 0.3s ease-out;
+    &.active {
+      display: inline;
+      color: #2098d1;
+    }
+  
+    &:hover {
+      margin-left: 3px;
+      color: #2098d1;
+      transition: all 0.3s ease-out;
+    }
+  }

assets/styles/layouts/main.scss

@@ -62,6 +62,9 @@ a {
 a:hover {
   color: #207089;
 }
+a.focused {
+  color: #2098d1 !important;
+}
 
 
 

assets/styles/navigators/sidebar.scss

@@ -4,7 +4,7 @@
   max-width: 20%;
   /* background-color: lightsalmon; */
   transition: all ease-out 0.5s;
-  
+
   .sidebar-holder {
     top: 2.5rem;
     position: sticky;
@@ -13,151 +13,123 @@
     overflow: auto;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: all ease-out 0.3s;
+
+    .sidebar {
+      background: #f9fafc;
+      height: 100vh;
+      transition: all ease-out 0.3s;
+
+      #search-box {
+        margin-left: 5%;
+        margin-right: 5%;
+        width: -webkit-fill-available;
+        height: 35px;
+        padding-left: 15px;
+        margin-top: 30px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        background-color: #e5e9f2;
+        transition: all 0.3s ease-out;
+        border: 1px solid #c0ccda;
+
+        &:focus {
+          border: 1pt solid #248aaa;
+          outline: none;
+        }
+      }
+
+      #list-heading {
+        padding-left: 0px !important;
+      }
+
+      .sidebar-tree {
+        padding-left: 1rem;
+        position: relative;
+        width: -moz-max-content;
+        width: max-content;
+
+        .tree {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+
+          li {
+            margin: 0;
+            padding: 0 1em;
+            line-height: 2em;
+            color: #3c4858;
+            position: relative;
+
+            i {
+              color: #3c4858;
+              font-size: 12px;
+              margin-right: 5px;
+            }
+          }
+          .shift-right {
+            margin-left: 5px;
+          }
+
+          .subtree {
+            padding-left: 0.7rem;
+
+            &:before {
+              content: '';
+              display: block;
+              width: 0;
+              position: absolute;
+              top: 2.5rem;
+              left: 1.5rem;
+              bottom: 0.9rem;
+              border-left: 1px solid;
+            }
+            li {
+              &:before {
+                content: '';
+                display: block;
+                width: 20px;
+                height: 0;
+                border-top: 1px solid;
+                margin-top: -1px;
+                position: absolute;
+                top: 18px;
+                left: -3px;
+              }
+              &:last-child:before {
+                background: #f9fafc;
+                height: auto;
+                top: 1.1rem;
+                bottom: 0;
+              }
+              ul {
+                position: relative;
+                padding-left: 0.5rem;
+                display: none;
+                list-style: none;
+
+                &.active {
+                  display: block;
+                }
+
+                &:before {
+                  content: '';
+                  display: block;
+                  width: 0;
+                  position: absolute;
+                  top: -10px;
+                  left: 0.3rem;
+                  bottom: 0.9rem;
+                  border-left: 1px solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
-  
+
-  .sidebar {
+  @include media('<=ultra-large') {
-    background: #f9fafc;
-    height: 100vh;
-    transition: all ease-out 0.3s;
-  }
-  
-  .sidebar-tree {
-    padding-left: 1rem;
-    position: relative;
-    width: -moz-max-content;
-    width: max-content;
-  }
-  
-  #search-box {
-    margin-left: 5%;
-    margin-right: 5%;
-    width: -webkit-fill-available;
-    height: 35px;
-    padding-left: 15px;
-    margin-top: 30px;
-    margin-bottom: 10px;
-    border-radius: 5px;
-    background-color: #e5e9f2;
-    transition: all 0.3s ease-out;
-    border: 1px solid #c0ccda;
-  }
-  
-  #search-box:focus {
-    border: 1pt solid #248aaa;
-    outline: none;
-  }
-  
-  #list-heading {
-    padding-left: 0px !important;
-  }
-  
-  .tree,
-  .tree ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  
-  .tree li {
-    margin: 0;
-    padding: 0 1em;
-    line-height: 2em;
-    color: #3c4858;
-    position: relative;
-  }
-  
-  .tree li a {
-    text-decoration: none;
-    color: #131313;
-    transition: all 0.3s ease-out;
-  }
-  
-  .tree li a.active {
-    display: inline;
-    color: #2098d1;
-  }
-  
-  .tree li a:hover {
-    margin-left: 3px;
-    color: #2098d1;
-    transition: all 0.3s ease-out;
-  }
-  
-  .tree i {
-    color: #3c4858;
-    font-size: 12px;
-    margin-right: 5px;
-  }
-  
-  .tree .shift-right {
-    margin-left: 5px;
-  }
-  
-  .tree .active,
-  .tree .active > ul {
-    display: block;
-  }
-  
-  .subtree {
-    padding-left: 0.7rem;
-  }
-  
-  .subtree:before {
-    content: "";
-    display: block;
-    width: 0;
-    position: absolute;
-    top: 2.5rem;
-    left: 1.5rem;
-    bottom: 0.9rem;
-    border-left: 1px solid;
-  }
-  
-  .subtree ul,
-  ul > ul {
-    position: relative;
-    padding-left: 0.5rem;
-    display: none;
-  }
-  
-  .subtree ul:before {
-    content: "";
-    display: block;
-    width: 0;
-    position: absolute;
-    top: -10px;
-    left: 0.3rem;
-    bottom: 0.9rem;
-    border-left: 1px solid;
-  }
-  
-  .subtree li:before {
-    content: "";
-    display: block;
-    width: 20px;
-    height: 0;
-    border-top: 1px solid;
-    margin-top: -1px;
-    position: absolute;
-    top: 18px;
-    left: -3px;
-  }
-  
-  .subtree li:last-child:before {
-    background: #f9fafc;
-    height: auto;
-    top: 1.1rem;
-    bottom: 0;
-  }
-  
-  a.focused {
-    color: #2098d1 !important;
-  }
-  
-  /* ============= Device specific fixes ======= */
-  
-  /* Large screens such as TV */
-  @media only screen and (min-width: 1824px) {
     flex: 15%;
     max-width: 15%;
 
@@ -165,22 +137,20 @@
       max-width: 100%;
     }
   }
-  /* Extra large devices (large desktops, 1200px and up) */
+
-  
+  @include media('<=extra-large') {
-  @media (max-width: 1400px) {
     .sidebar-holder {
       max-width: 20rem;
     }
   }
-  
+
-  @media (max-width: 1200px) {
+  @include media('<=very-large') {
     .sidebar-tree {
       margin-left: 1rem;
     }
   }
-  
+
-  /* IPad Pro */
+  @include media('<=large') {
-  @media (max-width: 1024px) {   
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
@@ -192,23 +162,16 @@
       width: 100%;
       max-height: calc(100vh - 2.5rem);
     }
-  
+
-    &.hide {
+    &.expanded {
       flex: 30%;
       max-width: 30%;
       margin-right: 0.5rem;
       transition: all ease-out 0.3s;
     }
   }
-  
+
-  /*  Large devices (desktops, 992px and up) */
+  @include media('<=medium') {
-  
-  @media (max-width: 992px) {
-  }
-  
-  /* Medium devices (tablets, 768px and up) */
-  
-  @media only screen and (max-width: 768px) {
     flex: 0%;
     max-width: 0%;
     min-height: 100vh;
@@ -219,25 +182,50 @@
       top: 2.5rem;
       width: 100%;
     }
-  
+
-    &.hide {
+    &.expanded {
       flex: 40%;
       max-width: 40%;
       margin-right: 0.5rem;
       transition: all ease-out 0.3s;
     }
   }
-  
+
-  /* Small devices (landscape phones, 576px and up) */
+  @include media('<=small') {
-  
-  @media only screen and (max-width: 576px) {
     width: 100%;
     min-height: 0;
     max-height: 0;
     max-width: 100%;
     transition: all ease-out 0.5s;
 
-    &.hide {
+    .sidebar-holder {
+      max-height: 0;
+      height: -moz-fit-content;
+      height: fit-content;
+      overflow: hidden;
+      max-width: 100%;
+      transition: all ease-out 0.5s;
+
+      .sidebar {
+        position: relative;
+        height: -moz-fit-content;
+        height: fit-content;
+        max-height: -moz-fit-content;
+        max-height: fit-content;
+        width: 100vw;
+        min-height: 0;
+        overflow: hidden;
+        transition: all ease-out 0.5s;
+
+        .sidebar-tree {
+          margin-left: 0rem;
+          max-height: 0;
+          transition: all 0.5s ease-out;
+        }
+      }
+    }
+
+    &.expanded {
       margin-top: 2rem;
       position: relative;
       height: -moz-fit-content;
@@ -246,54 +234,16 @@
       max-height: 300vh;
       max-width: 100%;
       transition: all ease-out 0.5s;
-    }
+
-  
+      .sidebar-holder {
-    .sidebar-holder {
+        max-height: 200vh;
-      max-height: 0;
+        transition: all ease-out 0.5s;
-      height: -moz-fit-content;
+
-      height: fit-content;
+        .sidebar-tree {
-      overflow: hidden;
+          max-height: 200vh;
-      max-width: 100%;
+          transition: all 0.5s ease-out;
-      transition: all ease-out 0.5s;
+        }
-    }
+      }
-  
-    &.hide .sidebar-holder {
-      max-height: 200vh;
-      transition: all ease-out 0.5s;
-    }
-  
-    .sidebar {
-      position: relative;
-      height: -moz-fit-content;
-      height: fit-content;
-      max-height: -moz-fit-content;
-      max-height: fit-content;
-      width: 100vw;
-      min-height: 0;
-      overflow: hidden;
-      transition: all ease-out 0.5s;
-    }
-  
-    .sidebar-tree {
-      margin-left: 0rem;
-      max-height: 0;
-      transition: all 0.5s ease-out;
-    }
-    &.hide .sidebar-tree {
-      max-height: 200vh;
-      transition: all 0.5s ease-out;
     }
   }
-  
+}
-  /* iPhoneX, iPhone 6,7,8 */
-  @media only screen and (max-width: 375px) {
-  }
-  
-  /* Galaxy S5, Moto G4 */
-  @media only screen and (max-width: 360px) {
-  }
-  
-  /* iPhone 5 or before */
-  @media only screen and (max-width: 320px) {
-  }  
-}

layouts/partials/navigators/sidebar.html

@@ -9,7 +9,7 @@
   {{ if .HasChildren }}
     <!-- Add current entry -->
     <li>
-      <i class="fas {{ $icon }}"></i><a class="{{$class}}" href="{{ .URL }}"> {{.Name}}</a>
+      <i class="fas {{ $icon }}"></i><a class="{{$class}} list-link" href="{{ .URL }}"> {{.Name}}</a>
       <!-- Add sub-tree -->
       <ul class="{{ $class }}">
         {{ partial "navigators/sidebar.html" (dict "menuName" $.menuName "menuItems" .Children "ctx" $.ctx) }}
@@ -17,6 +17,6 @@
     </li>
   {{ else }}
     <!-- No sub-tree. So, only add current entry -->
-    <li><a class="{{$class}}" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
+    <li><a class="{{$class}} list-link" href="{{ .PageRef | default .URL }}" title="{{ .Name }}">{{.Name}}</a></li>
   {{ end }}
 {{ end }}