feat: add a mobile sidebar

Fixes #5

components/mobile-sidebar.php

@@ -0,0 +1,38 @@
+<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
+  <h1 class="align-center text-light">Menu principal</h1>
+  <div class="mb-1">
+    <?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
+  </div>
+  <ul>
+    <h2>Pages principal</h2>
+    <li>
+      <a href="<?php echo site_url(); ?>" class="menu-item">
+        <span><i class="fa fa-home"  aria-hidden="true"></i> Accueil</span>
+      </a>
+    </li>
+    <?php
+      $listmenu = get_nav_menu_locations();
+      $menu = wp_get_nav_menu_items($listmenu['top-navbar']);
+        foreach ($menu as $menuElement) {
+          echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
+        }
+      ?>
+  </ul>
+  <ul>
+    <h2>Liste des catégories</h2>
+    <?php
+      $categories = get_categories( array(
+        'orderby' => 'name',
+        'order'   => 'ASC'
+      ) );
+
+      foreach( $categories as $category ) {?>
+        <li>
+          <a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
+        </li>
+      <?php }
+    ?>
+  </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

@@ -1,5 +1,5 @@
 <div class="osd">
-  <div class="container menu toolbar fg-light d-block d-flex-sm">
+  <div class="container menu toolbar fg-light d-none d-flex-sm">
     <nav>
       <h2 class="sr-only">Menu des pages</h2>
       <ul>

components/sidebar/categories.php

@@ -1,4 +1,4 @@
-<section class="card head-secondary">
+<section class="card head-secondary d-block-sm d-none">
   <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</h2>
   <div class="menu fg-dark">
     <ul>

footer.php

@@ -1,9 +1,11 @@
 	  </div>
   </div>
 
+	<?php include(TEMPLATEPATH . '/components/mobile-sidebar.php'); ?>
 	<?php include(TEMPLATEPATH . '/components/footer-content.php'); ?>
     <?php wp_footer(); ?>
 	<script src="<?php echo get_template_directory_uri();?>/js/trim.js"></script>
 	<script src="<?php echo get_template_directory_uri();?>/js/prettylinks.js"></script>
+	<script src="<?php echo get_template_directory_uri();?>/js/mobile-sidebar.js"></script>
 </body>
 </html>

home.php

@@ -30,24 +30,5 @@
     }
   ?>
 
-  <nav class="container menu bg-light fg-dark categories d-block d-none-sm">
-  <h1 class="sr-only">Menu des catégories</h1>
-  <ul class="f-around">
-    <?php
-      $categories = get_categories( array(
-        'orderby' => 'name',
-        'order'   => 'ASC'
-      ) );
-
-      foreach( $categories as $category ) {?>
-        <li>
-          <a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><span><i class="fa fa-fw fa-folder"></i> <?php echo $category->name ?></span></a>
-        </li>
-      <?php }
-    ?>
-  </ul>
-</nav>
-
-
 </main>
 <?php get_footer();  ?>

js/mobile-sidebar.js

@@ -0,0 +1,10 @@
+document.getElementById('mobile-button').addEventListener('click', function () {
+  const sidebar = document.getElementById('mobile-sidebar');
+  if (sidebar.classList.contains('hidden')) {
+    sidebar.classList.remove('hidden');
+    sidebar.classList.add('shown');
+  } else {
+    sidebar.classList.remove('shown');
+    sidebar.classList.add('hidden');
+  }
+});

scss/_global.scss

@@ -5,4 +5,5 @@
 @import 'custom/global';
 @import 'custom/previews';
 @import 'custom/featured';
-@import 'custom/article';
+@import 'custom/article';
+@import 'custom/mobile';

scss/components/_menus.scss

@@ -96,12 +96,18 @@
   }
 }
 
