From d2a7b18cb37d4c75d801928ba321d07ab5ee7e53 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 4 Jun 2026 15:06:44 +0330
Subject: [PATCH] [UI] Fix navbar bell Razor leak, add Settings link, tidy
 desktop bar

Wrap the bell label in a span so the conditional parses as Razor code instead of leaking as literal text (Persian word char before the at-sign triggered email detection). Bell is icon-only on desktop, label shows in the mobile dropdown. Add a Settings link to admin actions so the demo-mode page is reachable from the navbar. Tighten desktop nav/action spacing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/JobsMedical.Web/Pages/Shared/_Layout.cshtml |  3 ++-
 src/JobsMedical.Web/wwwroot/css/site.css        | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml b/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
index 967c78f..366de33 100644
--- a/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
+++ b/src/JobsMedical.Web/Pages/Shared/_Layout.cshtml
@@ -64,12 +64,13 @@
                         @if (User.IsInRole("Admin"))
                         {
                             <a class="nav-action" asp-page="/Admin/Overview">پنل مدیریت</a>
+                            <a class="nav-action" asp-page="/Admin/Settings">تنظیمات</a>
                         }
                         @if (User.IsInRole("FacilityAdmin"))
                         {
                             <a class="nav-action" asp-page="/Employer/Index">پنل کارفرما</a>
                         }
-                        <a class="nav-action bell-inline" asp-page="/Me/Notifications" title="اعلان‌ها">🔔 اعلان‌ها@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
+                        <a class="nav-action bell-inline" asp-page="/Me/Notifications" title="اعلان‌ها"><span class="bell-ico">🔔</span><span class="bell-label">اعلان‌ها</span>@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
                         <a class="nav-action" asp-page="/Me/Index">پنل کارجو</a>
                         <form method="post" asp-page="/Account/Logout" style="display:contents;">
                             <button type="submit" class="btn btn-outline btn-sm">خروج</button>
diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 3e0f9af..42a67b4 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -62,15 +62,19 @@ a { color: inherit; text-decoration: none; }
 
 /* nav + actions share a flex wrapper so the desktop layout is unchanged
    and the whole thing can collapse into a dropdown on mobile. */
-.nav-collapse { display: flex; align-items: center; gap: 28px; flex: 1; }
-.main-nav { display: flex; gap: 22px; margin-inline-start: 8px; flex: 1; }
-.main-nav a { color: var(--muted); font-weight: 600; transition: color .15s; }
+.nav-collapse { display: flex; align-items: center; gap: 18px; flex: 1; }
+.main-nav { display: flex; gap: 18px; margin-inline-start: 6px; flex: 1; }
+.main-nav a { color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; transition: color .15s; }
 .main-nav a:hover { color: var(--primary); }
-.header-actions { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
-.nav-action { font-weight: 600; color: var(--muted); transition: color .15s; }
+.header-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
+.nav-action { font-weight: 600; font-size: 15px; color: var(--muted); white-space: nowrap; transition: color .15s; }
 .nav-action:hover { color: var(--primary); }
 .btn-sm { padding: 7px 14px; font-size: 13px; }
 
+/* Bell: icon-only on desktop (label shows inside the mobile dropdown). */
+.bell-inline { display: inline-flex; align-items: center; gap: 6px; position: relative; font-size: 18px; }
+.bell-inline .bell-label { display: none; }
+
 /* Hamburger + mobile-only bell — hidden on desktop */
 .nav-burger, .bell-mobile { display: none; }
 .nav-burger {
@@ -279,7 +283,8 @@ label { font-size: 13px; }
     margin: 0; padding: 8px 14px 16px; border-top: 1px solid var(--line);
   }
   .nav-action { padding: 12px 6px; font-size: 15px; }
-  .bell-inline { display: flex; align-items: center; gap: 6px; }
+  .bell-inline { font-size: 15px; }
+  .bell-inline .bell-label { display: inline; }
   .header-actions .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 6px; }
 
   .cal { border-spacing: 4px; }