better mobile navbar

2 files changed, 99 insertions, 99 deletions

diff --git a/assets/sass/components/_search.scss b/assets/sass/components/_search.scss
index 4f7955e..16c9510 100644
--- a/assets/sass/components/_search.scss
+++ b/assets/sass/components/_search.scss
@@ -354,7 +354,7 @@
       background-color: themed('navbar-background-color');
       border-bottom: 1px solid themed('navbar-border-bottom-color');
       @include on-event {
-        color: themed('link-hover');   
+        color: themed('navbar-title-hover-color');   
       }
     }
 
diff --git a/assets/sass/layout/_navigation.scss b/assets/sass/layout/_navigation.scss
index 31d9db2..3bcc462 100644
--- a/assets/sass/layout/_navigation.scss
+++ b/assets/sass/layout/_navigation.scss
@@ -47,9 +47,9 @@
 
     @include themify($themes) {
       background-color: themed('navbar-background-color') !important;
-      border-bottom: 1px solid themed('navbar-border-bottom-color') !important;
+
       @include on-event {
-        background-color: themed('navbar-menu-hover-background-color');
+        color: themed('navbar-title-hover-color');
       }
     }
 
@@ -122,10 +122,10 @@
         }      
       }      
           
-      &:hover {
+      @include on-event {
         span {
           @include themify($themes) {
-            background-color: themed('link-hover');
+            background-color: themed('navbar-title-hover-color');
           }
         }        
       }
@@ -204,7 +204,7 @@
     }    
 
     &-item {
-      height: $grid_navbar_height;      
+      height: $grid_navbar_height;
       padding: 0.5rem;
       font-size: 1rem;
       font-family: $title-font;
@@ -221,7 +221,7 @@
         background-color: themed('navbar-background-color');
         @include on-event {
           color: themed('navbar-title-hover-color');
-          background-color: themed('navbar-menu-hover-background-color');
+          // background-color: themed('navbar-menu-hover-background-color');
           text-decoration: none;
           border-bottom: 1px solid themed('navbar-border-bottom-color');
         }
@@ -240,23 +240,23 @@
       }
     }
 
