Rework mobile menu toggle

Fix functionality, use event listener, remove unused CSS, fix references in JS

Author: Simran-B

site/themes/arangodb-docs-theme/layouts/partials/header.html

@@ -3,7 +3,7 @@
     <!--LOGO-->
     <div class="header-block-left">
     <div class="mobile-menu-toggle">
-      <button class="sidebar-toggle-navigation" onclick="showSidebarHandler()">
+      <button class="sidebar-toggle-navigation">
         <svg width="1.33em" height="1.33em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
       </button>
     </div>

site/themes/arangodb-docs-theme/static/css/theme.css

@@ -650,14 +650,9 @@ body .page-container {
     display: flex;
 }
 
-.sidebar code {
-    color: var(--gray-100);
-    background: transparent;
-    border: 0;
-    padding: 0;
-}
 
-.sidebar > .sidebar-toggle-navigation {
+/*
+.sidebar-toggle-navigation {
     position: fixed;
     bottom: 3vh;
     left: 0.2vw;
@@ -669,14 +664,13 @@ body .page-container {
     -webkit-justify-content: center;
     justify-content: center;
     cursor: pointer;
-    -webkit-transition: 150ms ease-in-out;
     background-color: var(--gray-950);
     z-index: 999;
     border: 1px solid rgb(106 170 33/0.3);
     border-radius: 24px;
 }
 
-.sidebar > .sidebar-toggle-navigation::after {
+.sidebar-toggle-navigation::after {
     font-family: "Font Awesome 5 Free";
     content: "\f054";
     display: inline-block;
@@ -687,29 +681,33 @@ body .page-container {
     color: var(--gray-100);
 }
 
-.sidebar.active > .sidebar-toggle-navigation {
+.main-nav.active > .sidebar-toggle-navigation {
     left: 286px;
 }
+*/
 
 
 @media screen and (max-width: 1024px) {
-    .sidebar > .sidebar-toggle-navigation,
-    .sidebar.active > .sidebar-toggle-navigation {
+    /*
+    .main-nav > .sidebar-toggle-navigation,
+    .main-nav.active > .sidebar-toggle-navigation {
         display: none;
     }
+    */
     .mobile-menu-toggle {
         display: block;
     }
 }
 
 
-
-.sidebar.active > .sidebar-toggle-navigation::after {
+/*
+.main-nav.active > .sidebar-toggle-navigation::after {
     font-family: "Font Awesome 5 Free";
     content: "\f053";
 }
+*/
 
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 769px) {
     .mobile-menu-toggle {
         display: none;
     }
@@ -817,94 +815,27 @@ header .logo {
     height: 2rem;
 }
 
-/* */
-
-/*
-@media screen and (max-width: 768px) {
-    .version-selector {
-        border: none;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .arangodb-version {
-        width: 4rem;
-    }
-}
-*/
-
 /* end Header */
 
-/* Menu */
-.menu-iframe {
-    grid-area: sidenav;
-    display: flex;
-    align-items: stretch;
-    position: sticky;
-    z-index: 2;
-    top: 4rem;
-    height: 101vh;
-    background-color: var(--gray-950);
-    left: 0;
-    width: 0;
-    transition:  width 0.3s ease-in-out;
-    border: none;
-}
-
-.sidebar {
-    grid-area: sidenav;
-    display: flex;
-    align-items: stretch;
-    position: fixed;
-    z-index: 9999;
-    top: 64px;
-    height: calc(100vh - 64px);
-    left: 0;
-    width: 0;
-    background-color: var(--gray-950);
-}
-
-.sidebar .sidenav-navigation {
-    opacity: 0;
-}
-.sidebar.active .sidenav-navigation {
-    opacity: 1;
-}
-
-.menu-iframe.active,
-.sidebar.active {
+.main-nav.active {
     width: 300px;
 }
 
 @media screen and (max-width: 768px) {
-    .menu-iframe.active, .sidebar.active {
+    .main-nav-ol {
+        opacity: 0;
+    }
+    
+    .main-nav.active .main-nav-ol {
+        opacity: 1;
+    }
+    
+    .main-nav.active {
         width: 100%;
+        display: block;
     }
 }
 
-.menu-mobile {
-    display: none;
-}
-
-.sidenav-container-flex {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    z-index: 400;
-    overflow-y: scroll;
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-}
-.sidenav-container-flex::-webkit-scrollbar {
-    display: none;
-}
-
-.sidenav-navigation {
-    overflow: auto;
-    margin: 0 10px 0 0;
-}
 
 .content-wrapper {
     display: flex;
@@ -915,151 +846,6 @@ header .logo {
     position: relative;
 }
 
-.sidebar a.padding {
-    padding: 0 1rem;
-}
-
-.sidebar ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.sidebar li {
-    padding: 0;
-
-}
-
-.sidebar ul.topics {
-    margin-bottom: 2rem;
-    padding: 0.5rem 1rem;
-}
-
-.sidebar ul.topics label {
-    cursor: pointer;
-    display: inline;
-    height: 1rem;
-    margin: 6px 16px 0 0;
-    position: absolute;
-    width: 1rem;
-    font-size: 13px;
-    line-height: 1.4rem;
-    right: 0;
-}
-
-.submenu {
-    display: none;
-}
-
-
-.sidebar ul.topics li.parent > ul,
-.sidebar ul.topics li.active > ul,
-.sidebar ul.topics li.alwaysopen > ul {
-    display: block;
-}
-
-.sidebar ul.topics li.active > a {
-    box-sizing: border-box;
-    border-radius: 8px;
-    --tw-bg-opacity: 0.5;
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-
-
-.sidebar ul.topics > li a {
-    /*font-size: 13px;*/
-    line-height: 1.3rem;
-}
-
-
-.sidebar ul li a {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    display: flex;
-    padding: 6px 0;
-    transition: 0.5s;
-}
-
-.sidebar ul.topics li > a {
-    display: flex;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    text-overflow: ellipsis;
-    white-space: break-spaces;
-    color: var(--gray-100);
-    margin-bottom: 8px;
-    font-weight: 400;
-}
-
-.sidebar ul li a.toggle,
-.sidebar ul li.leaf a {
-    margin-right: -0.5rem;
-    padding-right: 1.5rem;
-    border-radius: 8px;
-}
-
-.sidebar ul li a:hover {
-    box-sizing: border-box;
-    border: 0;
-    text-decoration: none;
-    background-color: var(--gray-900);
-}
-
-.sidebar ul.topics > li a::first-line {
-    line-height: 1rem;
-}
-
-.sect > label.closed::before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f078";
-    display: inline-block;
-    /* padding-right: 3px; */
-    vertical-align: middle;
-    font-weight: 900;
-    font-size: 10px;
-    padding-top: 0;
-    color: var(--gray-300);
-}
-
-.sect > label.open::before {
-    font-family: "Font Awesome 5 Free";
-    content: "\f077";
-    display: inline-block;
-    /* padding-right: 3px; */
-    vertical-align: middle;
-    font-weight: 900;
-    font-size: 10px;
-    padding-top: 0;
-    color: var(--gray-300);
-}
-
-.leaf > a {
-    align-items: center;
-    position: relative;
-}
-
-
-.menu-title {
-    pointer-events: none;
-}
-
-.sidebar ul.topics li.parent > a > .menu-title,
-.sidebar ul.topics li.active > a > .menu-title,
-.sidebar ul.topics li.alwaysopen > a > .menu-title {
-    font-weight: 400;
-    color: var(--color-electric-lime);
-}
-
-.sidebar ul li li {
-    padding-left: 1rem;
-}
-
-
-/* end Menu */
-
-
-
 /* Main Article */
 .container-main {
     max-width: 100%;
@@ -2060,26 +1846,6 @@ nav.pagination .next {
     color: #130909;
 }
 
-.sidebar ::-webkit-scrollbar {
-    width: 10px;
-}
-
-.sidebar ::-webkit-scrollbar-thumb {
-    background: var(--gray-500);
-    width: 6px;
-    border-radius: 20px;
-}
-
-.sidebar ::-webkit-scrollbar-thumb:hover {
-    background: var(--gray-200);
-}
-
-.sidebar ::-webkit-scrollbar-track {
-    background: var(--gray-950);
-}
-
-
-
 .DocSearch.DocSearch-Container {
     z-index: 9999;
 }
@@ -2177,6 +1943,20 @@ nav.pagination .next {
     scrollbar-width: thin;
     scrollbar-color: var(--gray-300) var(--gray-100);
     user-select: none;
+    z-index: 9999;
+}
+
+.main-nav code {
+    color: var(--gray-100);
+    background: transparent;
+    border: 0;
+    padding: 0;
+}
+
+@media screen and (max-width: 768px) {
+    .main-nav {
+        display: none;
+    }
 }
 
 .main-nav-ol,