Fixed nav bar behavior

Author: x1y

themes/pinetheme/assets/css/documentation.css

@@ -73,6 +73,7 @@ body {
 }
 #doc-nav a {
     color: var(--fg);
+    padding-right: 5px;
 }
 #doc-nav a:hover {
     color: var(--blue);
@@ -84,24 +85,28 @@ body {
     padding-left: 0 !important;
 }
 #doc-nav .sidebar-nav ul ul {
-    margin-left: 10px;
+    margin-left: 4px;
+    border-left: 1px solid #868686b7;
+}
+#doc-nav .sidebar-nav ul ul li {
+    margin-left: 8px;
 }
 #doc-nav .doc-nav-head {
     color: var(--fg);
     font-weight: 500 !important;
 }
 #doc-nav li {
-    padding-top: 10px;
+    padding: 5px 0;
 }
 .button_collapse {
     font-weight: 600;
     padding: 5px 10px;
     border-radius: 5px;
-    float: right;
+    /* float: right */
     cursor: pointer;
 }
 .button_collapse:hover, .button_collapse:active {
-    background-color: #f1f1f1;
+    background-color: #50505067;
 }
 #doc-nav .c_active > ul {display: block;}
 .active > ul {
@@ -214,6 +219,7 @@ div#doc-page article > blockquote {
     }
     #doc-nav nav.sidebar-nav {
         max-height: 250px;
+        overflow-y: scroll;
     }
     #doc-page {
         padding: 0 10px 0 10px;

themes/pinetheme/assets/css/style.css

@@ -582,12 +582,12 @@ input#hamburger_cb,
     #main_menu { 
         margin-left: 0;
         width: 100%;
-        background: white;
+        background: var(--bg);
         position: absolute;
         top: 140px;
         z-index: 999;
-        border-top: 2px solid #eee;
-        border-bottom: 2px solid #eee;
+        border-top: 2px solid #8383831a;
+        border-bottom: 2px solid #8383831a;
         padding-bottom: 20px;
         box-shadow: 3px 25px 20px 0px rgba(87, 87, 87, 0.75);
 
@@ -611,6 +611,8 @@ input#hamburger_cb,
         padding: 4px 10px;
         background-color: #2969B1;
         border-radius: 5px;
+        box-shadow: none;
+        border: none;
     }
     #hamburger:hover{
         box-shadow: 0 0 15px rgba(92, 123, 182, 0.7);
@@ -633,6 +635,9 @@ input#hamburger_cb,
     input#hamburger_cb:checked ~ #main_menu {
         display: block;
     }
+    input#hamburger_cb:checked + #hamburger {
+        border: 1px solid var(--fg) !important;
+    }
     .dropdown label {
         display: flex; justify-content: flex-end
     }

themes/pinetheme/layouts/partials/header.html

@@ -1,7 +1,8 @@
 <div id="header">
     <div id="header-container">
         <!-- Hamburger -->
-        <div id="hamburger"><label for="hamburger_cb">&#9776;</label></div><input type="checkbox" id="hamburger_cb"/>
+        <input type="checkbox" id="hamburger_cb"/>
+        <div id="hamburger"><label for="hamburger_cb">&#9776;</label></div>
 
         <!-- Logo -->
         <a id="logo" href="/" aria-label="A link to the main page"><img src="/img/logo.png" alt="The PINE64 logo"></a>