[UI] Responsive hamburger nav for mobile
CI/CD / CI · dotnet build (push) Failing after 1m40s
CI/CD / Deploy · hamkadr (push) Has been skipped

- _Layout: wrap nav + actions in .nav-collapse; add CSS-only burger
  (checkbox toggle) + always-visible mobile bell next to it
- site.css: desktop layout unchanged; <=860px collapses nav into a
  full-width dropdown (column links, stacked actions), animated open
- Login (ورود) + logout render as full-width buttons in the menu
  instead of overflowing the header row

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 14:07:22 +03:30
parent 0c0449c2b9
commit 9e047c96ed
2 changed files with 88 additions and 36 deletions
+40 -26
View File
@@ -36,36 +36,50 @@
<span class="brand-mark">ه</span>
<span class="brand-text">همکادر</span>
</a>
<nav class="main-nav">
<a asp-page="/Index">خانه</a>
<a asp-page="/Shifts/Index">شیفت‌ها</a>
<a asp-page="/Jobs/Index">استخدام</a>
<a asp-page="/Calendar/Index">تقویم هفتگی</a>
<a asp-page="/Download">دریافت اپ</a>
<a asp-page="/Facilities/Index">مراکز درمانی</a>
<a asp-page="/Preferences/Index">علاقه‌مندی‌ها</a>
</nav>
<div class="header-actions">
@if (User.Identity?.IsAuthenticated == true)
{
@if (User.IsInRole("Admin"))
@* Always-visible bell on mobile (next to the burger) so notifications stay one tap away *@
@if (User.Identity?.IsAuthenticated == true)
{
<a class="bell-mobile" asp-page="/Me/Notifications" title="اعلان‌ها">🔔@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
}
<input type="checkbox" id="nav-toggle" class="nav-toggle" hidden />
<label for="nav-toggle" class="nav-burger" aria-label="باز/بستن منو">
<span></span><span></span><span></span>
</label>
<div class="nav-collapse">
<nav class="main-nav">
<a asp-page="/Index">خانه</a>
<a asp-page="/Shifts/Index">شیفت‌ها</a>
<a asp-page="/Jobs/Index">استخدام</a>
<a asp-page="/Calendar/Index">تقویم هفتگی</a>
<a asp-page="/Download">دریافت اپ</a>
<a asp-page="/Facilities/Index">مراکز درمانی</a>
<a asp-page="/Preferences/Index">علاقه‌مندی‌ها</a>
</nav>
<div class="header-actions">
@if (User.Identity?.IsAuthenticated == true)
{
<a asp-page="/Admin/Overview" style="margin-inline-end:14px; font-weight:600;">پنل مدیریت</a>
@if (User.IsInRole("Admin"))
{
<a class="nav-action" asp-page="/Admin/Overview">پنل مدیریت</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" 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>
</form>
}
@if (User.IsInRole("FacilityAdmin"))
else
{
<a asp-page="/Employer/Index" style="margin-inline-end:14px; font-weight:600;">پنل کارفرما</a>
<a class="btn btn-outline btn-sm" asp-page="/Account/Login">ورود</a>
}
<a asp-page="/Me/Notifications" title="اعلان‌ها" style="margin-inline-end:12px; position:relative; font-size:18px;">🔔@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
<a asp-page="/Me/Index" style="margin-inline-end:10px; font-weight:600;">پنل کارجو</a>
<form method="post" asp-page="/Account/Logout" style="display:inline;">
<button type="submit" class="btn btn-outline" style="padding:7px 14px;">خروج</button>
</form>
}
else
{
<a class="btn btn-outline" asp-page="/Account/Login">ورود</a>
}
</div>
</div>
</div>
</header>