feat: ajout submenu pages

Fixes #12

components/mobile-sidebar.php

@@ -1,10 +1,10 @@
 <nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
-  <h1 class="align-center text-light">Menu principal</h1>
+  <h1 class="align-center text-light">Menu du site</h1>
   <div class="mb-1">
     <?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
   </div>
   <ul>
-    <h2>Pages principal</h2>
+    <h2>Menu principal</h2>
     <li>
       <a href="<?php echo site_url(); ?>" class="menu-item">
         <span><i class="fa fa-home"  aria-hidden="true"></i> Accueil</span>
@@ -33,6 +33,16 @@
       <?php }
     ?>
   </ul>
+  <ul>
+    <h2>Pages</h2>
+    <?php
+      $listmenu = get_nav_menu_locations();
+      $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
+        foreach ($menu as $menuElement) {
+          echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
+        }
+      ?>
+  </ul>
 </nav>
 
 <button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>

components/navbar-pages.php

@@ -8,6 +8,20 @@
             <i class="fa fa-home"  aria-hidden="true"></i><span class="sr-only">Accueil</span>
           </a>
         </li>
+        <li>
+          <a href="#" class="menu-item submenu">
+            Pages <i class="fa fa-caret-down"></i>
+          </a>
+          <ul class="bg-light menu fg-dark">
+            <?php
+            $listmenu = get_nav_menu_locations();
+            $menu = wp_get_nav_menu_items($listmenu['top-navbar-2']);
+              foreach ($menu as $menuElement) {
+                echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
+              }
+            ?>
+          </ul>
+        </li>
         <?php
           $listmenu = get_nav_menu_locations();
           $menu = wp_get_nav_menu_items($listmenu['top-navbar']);

functions.php

@@ -338,7 +338,7 @@ register_taxonomy('roman', 'post',
     register_nav_menus(
       array(
         'top-navbar' => __( 'Navbar (gauche)' ),
-        'top-navbar-2' => __( 'Navbar (droite)' ),
+        'top-navbar-2' => __( 'Navbar (secondaire)' ),
         'link-menu' => __( 'Liste des liens' ),
         'footer-pages' => __( 'Pages dans le footer' ),
         'social' => __( 'Reseaux sociaux' ),

scss/components/_menus.scss

@@ -41,7 +41,8 @@
       outline-color: $color-font-light;
 
       &:hover,
-      &:active {
+      &:active,
+      &.submenu:focus {
         background-color: transparentize($color-font-light, 0.7);
       }
     }
@@ -58,7 +59,8 @@
       outline-color: $color-font;
 
       &:hover,
-      &:active {
+      &:active,
+      &.submenu:focus {
         background-color: transparentize($color-font, 0.85);
       }
     }
@@ -69,6 +71,12 @@
   }
 }
 
+.submenu .fa-caret-down {
+  position: relative;
+  top: 2px;
+  font-size:0.8em;
+}
+
 .toolbar {
   flex-direction: row;
   padding: $lineheight_rel/4;
@@ -82,6 +90,7 @@
 
   li {
     text-align: center;
+    position: relative;
 
     a,
     span,
@@ -93,6 +102,32 @@
       padding-left: $lineheight_rel/2;
       padding-right: $lineheight_rel/2;
     }
+
+    ul {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      transition: all 0.5s ease;
+      margin-top: 0rem;
+      left: 0;
+      display: none;
+      padding:0.33rem;
+    }
+
+    &:hover ul,
+    ul:hover,
+    &:focus-within ul {
+      visibility: visible;
+      opacity: 1;
+      display: flex;
+      flex-direction: column;
+      border-radius: $card-radius;
+      box-shadow:0px 1px 1px rgba(0,0,0,0.2);
+      width: max-content;
+      li {
+        text-align:left;
+      }
+    }
   }
 }
 

scss/custom/_mobile.scss

@@ -6,6 +6,7 @@
   height:100vh;
   transition: left 0.2s;
   padding: 1rem;
+  overflow: scroll;
   &.shown {
     left:0;
   }

style.css

@@ -1417,18 +1417,23 @@ ul.card-list, .card > ul {
   .menu.fg-light a, .fg-light .menu a {
     color: #fefefe;
     outline-color: #fefefe; }
-    .menu.fg-light a:hover, .menu.fg-light a:active, .fg-light .menu a:hover, .fg-light .menu a:active {
+    .menu.fg-light a:hover, .menu.fg-light a:active, .menu.fg-light a.submenu:focus, .fg-light .menu a:hover, .fg-light .menu a:active, .fg-light .menu a.submenu:focus {
       background-color: rgba(254, 254, 254, 0.3); }
   .menu.fg-light input, .fg-light .menu input {
     outline-color: #fefefe; }
   .menu.fg-dark a, .fg-dark .menu a {
     color: #212529;
     outline-color: #212529; }
-    .menu.fg-dark a:hover, .menu.fg-dark a:active, .fg-dark .menu a:hover, .fg-dark .menu a:active {
+    .menu.fg-dark a:hover, .menu.fg-dark a:active, .menu.fg-dark a.submenu:focus, .fg-dark .menu a:hover, .fg-dark .menu a:active, .fg-dark .menu a.submenu:focus {
       background-color: rgba(33, 37, 41, 0.15); }
   .menu.fg-dark input, .fg-dark .menu input {
     outline-color: #212529; }
 
+.submenu .fa-caret-down {
+  position: relative;
+  top: 2px;
+  font-size: 0.8em; }
+
 .toolbar {
   flex-direction: row;
   padding: 0.4em; }
@@ -1437,7 +1442,8 @@ ul.card-list, .card > ul {
     flex-direction: row;
     flex-grow: 1; }
   .toolbar li {
-    text-align: center; }
+    text-align: center;
+    position: relative; }
     .toolbar li a,
     .toolbar li span,
     .toolbar li em,
@@ -1446,6 +1452,27 @@ ul.card-list, .card > ul {
       padding: 0.5333333333em;
       padding-left: 0.8em;
       padding-right: 0.8em; }
+    .toolbar li ul {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      transition: all 0.5s ease;
+      margin-top: 0rem;
+      left: 0;
+      display: none;
+      padding: 0.33rem; }
+    .toolbar li:hover ul,
+    .toolbar li ul:hover, .toolbar li:focus-within ul {
+      visibility: visible;
+      opacity: 1;
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+      width: max-content; }
+      .toolbar li:hover ul li,
+      .toolbar li ul:hover li, .toolbar li:focus-within ul li {
+        text-align: left; }
 
 .menu-divider,
 .menu ul h1,
@@ -2525,7 +2552,8 @@ footer {
   width: 100vw;
   height: 100vh;
   transition: left 0.2s;
-  padding: 1rem; }
+  padding: 1rem;
+  overflow: scroll; }
   #mobile-sidebar.shown {
     left: 0; }
   @media (min-width: 576px) {