mobilemenu fix (#10985)

* mobilemenu fix * enable between large and xlarge --------- Co-authored-by: Marek <marek@fachowo.co>
handsontable · May 17, 2024 · 43b9ea1 · 43b9ea1
1 parent bfe12c4
commit 43b9ea1
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 11 deletions.
diff --git a/docs/.vuepress/theme/components/Sidebar.vue b/docs/.vuepress/theme/components/Sidebar.vue
@@ -4,6 +4,10 @@
     <slot name="top" />
 
     <div class="sidebar-nav">
+      <div class="mobile-nav">
+        <FrameworksDropdown/>
+        <NavLinks/>
+      </div>
       <SidebarLinks :depth="0" :items="items" />
     </div>
     <slot name="bottom" />

diff --git a/docs/.vuepress/theme/styles/layout/sidebar.styl b/docs/.vuepress/theme/styles/layout/sidebar.styl
@@ -6,24 +6,23 @@
     bottom: 0
     border:0
     z-index: 100
-    //border-radius: $radius-xxl
     padding: 24px 0
     background: transparent
     overflow: hidden
     flex-direction: column
     display: flex
 
     .os-scrollbar {
-        //top: 24px !important
 
         .os-scrollbar-handle { 
             background: $borderColor
         }
     }
-
-    .sidebar-nav{
+
+    .mobile-nav {
+        display: none
     }
-    
+
     .home-link { 
         display: block;
         padding: 24px
@@ -340,7 +339,6 @@
     }
 
     .mobile-show {
-
         .nav-links {
             display: flex
             flex-direction: column
@@ -441,6 +439,7 @@
                         }
                     }
             }
+
             @media (hover: hover) {
                 &:hover { 
                     > button { 
@@ -571,12 +570,94 @@
     }
 }
 
-@media (max-width: $large) {
-    .sidebar{
-        .sidebar-links:first-child {
-            margin-top: 16px
+@media (max-width: $xLarge) {
+  .mobile-nav {
+    border-bottom: 1px solid $borderColor
+    margin-bottom: 12px
+    padding-bottom: 12px
+    display: block !important;
+
+
+    .nav-frameworks {
+        button, 
+        .ico {
+            display: none
+        }
+
+        .nav-dropdown { 
+            display: flex !important
+            margin: 16px
+            padding: 4px
+            border-radius: $radius-xl
+            background: $sideColor
+
+            li {
+                display: block
+                width 100%
+            }
+            a { 
+                padding: 7px
+                display: block
+                text-align: center
+                border-radius: $radius
+            }
+        }
+    }
+
+    /* active item */
+    .i-react + .nav-item .nav-dropdown .dropdown-item:nth-child(2) a,
+    .i-javascript + .nav-item .nav-dropdown .dropdown-item:nth-child(1) a  {
+        background: $borderColor
+    }
+
+    .nav-links {
+        &:not(.nav-frameworks) {
+            div:first-child {
+                display: none
+            }
         }
 
+        a { 
+            display: flex
+            gap: 8px
+            align-items: center
+            padding: 12px 32px
+            font-size: $font-size-xs
+            line-height: $line-height-xs
+            font-weight: 400
+            color: $text2Color
+            transition all $t ease
+            cursor: pointer
+            border: none
+
+            span {
+                width: 100%
+            }
+
+            i {
+                opacity .7
+                transition all $t ease
+                background-size: 18px 
+            }
+
+            .i-arrow { 
+                opacity: .5    
+            }
+
+            &.active { 
+                color: $textColor
+                i { opacity: 1}
+                .i-arrow { 
+                    transform: rotate(180deg)
+                }
+            }
+        }
+    }
+}
+}
+
+@media (max-width: $large) {
+    .sidebar{
         z-index: 100
         background: $bgColor
         margin: 0
@@ -588,6 +669,10 @@
         width: 100%
         max-width: 100vw
 
+        .sidebar-links:first-child {
+            margin-top: 16px
+        }
+
         .info-box { 
             margin-top: 16px
         }
@@ -609,4 +694,4 @@
   60% { transform: rotate(10deg); }
   80% { transform: rotate(-10deg); }
   100% { transform: rotate(0); }          
-}
+}
diff --git a/docs/.vuepress/theme/styles/theme/darkmode.styl b/docs/.vuepress/theme/styles/theme/darkmode.styl
@@ -263,6 +263,35 @@ html.theme-dark {
                 }
             }   
         }
+
+        @media (max-width: $xLarge) {
+            .mobile-nav {
+                border-bottom: 1px solid $borderColor
+
+
+                .nav-frameworks {
+                    .nav-dropdown { 
+                        background: $sideColor
+                    }
+                }
+
+                /* active item */
+                .i-react + .nav-item .nav-dropdown .dropdown-item:nth-child(2) a,
+                .i-javascript + .nav-item .nav-dropdown .dropdown-item:nth-child(1) a  {
+                    background: $borderColor
+                }
+
+                .nav-links {
+                    a { 
+                        color: $text2Color
+
+                        &.active { 
+                            color: $textColor
+                        }
+                    }
+                }
+            }
+        }
     }
 
     /* Navbar