From d541b3707ddd4abbb57db5e9c3a86cfd55c99895 Mon Sep 17 00:00:00 2001
From: Elias Mascheroni <eliasmgpy@gmail.com>
Date: Sun, 9 Aug 2026 19:17:04 -0300
Subject: [PATCH] refact: changes to navbar

---
 .../Home/Components/AccessControl.razor       |  18 +--
 .../Features/Home/Components/NavMenu.razor    |  23 ++--
 .../Home/Components/SearchInput.razor         |  10 +-
 src/LinkDotNet.Blog.Web/wwwroot/css/basic.css | 125 +++++++++++++++++-
 4 files changed, 150 insertions(+), 26 deletions(-)

diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/AccessControl.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/AccessControl.razor
index 1c9044cf..c4a96dd7 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/AccessControl.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/AccessControl.razor
@@ -5,11 +5,11 @@
 <AuthorizeView>
     <Authorized>
         <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
+            <a class="nav-link dropdown-toggle" href="#" id="adminDropdown" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
-                <i class="user-tie"></i> Admin
+                <i class="user-tie"></i> <span class="nav-label">Admin</span>
             </a>
-            <ul class="dropdown-menu ps-0" aria-labelledby="navbarDropdown">
+            <ul class="dropdown-menu ps-0" aria-labelledby="adminDropdown">
                 <li><h6 class="dropdown-header">Blog posts</h6></li>
                 <li><a class="dropdown-item" href="create">Create new</a></li>
                 <li><a class="dropdown-item" href="draft">Show drafts</a></li>
@@ -27,21 +27,21 @@
         @if (authorName is not null)
         {
             <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    <i class="user-tie"></i> @authorName
+                <a class="nav-link dropdown-toggle" href="#" id="authorDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                    <i class="user-tie"></i> <span class="nav-label">@authorName</span>
                 </a>
-                <ul class="dropdown-menu ps-0" aria-labelledby="navbarDropdown">
-                    <li><a class="nav-link" href="logout?redirectUri=@CurrentUri"><i class="lock"></i> Log out</a></li>
+                <ul class="dropdown-menu ps-0" aria-labelledby="authorDropdown">
+                    <li><a class="dropdown-item" href="logout?redirectUri=@CurrentUri"><i class="lock"></i> Log out</a></li>
                 </ul>
             </li>
         }
         else
         {
-            <li class="nav-item"><a class="nav-link" href="/logout?redirectUri=@CurrentUri"><i class="lock"></i> Log out</a></li>
+            <li class="nav-item"><a class="nav-link" href="/logout?redirectUri=@CurrentUri"><i class="lock"></i> <span class="nav-label">Log out</span></a></li>
         }
     </Authorized>
     <NotAuthorized>
-        <li class="nav-item"><a class="nav-link" href="/login?redirectUri=@CurrentUri" rel="nofollow"><i class="unlocked"></i> Log in</a></li>
+        <li class="nav-item"><a class="nav-link" href="/login?redirectUri=@CurrentUri" rel="nofollow"><i class="unlocked"></i> <span class="nav-label">Log in</span></a></li>
     </NotAuthorized>
 </AuthorizeView>
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
index ba2497d2..bc48c132 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor
@@ -5,7 +5,7 @@
 @inject NavigationManager NavigationManager
 @implements IDisposable
 
-<nav class="navbar navbar-expand-lg navbar-light w-100">
+<nav class="navbar navbar-expand-lg w-100">
     <div class="container-fluid">
         @if (!string.IsNullOrEmpty(Configuration.Value.BlogBrandUrl))
         {
@@ -23,16 +23,16 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5 column-gap-4">
-	            <li><a class="nav-link" href="/"><i class="home"></i> Home</a></li>
-	            <li><a class="nav-link" href="/archive"><i class="books"></i> Archive</a></li>
-	            <li><a class="nav-link" href="/bookmarks"><i class="bookmark"></i> Bookmarks</a>
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5">
+	            <li class="nav-item"><a class="nav-link" href="/"><i class="home"></i> <span class="nav-label">Home</span></a></li>
+	            <li class="nav-item"><a class="nav-link" href="/archive"><i class="books"></i> <span class="nav-label">Archive</span></a></li>
+	            <li class="nav-item"><a class="nav-link" href="/bookmarks"><i class="bookmark"></i> <span class="nav-label">Bookmarks</span></a>
 		        </li>
 	            @if (Configuration.Value.IsAboutMeEnabled)
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="AboutMe">
-                            <i class="profile"></i> About me
+                            <i class="profile"></i> <span class="nav-label">About me</span>
                         </a>
                     </li>
                 }
