Adding side bar menu.

public/css/styles.css

@@ -173,13 +173,27 @@ body {
         width: 60%;
         height: 60%; }
   body nav.mobile-foldable {
-    display: none;
+    position: fixed;
     background: blueviolet;
-    color: #f2eb8c; }
+    color: #f2eb8c;
+    left: -100%;
+    width: 100%;
+    top: 60px;
+    height: calc(100% - 60px);
+    display: block;
+    z-index: 500;
+    transition: left 0.5s ease-in; }
     body nav.mobile-foldable a {
-      display: block; }
+      display: block;
+      font-size: 1.7em;
+      width: 100%;
+      height: auto;
+      padding-left: auto;
+      padding-right: auto; }
+    body nav.mobile-foldable div.child-categories-mobile {
+      padding-left: 10%; }
   body nav.mobile-foldable.show {
-    display: block; }
+    left: 0; }
   body nav.mobile-shortcuts > a {
     display: flex;
     align-items: center;
@@ -431,6 +445,8 @@ body {
     max-width: 694px; } }
 
 @media (min-width: 1100px) {
+  body nav.mobile-foldable, body nav.mobile-foldable.show {
+    display: none; }
   body nav.mobile-shortcuts {
     display: none; }
   body div.search-in-page.active {
@@ -441,8 +457,6 @@ body {
     height: 80%;
     width: 90%;
     border: solid 1px black; }
-    body div.page-contents nav.mobile-foldable, body div.page-contents nav.mobile-foldable.show {
-      display: none; }
     body div.page-contents div.description.open-browser-container {
       margin-left: 0;
       margin-right: 0; }

public/css/styles.scss

@@ -24,39 +24,48 @@ body {
     z-index: 3;
     top: 0;
     flex-direction: column;
+
     &.active {
       display: flex;
     }
+
     div.search-results {
       margin: 7px;
+
       img {
         width: 75px;
       }
+
       div.search-result {
         div.row-title-url-image {
           display: flex;
           flex-direction: row;
+
           img {
             margin: 10px;
           }
         }
       }
     }
+
     div.bounding-search-bar {
       margin: 7px;
       width: calc(100% - 20px);
       border-radius: 10px;
       height: 60px;
       display: flex;
+
       div.search {
         width: calc(100% - 60px);
         height: 60px;
         margin-left: 0px;
         margin-right: 0px;
       }
+
       a.up, a.down {
         display: none;
       }
+
       a.exit-search {
         width: 60px;
         background: whitesmoke;
@@ -64,17 +73,20 @@ body {
         display: flex;
         justify-content: center;
         align-items: center;
+
         img {
           width: 60%;
         }
       }
     }
   }
+
   div.search {
     background: whitesmoke;
     margin-left: 10px;
     margin-right: 10px;
     display: flex;
+
     a.search-icon {
       height: calc(100% - 28px);
       align-self: center;
@@ -87,15 +99,18 @@ body {
       border: solid gray 1px;
       aspect-ratio: 1 / 1;
       width: auto;
+
       img {
         height: 80%;
         aspect-ratio: 1 / 1;
       }
     }
+
     div.fake-text-box {
       width: calc(100% - 60px);
       display: flex;
       align-items: center;
+
       input[type="text"] {
         font-size: 30px;
         width: 100%;
@@ -106,6 +121,7 @@ body {
       }
     }
   }
+
   p, h1, h2, h3, h4, a {
     font-family: 'arial';
   }
@@ -205,8 +221,8 @@ body {
       text-decoration: none;
       color: $color_div;
       margin: 0;
-
       background: $background_div;
+
       &:hover, &:focus {
         background: $color_div;
         color: $background_div;
@@ -226,12 +242,14 @@ body {
     a {
       vertical-align: middle;
     }
+
     a.search-icon {
       width: 60px;
       height: 60px;
       display: flex;
       align-items: center;
       justify-content: center;
+
       img {
         background: aliceblue;
         border-radius: 10px;
@@ -243,19 +261,36 @@ body {
   }
 
   nav.mobile-foldable {
-    display: none;
+    position: fixed;
     background: $background_div;
     color: $color_div;
+    left: -100%;
+    width: 100%;
+    top: 60px;
+    height: calc(100% - 60px);
+    display: block;
+    z-index: 500;
+
+    transition: left 0.5s ease-in;
 
     a {
       //background: $color_div;
       //color: $background_div;
       display: block;
+      font-size: 1.7em;
+      width: 100%;
+      height: auto;
+      padding-left: auto;
+      padding-right: auto;
+    }
+    div.child-categories-mobile {
+        padding-left: 10%;
     }
   }
 
   nav.mobile-foldable.show {
-    display: block;
+    left: 0;
+    
   }
 
   nav.mobile-shortcuts > a {
@@ -303,6 +338,7 @@ body {
   div.burguillos-logo-container.active > img {
     transform: rotate(-1.5707963268rad);
   }
+
   div.search-in-page {
     display: none;
     position: fixed;
@@ -312,6 +348,7 @@ body {
     align-items: center;
     background: $background_div;
     z-index: 3;
+
     a.up, a.down {
       display: flex;
       align-items: center;
@@ -326,19 +363,22 @@ body {
       border-radius: 10px;
       border: solid gray 1px;
       aspect-ratio: 1/1;
+
       img {
         height: 80%;
       }
-
     }
+
     span {
       color: whitesmoke;
       font-size: 25px;
     }
+
     &.active {
       display: flex;
     }
   }
+
   nav.mobile-shortcuts {
     position: fixed;
     display: flex;
@@ -389,9 +429,11 @@ body {
       border: 3px solid $background_div;
       border-collapse: collapse;
       width: 100%;
+
       tr:hover {
         background: $background_div;
         color: $color_div;
+
         th, td {
           border: 3px solid $color_div;
         }
@@ -626,10 +668,12 @@ body {
       a {
         font-size: 20px;
       }
+
       h3 {
         font-size: 25px;
       }
     }
+
     div.page-contents {
       div.description {
         div.articles {
@@ -643,6 +687,7 @@ body {
           }
         }
       }
+
       img {
         max-width: 694px;
       }
@@ -652,22 +697,24 @@ body {
 
 @media (min-width: 1100px) {
   body {
+    nav.mobile-foldable, nav.mobile-foldable.show {
+      display: none;
+    }
+
     nav.mobile-shortcuts {
       display: none;
     }
+
     div.search-in-page.active {
       display: none;
     }
 
     div.page-contents {
-      nav.mobile-foldable, nav.mobile-foldable.show {
-        display: none;
-      }
-
       div.description.open-browser-container {
         margin-left: 0;
         margin-right: 0;
       }
+
       div.description {
         margin-left: 10%;
         margin-right: 10%;
@@ -737,6 +784,7 @@ body {
       height: 120px;
       top: calc(100% - 120px);
     }
+
     div.page-contents {
       height: calc(100% - 60px - 120px);
     }

templates/layouts/default.html.ep

@@ -57,6 +57,7 @@
     </div>
     <div class="complete-container">
 %= include 'page/_mobile_menu', categories => $categories
+%= include 'page/_mobile_foldable', categories => $categories
         <div class="search-in-page">
             <a href="#" class="down">
                 <img alt="Next result" src="/img/down.svg"/>
@@ -67,7 +68,6 @@
         </div>
         <div class="page-contents">
 %= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
-%= include 'page/_mobile_foldable', categories => $categories
             <div class="description android open-browser-container">
                 <a href="<%= $current_route %>" class="open-in-browser">
                     <img alt="" src="/img/firefox.svg"/>

templates/page/_mobile_menu.html.ep

@@ -2,7 +2,7 @@
 <nav class="mobile-shortcuts">
     <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
 %= include 'page/_search_bar'
-    <a href="#mobile-foldable" class="menu-expand">
+    <a class="menu-expand">
         <img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
         <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
     </a>