From 6447a80b2b884959eb7ec2a908989e9bd49fb765 Mon Sep 17 00:00:00 2001
From: sergiotarxz <sergiotarxz@posteo.net>
Date: Mon, 14 Nov 2022 03:56:36 +0100
Subject: [PATCH] Fixing mobile version menu.

---
 public/css/styles.scss            | 9 ++++++---
 templates/layouts/default.html.ep | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/public/css/styles.scss b/public/css/styles.scss
index f8d6a23..081cc35 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -190,15 +190,18 @@ body {
 				}
 			}
 			a.menu-expand {
-				position: relative;
-				float: right;
+				padding-bottom: 9px;
 			}
 		}
 
 		nav.mobile-shortcuts {
 			position: fixed;
-			background: $background_div;
+			display: flex;
 			width: 100%;
+			div {
+				width: 65%;
+				background: $background_div;
+			}
 		}
 		nav.desktop {
 			display: none;
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 8c777de..a7fd079 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -30,9 +30,12 @@
 			%></nav>
 		<nav class="mobile-shortcuts">
 			<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
+			<div></div>
 			<a href="#mobile-foldable" class="menu-expand"><img class="open-menu-icon" src="/img/menu.png" alt="Expandir el menú."/></a>
 		</nav>
-		<nav class="mobile-foldable" id="mobile-foldable"><% for my $category_key (sort {
+		<nav class="mobile-foldable" id="mobile-foldable"><% 
+			   my $first = 1;
+		           for my $category_key (sort {
 			       $categories->{$a}{priority} <=> $categories->{$b}{priority} 
 			   } keys %$categories) {
 				   my $category = $categories->{$category_key};