responsive navbar

templates/panel/index.html

@@ -10,7 +10,7 @@
     <ul class="sitekey-list__box">
         <p> 
             It looks like you don't have any sitekeys. Click 
-                <a href="<.= crate::PAGES.panel.sitekey.add .>">here></a> to add new sitekey.
+			<a href="<.= crate::PAGES.panel.sitekey.add .>">here</a> to add new sitekey.
         </p>
     </ul>
 

templates/panel/navbar/index.html

@@ -1,12 +1,18 @@
 <nav class="secondary-menu">
-  <ul class="secondary-menu__lsit">
-    <li class="secondary-menu__heading">
-      <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap() .>" alt="Logo" />
-      <div class="secondary-menu__brand-name">
-        mCaptcha
-      </div>
-    </li>
-
+	<input type="checkbox" class="nav-toggle" id="nav-toggle" >
+  <div class="secondary-menu__heading">
+    <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static/cache/img/icon-trans.png").unwrap() .>" alt="Logo" />
+    <div class="secondary-menu__brand-name">
+      mCaptcha
+    </div>
+	<label class="nav__hamburger-menu"for="nav-toggle">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </div>
+  <ul class="secondary-menu__list">
+    
     <!--
           <li class="secondary-menu__section-partition"></li>
           -->

templates/panel/navbar/main.scss

@@ -19,28 +19,39 @@
 @import '../../vars';
 
 .secondary-menu {
- // position: fixed;
- // width: 14%;
- // left: 0;
- // bottom: 0;
- // top: 0;
- // right: 0;
+  // position: fixed;
+  // width: 14%;
+  // left: 0;
+  // bottom: 0;
+  // top: 0;
+  // right: 0;
 
-  height: 100%;
-  overflow: auto;
+  //height: 100%;
+  //overflow: auto;
+  display: flex;
+  flex-direction: column;
 
   background-color: $secondary-backdrop;
   color: $light-text;
 }
 
-.secondary-menu__lsit{
-	position: fixed;
-	top: 0;
-	bottom: 0;
+.nav-toggle {
+  display: none;
+}
+
+.nav__hamburger-menu {
+  display: none;
+}
+
+.secondary-menu__list {
+  // position: fixed;
+  // top: 0;
+  // bottom: 0;
+  height: 100%;
 }
 
 .secondary-menu__heading {
-  margin: auto;
+  //  margin: auto;
   padding: 20px 5px;
   display: flex;
 }

templates/panel/navbar/mobile.scss

@@ -14,11 +14,61 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+@import '../../vars';
 
 .secondary-menu {
   display: block;
 }
 
-.secondary-menu__lsit {
-  position: sticky;
+.secondary-menu__list {
+  //  position: sticky;
+  height: 0px;
+  overflow: hidden;
+}
+
+.nav__hamburger-menu {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  padding: 13px;
+}
+
+.nav__hamburger-menu:hover {
+  cursor: grab;
+}
+
+.nav__hamburger-menu:hover > span {
+  color: $green;
+}
+
+.nav__hamburger-menu > span {
+  display: block;
+  width: 25px;
+  height: 10px;
+  border-top: 2px solid #eee;
+}
+
+.secondary-menu__logo {
+  width: 40px;
+  height: 40px;
+}
+
+.secondary-menu__heading {
+  padding: 10px 5px;
+}
+
+.secondary-menu__brand-name {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.nav-toggle:not(:checked) ~ .secondary-menu__list {
+  height: 0px;
+  //  overflow-y: hidden;
+  //  max-height: 100%;
+}
+
+.nav-toggle:checked ~ .secondary-menu__list {
+  height: 100%;
+  overflow-y: auto;
 }