init

themes/editor-hugo/assets/scss/templates/_navigation.scss

@@ -0,0 +1,245 @@
+// start header style
+header.sidenav {
+  position: fixed;
+  width: 110px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: $white;
+  transition: .25s ease;
+  padding-top: 15px;
+  padding-bottom: 40px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include tablet {
+    width: 100%;
+    height: 80px;
+    background-color: lighten(desaturate(adjust-hue($primary-color, 4), 2.87), 36.67);
+    padding: 0;
+    flex-direction: row;
+
+    .is-top {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      align-items: center;
+      padding-left: 25px;
+      > div {
+        order: 1;
+        display: flex;
+        align-items: center;
+      }
+      .navbar-brand {
+        order: 0;
+      }
+    }
+  }
+
+  .sidenav-toggler {
+    background-color: transparent;
+    border: 0;
+    margin-bottom: 55px;
+
+    &.logo-plain {
+      margin-bottom: 25px;
+    }
+
+    @include tablet {
+        margin-bottom: 0;
+    }
+    .toggler-icon {
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      transition: transform 400ms;
+      user-select: none;
+      .line {
+        fill:none;
+        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
+        stroke: $dark;
+        stroke-width:3;
+        stroke-linecap:round;
+      }
+      .top {
+        stroke-dasharray: 40 139;
+      }
+      .bottom {
+        stroke-dasharray: 40 180;
+      }
+      &.active {
+        transform: rotate(45deg);
+        .top {
+            stroke-dashoffset: -98px;
+        }
+        .bottom {
+            stroke-dashoffset: -138px;
+        }
+      }
+    }
+  }
+
+  .navbar-brand {
+    transform: rotate(-90deg);
+    display: inline-flex;
+    padding: 0;
+    &.plain {
+      transform: rotate(0);
+    }
+
+    @include tablet {
+      transform: rotate(0);
+    }
+  }
+}
+
+.sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba($primary-color, 0.2);
+  z-index: 15;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition: .3s ease;
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+
+// sidenav-menu
+nav.sidenav-menu {
+  position: fixed;
+  top: 0;
+  left: 110px;
+  z-index: 99;
+  background: darken($white, 1);
+  height: 100%;
+  width: 280px;
+  display: flex;
+  overflow-y: auto;
+  padding: 15px 30px 44px 30px;
+  transform: translate3d(-100%, 0, 0);
+  transition: .2s ease;
+
+  &.show {
+    transform: translate3d(0, 0, 0);
+    transition: .3s ease;
+  }
+  
+  @include tablet {
+    top: 0;
+    left: 0;
+    z-index: 99992;
+  }
+
+  .nav-item {
+    display: block;
+
+    &.active .nav-link {
+      color: $primary-color !important;
+    }
+
+    &:first-child {
+      margin-top: 8px;
+    }
+    &:last-child {
+      margin-bottom: 8px;
+    }
+
+    .nav-link {
+      font-weight: 500;
+      color: $dark;
+      position: relative;
+      padding: 10px;
+
+      &:hover {
+        color: $primary-color;
+      }
+      
+      &[data-toggle="collapse"]::after {
+        content: "+";
+        float: right;
+        font-size: 24px;
+        line-height: 1;
+      }
+      &[aria-expanded="true"]::after {
+        content: "_";
+        line-height: 0.3;
+        font-size: 22px;
+      }
+    }
+  }
+  .nav-item ul li {
+    a {
+      font-size: 15px;
+      padding: 7px 18px;
+      display: inline-block;
+      font-weight: 500;
+    }
+  }
+}
+
+
+// search block style
+.search-toggle {
+  background-color: transparent;
+  border: 0;
+  transition: .3s ease;
+  padding: 10px;
+  font-size: 22px;
+  &:hover {
+    color: $primary-color;
+  }
+}
+.search-block {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background-color: $white;
+  z-index: 9999988999889;
+  padding: 0 50px;
+  display: none;
+  form {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  input {
+    border: 0;
+    border-bottom: 1px solid #ddd;
+    font-size: 22px;
+    width: 500px;
+    max-width: 100%;
+    padding: 15px 0;
+    margin: auto;
+    letter-spacing: -1px;
+    transition: .3s ease;
+  }
+  &.is-visible {
+    input {
+        border-bottom-color: $primary-color;
+    }
+  }
+  [data-toggle="search-close"] {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 40px;
+  }
+}
+
+// end header style