-    &.is-active {
-      position: absolute;
-      top: $grid_navbar_height;
-      left: 0;
-      width: 100%;
-      height: auto;
-      overflow: hidden;
-
-      @include flexbox();
-      @include flex-direction(column);
-      @include align-items(flex-start);
-      @include themify($themes) {        
-        border-top: 1px solid themed('navbar-border-bottom-color');
-        background-color: themed('navbar-mobile-background-color');
-        border-bottom: 1px solid themed('navbar-border-bottom-color');
-      }
-    }
+    // &.is-active {
+    //   position: absolute;
+    //   top: $grid_navbar_height;
+    //   left: 0;
+    //   width: 100%;
+    //   height: auto;
+    //   overflow: hidden;
+
+    //   @include flexbox();
+    //   @include flex-direction(column);
+    //   @include align-items(flex-start);
+    //   @include themify($themes) {        
+    //     border-top: 1px solid themed('navbar-border-bottom-color');
+    //     background-color: themed('navbar-mobile-background-color');
+    //     border-bottom: 1px solid themed('navbar-border-bottom-color');
+    //   }
+    // }
   }
 
   &__dropdown {
@@ -346,8 +346,17 @@
   }
 
   .dropdown {
+    height: $grid_navbar_height !important;
     position: relative;
 
+    @include themify($themes) {
+      color: themed('burger-menu-color');  
+      @include on-event {
+        color: themed('link-hover');
+        background-color: themed('navbar-menu-hover-background-color');
+      }
+    }
+
     @include flexbox();
     @include align-items(center);
     @include justify-content(center);    
@@ -356,7 +365,7 @@
       @include on-event {
         color: themed('navbar-title-hover-color');
         background-color: themed('navbar-menu-hover-background-color');
-      }      
+      }
     }
 
     &-trigger {
@@ -366,8 +375,20 @@
       outline: none;
       width: $grid_navbar_height;
       height: $grid_navbar_height - 2px;
-      color: inherit;
-      background-color: inherit;
+
+      @include themify($themes) {
+        color: themed('burger-menu-color');
+        @include on-event {
+          color: themed('navbar-title-hover-color');
+        }
+      }
+    }
+
+    @media only screen and (max-width: 769px) {
+      &-trigger {
+        padding: 0.25rem;
+        width: 35px;
+      }
     }
 
     &-content {
@@ -440,95 +461,74 @@
   &[data-ani="true"] {
     @include animation('slide-in-down .5s .4s 1 ease both');
   }
-  
-  @include themify($themes) {
-    color: themed('burger-menu-color');  
-    @include on-event {
-      color: themed('link-hover');
-      background-color: inherit;
-      border-bottom: none;
-    }      
-  }
 
   @media only screen and (max-width: 769px) {
     @include flexbox();
-    @include align-items(center);
-    @include justify-content(flex-end);
   }
 
-  .dropdown {
-    height: $grid_navbar_height !important;
-    @include themify($themes) {
-      color: themed('burger-menu-color');  
-      @include on-event {
-        color: themed('link-hover');
-        background-color: themed('navbar-menu-hover-background-color');
-      }
-    }
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+}
 
-    &-trigger {
-      padding: 0.25rem;
-      cursor: pointer;
-      border: none;      
-      outline: none;
-      width: 35px;
-      height: $grid_navbar_height !important;
-      color: inherit;
-      background-color: inherit;
-    }
+.navbarm {
+  padding: 0 0.75rem;
+  height: 100%;
+  position: relative;
+  
+  @include flexbox();
+  @include align-items(center);
 
-    &-content {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      display: none;
-      height: auto;
-      z-index: z("dropdown");
-      border-top-left-radius: 0.15rem;
-      border-top-right-radius: 0.15rem;
+  &__menu {
+    height: 100%;
+    padding: 0 0.75rem;
 
-      a {
-        font-size: 0.9rem;
-      }
+    @include flexbox();
 
-      @include box-shadow(0, 1px, 3px, 0, rgba(0, 0, 0, 0.4));
-      @include themify($themes) {
-        border-top: 4px solid themed("dropdown-border-top-color");
-        background-color: themed("dropdown-content-background-color");
+    &--item {
+      height: $grid-navbar-height;
+      padding: 0rem 0.75rem;
+
+      & > a {
+        height: 100%;
+        font-family: $title-font;
+        font-size: 16.8px;
+        color: inherit;
+        text-decoration: none !important;
+        
+        @include flexbox();
+        @include align-items(center);
+        @include justify-content(center);
       }
 
-      .is-active {
-        @include themify($themes) {
-          background-color: themed("dropdown-item-active-background-color");
+      @include themify($themes) {
+        color: themed('body-color');
+        &.active {
+          font-weight: bold;
+          color: themed('navbar-title-active-color');
         }
       }
     }
+  }
 
-    &-item {
-      padding: 0.25rem 0.75rem;
-      height: 100%;
-      text-decoration: none;
-      display: block;
-      font-size: 1rem;
-
-      @include no-select;
-      @include themify($themes) {
-        color: themed("dropdown-item-color");
-        @include on-event {
-          color: themed("dropdown-item-hover-color");
-          background-color: themed("dropdown-item-hover-background-color");
-          text-decoration: none;
+  &__collapse {
+    width: 100%;
+    position: absolute;
+    top: $grid-navbar-height;
+    left: 0;
+    max-height: 0;
+    overflow: hidden;
 
-          &:first-child {
-            border-top-left-radius: 0.15rem;
-            border-top-right-radius: 0.15rem;
-          }
-        }
+    @include transition(all, 0.15s, ease-out);
+    @include themify($themes) {
+      background-color: themed('navbar-background-color');
+      
+      &[data-open="true"] {
+        border-bottom: 2px solid themed('navbar-border-bottom-color');
+      }
+      &[data-open="false"] {
+        border-bottom: none;
       }
     }
   }
-
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
 }
\ No newline at end of file