From 013576902c1666743e700d39754eb613eeffab8a Mon Sep 17 00:00:00 2001
From: Visman <visman2008@googlemail.com>
Date: Mon, 10 Sep 2018 22:17:30 +0700
Subject: [PATCH] + The adaptive menu is controlled by the keyboard

---
 app/templates/layouts/admin.forkbb.php |  6 +--
 app/templates/layouts/main.forkbb.php  |  4 +-
 public/style/ForkBB/style.css          | 73 +++++++++++++++++++++-----
 3 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/app/templates/layouts/admin.forkbb.php b/app/templates/layouts/admin.forkbb.php
index 4d094a39..3b1bba7d 100644
--- a/app/templates/layouts/admin.forkbb.php
+++ b/app/templates/layouts/admin.forkbb.php
@@ -12,15 +12,15 @@
       </ul>
 @endsection
 @extends ('layouts/main')
-    <div class="f-nav-links">
+    <div class="f-nav-links f-nav-admin{!! $p->mainSuffix or '' !!}-links">
 @yield ('crumbs')
     </div>
     <div class="f-main f-main-admin{!! $p->mainSuffix or '' !!}">
       <aside class="f-admin-menu">
 @if ($p->aNavigation)
         <nav class="f-admin-nav f-menu">
-          <input id="id-an-checkbox" class="f-menu-checkbox" style="display: none;" type="checkbox">
-          <label class="f-menu-toggle" for="id-an-checkbox"></label>
+          <input id="id-an-checkbox" class="f-menu-checkbox" type="checkbox">
+          <label id="id-an-label" class="f-menu-toggle" for="id-an-checkbox"></label>
           <ul class="f-menu-items">
     @foreach ($p->aNavigation as $key => $val)
             <li id="id-anav-{{ $key }}" class="f-menu-item"><a class="f-menu-a @if ($key == $p->aIndex) active @endif" href="{!! $val[0] !!}">{!! $val[1] !!}</a></li>
diff --git a/app/templates/layouts/main.forkbb.php b/app/templates/layouts/main.forkbb.php
index 38512512..86d5264e 100644
--- a/app/templates/layouts/main.forkbb.php
+++ b/app/templates/layouts/main.forkbb.php
@@ -23,8 +23,8 @@
       </div>
 @if ($p->fNavigation)
       <nav class="f-main-nav f-menu @if ($p->fNavigation['search']) f-main-nav-search @endif">
-        <input id="id-mn-checkbox" class="f-menu-checkbox" type="checkbox" style="display: none;">
-        <label class="f-menu-toggle" for="id-mn-checkbox"></label>
+        <input id="id-mn-checkbox" class="f-menu-checkbox" type="checkbox">
+        <label id="id-mn-label" class="f-menu-toggle" for="id-mn-checkbox"></label>
         <ul class="f-menu-items">
   @foreach ($p->fNavigation as $key => $val)
           <li id="id-nav-{!! $key !!}" class="f-menu-item"><!-- inline -->
diff --git a/public/style/ForkBB/style.css b/public/style/ForkBB/style.css
index d1990a81..f3e06573 100644
--- a/public/style/ForkBB/style.css
+++ b/public/style/ForkBB/style.css
@@ -138,7 +138,8 @@ h3 {
 .f-wrap,
 .f-header,
 .f-announce,
-.f-footer {
+.f-footer,
+.f-main {
   position: relative;
 }
 
@@ -261,14 +262,23 @@ select {
   content: "\2716";
 }
 
+.f-menu-checkbox:focus + .f-menu-toggle:after {
+  color: #D3B58D;
+  background-color: #583200;
+  border-color: #D3B58D;
+}
+
 .f-menu-items {
   overflow: hidden;
-  max-height: 0;
-/*  transition-duration: 0.5s; */
+  /*max-height: 0;*/
+  /*transition-duration: 0.5s;*/
+  display: none;
+  flex-direction: column;
 }
 
 .f-menu-checkbox:checked ~ .f-menu-items {
-  max-height: 100rem;
+  /*max-height: 100rem;*/
+  display: flex;
 }
 
 .f-menu-a {
@@ -312,7 +322,12 @@ select {
   background-color: #F8F4E3;
 }
 
-.f-main-nav .f-menu-toggle {
+#id-mn-checkbox {
+  position: absolute;
+  opacity: 0;
+}
+
+#id-mn-label {
   color: #D3B58D;
   border-color: #D3B58D;
   position: absolute;
@@ -341,26 +356,28 @@ select {
   padding: 0.3125rem 0.625rem;
 }
 
+.f-main-nav .f-menu-a.active {
+  background-color: #814A00;
+  color: #F8F4E3;
+}
+
 .f-main-nav .f-menu-a:hover,
 .f-main-nav .f-menu-a:focus {
   background-color: #583200;
   color: #F8F4E3;
 }
 
-.f-main-nav .f-menu-a.active {
-  background-color: #814A00;
-  color: #F8F4E3;
-}
-
 @media screen and (min-width: 50rem) {
-  .f-main-nav .f-menu-toggle {
+  #id-mn-checkbox,
+  #id-mn-label {
     display: none;
   }
 
   .f-main-nav .f-menu-items {
     display: flex;
     flex-wrap: wrap;
-    max-height: 100rem;
+    /*max-height: 100rem;*/
+    flex-direction: row;
   }
 
   .f-main-nav .f-menu-item {
@@ -857,7 +874,33 @@ select {
   color: #F8F4E3;
 }
 
+.f-admin-menu .f-menu-a:hover,
+.f-admin-menu .f-menu-a:focus {
+  background-color: #583200;
+  color: #F8F4E3;
+}
+
+#id-an-checkbox {
+  position: absolute;
+  opacity: 0;
+}
+
+#id-an-label {
+  position: absolute;
+  top: -3.125rem;
+  right: 0.625rem;
+}
+
+.f-nav-admin-links,
+.f-nav-admin-one-column-links {
+  margin-right: 3.75rem;
+}
+
 @media screen and (min-width: 50rem) {
+  .f-nav-admin-links {
+    margin-right: 0;
+  }
+
   .f-main-admin {
     display: flex;
     flex-wrap: wrap;
@@ -872,12 +915,14 @@ select {
     width: calc(100% - 14rem);
   }
 
-  .f-main-admin .f-admin-menu .f-menu-toggle {
+  .f-main-admin #id-an-checkbox,
+  .f-main-admin #id-an-label {
     display: none;
   }
 
   .f-main-admin .f-admin-menu .f-menu-items {
-    max-height: 100rem;
+    /*max-height: 100rem;*/
+    display: flex;
   }
 
   .f-main-admin .f-admin-menu .f-menu-a {