-.menu-divider {
+.menu-divider,
+.menu ul h1,
+ul.menu h1,
+.menu h2,
+ul.menu h2 {
   position: relative;
   left: -$lineheight_quarter;
   font-weight: $fontweight_hyper;
   padding-top: $lineheight_quarter;
   padding-bottom: $lineheight_quarter;
+  font-size:1em;
+  line-height:$lineheight;
 }
 
 .menu-label {

scss/custom/_mobile.scss

@@ -0,0 +1,41 @@
+#mobile-sidebar {
+  position: fixed;
+  top:0;
+  left:-100vw;
+  width:100vw;
+  height:100vh;
+  transition: left 0.2s;
+  padding: 1rem;
+  &.shown {
+    left:0;
+  }
+
+  @include sm() {
+    display:none;
+  }
+}
+
+.menu-button {
+  position:fixed;
+  bottom: 24px;
+  right: 24px;
+  background-color:rgba(0,0,0,0.2);
+  color:$color-font-light;
+  padding:0.75em;
+  border:none;
+  font-size:1.2rem;
+  display:flex;
+  align-content: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border-radius:999px;
+  opacity: 0.75;
+
+  &:hover {
+    opacity:1;
+  }
+
+  @include sm() {
+    display: none;
+  }
+}

scss/utils/_display.scss

@@ -1,12 +1,12 @@
-.d-block {
+.d-none {
     @include responsive() {
-        display: block!important;
+        display: none !important;
     }
 }
 
-.d-none {
+.d-block {
     @include responsive() {
-        display: none!important;
+        display: block!important;
     }
 }
 

style.css

@@ -1450,12 +1450,18 @@ ul.card-list, .card > ul {
       padding-left: 0.8rem;
       padding-right: 0.8rem; }
 
-.menu-divider {
+.menu-divider,
+.menu ul h1,
+ul.menu h1,
+.menu h2,
+ul.menu h2 {
   position: relative;
   left: -0.4rem;
   font-weight: 800;
   padding-top: 0.4rem;
-  padding-bottom: 0.4rem; }
+  padding-bottom: 0.4rem;
+  font-size: 1em;
+  line-height: 1.6rem; }
 
 .menu-label {
   border: 0px solid rgba(0, 0, 0, 0.3);
@@ -2495,23 +2501,6 @@ textarea {
 .f-between {
   justify-content: space-between; }
 
-.d-block {
-  display: block !important; }
-  @media (min-width: 576px) {
-    .d-block-sm {
-      display: block !important; } }
-  @media (min-width: 768px) {
-    .d-block-md {
-      display: block !important; } }
-  @media (min-width: 992px) {
-    .d-block-lg {
-      display: block !important; } }
-  @media (min-width: 1200px) {
-    .d-block-xl {
-      display: block !important; } }
-  @media (min-width: 1600px) {
-    .d-block-xxl {
-      display: block !important; } }
 .d-none {
   display: none !important; }
   @media (min-width: 576px) {
@@ -2529,6 +2518,23 @@ textarea {
   @media (min-width: 1600px) {
     .d-none-xxl {
       display: none !important; } }
+.d-block {
+  display: block !important; }
+  @media (min-width: 576px) {
+    .d-block-sm {
+      display: block !important; } }
+  @media (min-width: 768px) {
+    .d-block-md {
+      display: block !important; } }
+  @media (min-width: 992px) {
+    .d-block-lg {
+      display: block !important; } }
+  @media (min-width: 1200px) {
+    .d-block-xl {
+      display: block !important; } }
+  @media (min-width: 1600px) {
+    .d-block-xxl {
+      display: block !important; } }
 .d-flex {
   display: flex !important; }
   @media (min-width: 576px) {
@@ -2868,3 +2874,37 @@ footer {
 .article-meta .article-category .badge {
   display: inline-block;
   margin-bottom: 0.4rem; }
+
+#mobile-sidebar {
+  position: fixed;
+  top: 0;
+  left: -100vw;
+  width: 100vw;
+  height: 100vh;
+  transition: left 0.2s;
+  padding: 1rem; }
+  #mobile-sidebar.shown {
+    left: 0; }
+  @media (min-width: 576px) {
+    #mobile-sidebar {
+      display: none; } }
+.menu-button {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #fefefe;
+  padding: 0.75em;
+  border: none;
+  font-size: 1.2rem;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border-radius: 999px;
+  opacity: 0.75; }
+  .menu-button:hover {
+    opacity: 1; }
+  @media (min-width: 576px) {
+    .menu-button {
+      display: none; } }