fix: better mobile handling

Fixes #42
Fixes #41

components/footer-content.php

@@ -10,6 +10,12 @@
 
       }
       ?>
+      <li class="social-li">
+        <a class="social-link" href="<?php bloginfo('rss2_url'); ?>">
+          <i class="fa fa-fw fa-rss" aria-hidden="true"></i>
+          <span class='sr-only'>Flux RSS du site</span>
+        </a>
+      </li>
       <li class="social-li">
         <a class="social-link" href="https://kazhnuz.space/links">
           <i class="fa fa-fw fa-ellipsis-h" aria-hidden="true"></i>

components/mobile-sidebar.php

@@ -18,21 +18,37 @@
         }
       ?>
   </ul>
+
+  <?php
+  $parent_categories = get_categories( array(
+    'orderby' => 'slug',
+    'order'   => 'ASC',
+    'parent'  => 0
+  ) );
+
+  foreach( $parent_categories as $parent_category ) {
+?>
   <ul>
-    <h2>Liste des catégories</h2>
+    <h2><?php echo $parent_category->name ?></h2>
     <?php
       $categories = get_categories( array(
-        'orderby' => 'name',
+        'orderby' => 'slug',
-        'order'   => 'ASC'
+        'order'   => 'ASC',
+        'parent'  => $parent_category->term_id
       ) );
 
-      foreach( $categories as $category ) {?>
+      foreach( $categories as $category ) {
-        <li>
+        if ($category->slug != "chapters") {
-          <a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
+          echo "<!-- " . get_category_link($category->term_id) . " -->";
-        </li>
+          echo '<li><a class="menu-element" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
-      <?php }
+          }
+      }
     ?>
   </ul>
+      
+<?php      
+  }
+?>
   <ul>
     <h2>Pages</h2>
     <?php

components/navbar-pages.php

@@ -1,4 +1,4 @@
-<nav class="container menu toolbar flex-that fg-light">
+<nav class="container menu toolbar flex-that fg-light d-none d-flex-sm">
   <h2 class="sr-only">Menu des pages</h2>
   <ul>
     <li>
@@ -20,7 +20,7 @@
       $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="btn btn-navbar">'. $menuElement->title . '</a></li>';
+          echo '<li class="d-none d-block-sm"><a href="' . $menuElement->url . '" class="btn btn-navbar">'. $menuElement->title . '</a></li>';
         }
       ?>
     <li>

components/sidebar/categories.php

@@ -7,7 +7,7 @@
 
   foreach( $parent_categories as $parent_category ) {
 ?>
-    <section class="card head-primary">
+    <section class="card head-primary d-none d-block-sm">
       <h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> <?php echo $parent_category->name ?></h2>
       <div class="menu fg-dark">
         <ul>

page-plan.php

@@ -26,19 +26,40 @@
           <?php wp_list_pages( 'sort_column=menu_order&depth=1&title_li=' ) ?>
         </ul>
       </section>
+
       <section class="mb-1">
         <h2>Catégories</h2>
-        <ul>
-          <?php
-          $categories = get_categories( array(
-            'orderby' => 'name',
-            'order'   => 'ASC'
-          ) );
 
-          foreach( $categories as $category ) {
+        <?php
-            echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
+        $parent_categories = get_categories( array(
-          }?>
+          'orderby' => 'slug',
+          'order'   => 'ASC',
+          'parent'  => 0
+        ) );
+
+        foreach( $parent_categories as $parent_category ) {
+        ?>
+        <ul>
+          <h3><?php echo $parent_category->name ?></h3>
+          <?php
+            $categories = get_categories( array(
+              'orderby' => 'slug',
+              'order'   => 'ASC',
+              'parent'  => $parent_category->term_id
+            ) );
+
+            foreach( $categories as $category ) {
+              if ($category->slug != "chapters") {
+                echo "<!-- " . get_category_link($category->term_id) . " -->";
+                echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
+                }
+            }
+          ?>
         </ul>
+            
+        <?php      
+        }
+        ?>
       </section>
       <section class="mb-1">
         <h2>Archive des articles</h2>

scss/custom/_global.scss

@@ -35,10 +35,16 @@
     border-top: 6px solid get-color("dark");
     background-position: bottom center;
     background-repeat: repeat-x;
-    margin-bottom:1.5rem;
+    margin-bottom:-1.5rem;
+    padding-bottom:5rem;
     .fa {
       font-size: 1rem;
     }
+
+    @include sm() {
+      padding-bottom: 0;
+      margin-bottom: 1.5rem;
+    }
 }
 
 header h1 {

scss/custom/_mobile.scss

@@ -14,6 +14,8 @@
   @include sm() {
     display:none;
   }
+
+  z-index:10;
 }
 
 .menu-button {
@@ -30,10 +32,10 @@
   justify-content: center;
   aspect-ratio: 1;
   border-radius:999px;
-  opacity: 0.75;
+  z-index: 12;
 
   &:hover {
-    opacity:1;
+    background-color: $color-primary;
   }
 
   @include sm() {

style.css

@@ -2464,10 +2464,14 @@ textarea {
   border-top: 6px solid #002b36;
   background-position: bottom center;
   background-repeat: repeat-x;
-  margin-bottom: 1.5rem; }
+  margin-bottom: -1.5rem;
+  padding-bottom: 5rem; }
   #page-header .fa {
     font-size: 1rem; }
-
+  @media (min-width: 576px) {
+    #page-header {
+      padding-bottom: 0;
+      margin-bottom: 1.5rem; } }
 header h1 {
   border-style: none !important;
   font-weight: 800;
@@ -3032,7 +3036,8 @@ ul.social {
   height: 100vh;
   transition: left 0.2s;
   padding: 1rem;
-  overflow: scroll; }
+  overflow: scroll;
+  z-index: 10; }
   #mobile-sidebar.shown {
     left: 0; }
   @media (min-width: 576px) {
@@ -3052,9 +3057,9 @@ ul.social {
   justify-content: center;
   aspect-ratio: 1;
   border-radius: 999px;
-  opacity: 0.75; }
+  z-index: 12; }
   .menu-button:hover {
-    opacity: 1; }
+    background-color: #CB357D; }
   @media (min-width: 576px) {
     .menu-button {
       display: none; } }