Better aside navigation responsivity

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"

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 }
 }

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>