From 942b9f4ca4be687ed83c31eb609e751863a95772 Mon Sep 17 00:00:00 2001
From: Sergiotarxz <sergiotarxz@posteo.net>
Date: Thu, 28 Sep 2023 18:03:21 +0200
Subject: [PATCH] "Improving" sidebar.

---
 public/css/styles.css                   | 43 ++++++++++++++------
 public/css/styles.scss                  | 53 ++++++++++++++++++-------
 templates/page/_mobile_foldable.html.ep |  2 +-
 3 files changed, 71 insertions(+), 27 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 68c9152..933f510 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -8,6 +8,19 @@ body {
   min-height: 100%;
   width: 100%;
   height: 100%; }
+  body span.round-center {
+    background: black;
+    color: white;
+    line-height: 100%;
+    aspect-ratio: 1 / 1;
+    display: inline-flex;
+    border-radius: 0.3em;
+    height: 0.7em;
+    font-size: 0.7em;
+    padding: 0.15em;
+    text-align: center;
+    justify-content: center;
+    align-items: center; }
   body div.search-overlay {
     overflow-y: scroll;
     display: none;
@@ -186,28 +199,34 @@ body {
       display: block; }
   body nav.mobile-foldable {
     position: fixed;
-    background: blueviolet;
-    color: #f2eb8c;
     left: 100%;
-    width: 80%;
+    width: 60%;
     top: 60px;
     height: calc(100% - 60px);
     z-index: 500;
-    transition: left 0.5s ease-in; }
+    transition: left 0.5s ease-in;
+    background: blueviolet; }
+    body nav.mobile-foldable > a:first-child {
+      margin-top: 30px; }
     body nav.mobile-foldable a {
       display: block;
       font-size: 1.1em;
-      width: 100%;
       height: auto;
       padding-left: auto;
-      padding-right: auto; }
-    body nav.mobile-foldable div.child-categories-mobile {
-      padding-left: 40px; }
-      body nav.mobile-foldable div.child-categories-mobile a {
-        font-size: 1em; }
+      padding-right: auto;
+      color: black;
+      background: #f2eb8c;
+      margin-top: 10px;
+      padding: 10px;
+      margin-left: 10px;
+      border-radius: 20px;
+      width: calc(100% - 20px - 20px); }
+    body nav.mobile-foldable div.child-categories-mobile a {
+      width: calc(100% - 50px - 20px);
+      margin-left: 40px;
+      font-size: 1em; }
   body nav.mobile-foldable.show {
-    display: block;
-    left: 20%; }
+    left: 40%; }
   body nav.mobile-shortcuts > a {
     display: flex;
     align-items: center;
diff --git a/public/css/styles.scss b/public/css/styles.scss
index 11a52b7..fa77cfc 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -8,12 +8,29 @@ $background-secondary: #635283;
 $color-secondary: #8eea6d;
 $accent-secondary: #fde68f;
 $primary-secondary: #590e11;
+$background_sidebar: #E2D1F9;
+$color_sidebar: #317773;
 
 html {
   height: 100%;
 }
 
 body {
+  span.round-center {
+    background: black;
+    color: white;
+    line-height: 100%;
+    aspect-ratio: 1 / 1;
+    display: inline-flex;
+    border-radius: 0.3em;
+    height: 0.7em;
+    font-size: 0.7em;
+    padding: 0.15em;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  }
+
   div.search-overlay {
     overflow-y: scroll;
     display: none;
@@ -270,46 +287,54 @@ body {
     height: calc(100% - 60px);
     z-index: 250;
     display: none;
+
     &.show {
-        display: block;
+      display: block;
     }
   }
 
   nav.mobile-foldable {
     position: fixed;
-    background: $background_div;
-    color: $color_div;
     left: 100%;
-    width: 80%;
+    width: 60%;
     top: 60px;
     height: calc(100% - 60px);
     z-index: 500;
-
-
     transition: left 0.5s ease-in;
+    background: $background_div;
+
+    & > a:first-child {
+      margin-top: 30px;
+    }
 
     a {
       //background: $color_div;
       //color: $background_div;
       display: block;
       font-size: 1.1em;
-      width: 100%;
       height: auto;
       padding-left: auto;
       padding-right: auto;
+      color: black;
+      background: $color_div;
+      margin-top: 10px;
+      padding: 10px;
+      margin-left: 10px;
+      border-radius: 20px;
+      width: calc(100% - 20px - 20px);
     }
+
     div.child-categories-mobile {
-        padding-left: 40px;
-        a {
-            font-size: 1em;
-        }
+      a {
+        width: calc(100% - 50px - 20px);
+        margin-left: 40px;
+        font-size: 1em;
+      }
     }
   }
 
   nav.mobile-foldable.show {
-    display: block;
-    left: 20%;
-    
+    left: 40%;
   }
 
   nav.mobile-shortcuts > a {
diff --git a/templates/page/_mobile_foldable.html.ep b/templates/page/_mobile_foldable.html.ep
index 7e147e8..d25af62 100644
--- a/templates/page/_mobile_foldable.html.ep
+++ b/templates/page/_mobile_foldable.html.ep
@@ -9,7 +9,7 @@ for my $category_key (sort {
     if (defined $category->{parent} || $category->{slug} eq 'index') {
         next;
     }
-    %><a href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><div class="child-categories-mobile"><% 
+    %><a href="<%= '/'.$category->{slug} %>"><span class="round-center">v</span> <%==$category->{menu_text}%></a><div class="child-categories-mobile"><% 
         for my $child_category ($category->{children}->@*) {
             %><a href="<%="/$child_category->{slug}"%>"><%==$child_category->{menu_text}%></a><%
         }%></div><%