[UI] Responsive hamburger nav for mobile
- _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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user