@@ -41,14 +41,14 @@
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="SupportMe">
-                            <i class="coin-dollar"></i> Support me
+                            <i class="coin-dollar"></i> <span class="nav-label">Support me</span>
                         </a>
                     </li>
                 }
 
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="rssDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="RSS Selector">
-                        <i class="rss2"></i> RSS
+                        <i class="rss2"></i> <span class="nav-label">RSS</span>
                     </a>
                     <ul class="dropdown-menu" aria-labelledby="rssDropdown">
 	                    <li><a class="dropdown-item" href="/feed.rss" target="_blank" aria-label="RSS with All Posts">All Posts (Summary)</a></li>
@@ -62,9 +62,10 @@
                 @if (Configuration.Value.EnableTagDiscoveryPanel)
                 {
                     <li class="nav-item d-flex align-items-center me-lg-2 mb-2 mb-lg-0">
-                        <a class="nav-link d-flex align-items-center justify-content-center" @onclick="ToggleTagDiscoveryPanel"
-                           style="font-family: 'icons'; font-weight: 900; cursor: pointer;"
-                           title="Discover new topics"> &#xE936; </a>
+                        <button type="button" class="nav-icon-button" @onclick="ToggleTagDiscoveryPanel"
+                                title="Discover new topics" aria-label="Discover new topics">
+                            <i class="price-tags"></i>
+                        </button>
                     </li>
                 }
 
diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
index 06157e6d..da63746d 100644
--- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
+++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor
@@ -1,7 +1,9 @@
-<div class="search-bar">
-	<input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
-	       @onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
-	<button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
+<div class="search-bar-slot">
+	<div class="search-bar">
+		<input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
+		       @onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
+		<button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
+	</div>
 </div>
 
 
diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
index bcc9225d..ec786846 100644
--- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
+++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css
@@ -271,10 +271,119 @@ code {
 	font-size: 2.5rem;
 }
 
-::deep .navbar-nav li {
-	padding-left: 1rem;
+.navbar .navbar-nav {
+	column-gap: 12px;
+}
+
+.navbar .navbar-nav > li {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	white-space: nowrap;
 }
+
+.navbar .navbar-nav .nav-link {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: .15rem;
+	text-align: center;
+	padding: .25rem .35rem;
+}
+
+.navbar .navbar-nav .nav-link > i {
+	font-size: 1.15rem;
+	line-height: 1;
+}
+
+.navbar .nav-label {
+	font-size: .75rem;
+	line-height: 1.1;
+}
+
+.navbar .navbar-nav .dropdown-toggle {
+	position: relative;
+}
+
+.navbar .navbar-nav .dropdown-toggle .nav-label {
+	display: inline-flex;
+	align-items: center;
+	gap: .25rem;
+}
+
+.navbar .navbar-nav .dropdown-toggle::after {
+	position: absolute;
+	right: -.35rem;
+	bottom: .45rem;
+}
+
+.navbar .nav-icon-button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: .15rem;
+	padding: .25rem .35rem;
+	border: 0;
+	background: transparent;
+	color: var(--bs-navbar-color);
+	cursor: pointer;
+}
+
+.navbar .nav-icon-button:hover {
+	color: var(--bs-navbar-hover-color);
+}
+
+.navbar .nav-icon-button > i {
+	font-size: 1.15rem;
+	line-height: 1;
+}
+
+.navbar .navbar-nav .nav-link > svg {
+	display: block;
+}
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+	.navbar .nav-brand.ms-5 {
+		margin-left: 1rem !important;
+	}
+
+	.navbar .navbar-nav.me-5 {
+		margin-right: 1rem !important;
+	}
+
+	.navbar .navbar-nav .nav-link,
+	.navbar .nav-icon-button {
+		padding-left: .15rem;
+		padding-right: .15rem;
+	}
+
+	.navbar .barcode {
+		font-size: 2rem;
+	}
+}
+
+@media (max-width: 991.98px) {
+	.navbar .navbar-nav > li {
+		justify-content: flex-start;
+	}
+
+	.navbar .navbar-nav .nav-link,
+	.navbar .nav-icon-button {
+		flex-direction: row;
+		justify-content: flex-start;
+		gap: .5rem;
+	}
+
+	.navbar .nav-label {
+		font-size: 1rem;
+	}
+
+	.navbar .navbar-nav .dropdown-toggle::after {
+		position: static;
+	}
+}
 /*endregion */
 
 /*region Profile.razor */
@@ -535,6 +644,12 @@ code {
 /*#endregion */
 
 /*region SearchInput.razor */
+.search-bar-slot {
+	width: 170px;
+	display: flex;
+	justify-content: flex-end;
+}
+
 .search-bar {
 	border: 2px solid;
 	display: flex;
@@ -591,6 +706,12 @@ code {
 	z-index: initial;
 	max-width: 130px;
 }
+
+@media (max-width: 991.98px) {
+	.search-bar-slot {
+		width: 100%;
+	}
+}
 /*#endregion */
 
 /*#region ReadingIndicator.razor */