From e326987985b223770b74b0550f217ccd923324fe Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sat, 17 Aug 2024 22:36:34 +0300
Subject: [PATCH] Improve adaptivity of the navbar (fixes #45)

---
 sass/_nav.scss | 88 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 3 deletions(-)

diff --git a/sass/_nav.scss b/sass/_nav.scss
index 0b041fb..e0aaac7 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -10,6 +10,10 @@
 	background-color: var(--nav-bg);
 	max-width: 90%;
 
+	@media only screen and (max-width: 480px) {
+		position: static;
+	}
+
 	nav {
 		padding: 0.5rem;
 
@@ -51,6 +55,12 @@
 				line-height: 1.25;
 				list-style: none;
 
+				@media only screen and (max-width: 480px) {
+					&:not(#search, #language-switcher, #feed) {
+						width: 100%;
+					}
+				}
+
 				&#home {
 					position: relative;
 					margin-inline-end: 0.625rem;
@@ -67,6 +77,22 @@
 						:root[dir*="rtl"] & {
 							right: unset;
 							left: -0.5rem;
+
+							@media only screen and (max-width: 480px) {
+								left: -0.125rem;
+							}
+						}
+
+						@media only screen and (max-width: 480px) {
+							position: absolute;
+							top: unset;
+							right: unset;
+							bottom: -0.125rem;
+							left: -0.125rem;
+							background-color: var(--fg-muted-2);
+							width: calc(100% + 0.25rem);
+							height: max(1px, 0.0625em);
+							content: "";
 						}
 					}
 
@@ -77,6 +103,24 @@
 						&:hover {
 							color: var(--primary-color);
 						}
+
+						&.active {
+							background-color: var(--primary-color-alpha);
+							color: var(--primary-color);
+
+							&:hover {
+								background-color: var(--primary-color);
+								color: var(--contrast-color);
+							}
+
+							&::before {
+								display: none;
+							}
+						}
+					}
+
+					@media only screen and (max-width: 480px) {
+						margin-inline-end: 0;
 					}
 				}
 
@@ -115,21 +159,59 @@
 							right: 1.5rem;
 							left: 1.5rem;
 							transition: var(--transition);
-							border-bottom: 0.25rem solid var(--fg-muted-2);
-							border-radius: 0 0 0.25rem 0.25rem;
+							border-block-end: 0.25rem solid var(--fg-muted-2);
+							border-end-start-radius: 0.25rem;
+							border-end-end-radius: 0.25rem;
 							content: "";
+
+							@media only screen and (max-width: 480px) {
+								top: 0.25rem;
+								right: unset;
+								bottom: 0.25rem;
+								left: -0.5rem;
+								border-inline-end: 0.25rem solid var(--fg-muted-2);
+								border-block-end: none;
+								border-start-end-radius: 0.25rem;
+								border-end-start-radius: 0;
+								content: "";
+
+								:root[dir*="rtl"] & {
+									right: -0.5rem;
+									left: unset;
+								}
+							}
 						}
 
 						&:hover::before {
 							right: 1rem;
 							left: 1rem;
-							border-bottom: 0.25rem solid var(--primary-color);
+							border-block-end: 0.25rem solid var(--primary-color);
+
+							@media only screen and (max-width: 480px) {
+								top: 0;
+								right: unset;
+								bottom: 0;
+								left: -0.5rem;
+								border-inline-end: 0.25rem solid var(--primary-color);
+								border-block-end: none;
+								content: "";
+
+								:root[dir*="rtl"] & {
+									right: -0.5rem;
+									left: unset;
+								}
+							}
 						}
 
 						&:active::before {
 							border-radius: 0.25rem;
 						}
 					}
+
+					@media only screen and (max-width: 480px) {
+						width: 100%;
+						text-align: center;
+					}
 				}
 
 				&#search button,