From 6ab61936621f36c9b6a6c8557dc3d46371a7dbcc Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Mon, 6 Jun 2022 23:19:09 +0200
Subject: [PATCH] Better aside navigation responsivity

---
 config.toml          |  3 ++-
 sass/style.scss      | 15 +++++++++++++++
 templates/index.html |  9 +++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/config.toml b/config.toml
index 1e40ec4..4bc6d9c 100644
--- a/config.toml
+++ b/config.toml
@@ -19,7 +19,8 @@ smart_punctuation = true
 nav = [
 	{title = "Index", path = "/"},
 	{title = "About", path = "/about/"},
-	{title = "All posts", path = "/posts/"}
+	{title = "Posts", path = "/posts/"},
+	{title = "Categories", path = "/categories/", mobile_only = true}
 ]
 latest_posts_count = 3
 repository_url = "https://git.microlab.space/em/em.0x45.cz"
diff --git a/sass/style.scss b/sass/style.scss
index 621386d..119c46c 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -99,6 +99,7 @@ aside {
 				text-decoration: none;
 			}
 		}
+		li.mobile-only { display: none }
 	}
 }
 
@@ -195,5 +196,19 @@ a {
 }
 
 @media screen and (max-width: 50rem) {
+
 	.grid { grid-template-columns: auto }
+
+	aside {
+		ul { display: none }
+		ul.nav {
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
+		}
+		ul li.mobile-only { display: list-item }
+		span.title { display: none }
+	}
+
+	header, aside { margin-bottom: 3rem }
 }
diff --git a/templates/index.html b/templates/index.html
index 257c62a..23edb2b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,9 +22,14 @@
 	</header>
 	<div class="wrap grid">
 		<aside>
-			<ul>
+			<span class="title">Navigation</span>
+			<ul class="nav">
 				{% for item in config.extra.nav %}
-					<li><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
+					<li
+						{% if item.mobile_only %}
+							class="mobile-only"
+						{% endif %}
+					><a href="{{ get_url(path=item.path, trailing_slash=true) }}">{{ item.title }}</a></li>
 				{% endfor %}
 			</ul>
 			<span class="title">Categories</span>