source: KernelRecordsMVC.Web/Views/Shared/_Layout.cshtml@ 595d2e5

main
Last change on this file since 595d2e5 was 595d2e5, checked in by mmilevski <markomilevski3@…>, 4 weeks ago

Various UI bugfixes.
  • Property mode set to 100644
File size: 13.9 KB
Line 
1@using Microsoft.AspNetCore.Http
2@using Microsoft.EntityFrameworkCore
3@using KernelRecordsMVC.Infrastructure.Data
4@using KernelRecordsMVC.Domain.Enums
5@inject KernelRecordsContext DbContext
6
7@{
8 long cartCount = 0;
9
10 var sessionUserId = Context.Session.GetInt32("UserId");
11
12 if (sessionUserId.HasValue)
13 {
14 var userId = (long)sessionUserId.Value;
15
16 cartCount = await DbContext.OrderProducts
17 .Where(op =>
18 op.Order.UserId == userId &&
19 op.Order.Status == OrderStatusType.PENDING)
20 .SumAsync(op => (long?)op.Quantity) ?? 0;
21 }
22}
23
24<!DOCTYPE html>
25<html lang="en">
26<head>
27 <meta charset="utf-8" />
28 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
29
30 <title>@ViewData["Title"] - Kernel Records</title>
31
32 <link rel="stylesheet"
33 href="~/css/site.css"
34 asp-append-version="true" />
35</head>
36
37<body>
38
39<header class="site-header">
40
41 <!-- =====================================================
42 MAIN NAVBAR
43 ===================================================== -->
44
45 <nav class="navbar">
46
47 <div class="navbar-container">
48
49 <!-- LOGO -->
50
51 <a asp-controller="Home"
52 asp-action="Index"
53 class="navbar-brand logo-brand">
54
55 <img src="~/images/logo.png"
56 asp-append-version="true"
57 alt="Kernel Records"
58 class="site-logo" />
59
60 </a>
61
62
63 <!-- MOBILE MENU BUTTON -->
64
65 <button class="mobile-menu-button"
66 type="button"
67 aria-label="Toggle navigation"
68 onclick="toggleMobileMenu()">
69 ☰
70 </button>
71
72
73 <!-- NAVBAR CONTENT -->
74
75 <div class="navbar-content"
76 id="navbarContent">
77
78 <!-- =================================================
79 MAIN NAVIGATION
80 ================================================= -->
81
82 <ul class="nav-links">
83
84 <li>
85 <a asp-controller="Release"
86 asp-action="Index">
87 Browse
88 </a>
89 </li>
90
91 <li>
92 <a asp-controller="TopSellers"
93 asp-action="Index">
94 Top Sellers
95 </a>
96 </li>
97
98 <li>
99 <a asp-controller="Artist"
100 asp-action="Index">
101 Artists
102 </a>
103 </li>
104
105 <li class="nav-dropdown">
106
107 <a href="#"
108 class="dropdown-toggle">
109 Genres
110 <span class="arrow">⌄</span>
111 </a>
112
113 <div class="dropdown-menu">
114
115 <a asp-controller="Release"
116 asp-action="Index"
117 asp-route-genre="Rock">
118 Rock
119 </a>
120
121 <a asp-controller="Release"
122 asp-action="Index"
123 asp-route-genre="Pop">
124 Pop
125 </a>
126
127 <a asp-controller="Release"
128 asp-action="Index"
129 asp-route-genre="Hip-Hop">
130 Hip-Hop
131 </a>
132
133 <a asp-controller="Release"
134 asp-action="Index"
135 asp-route-genre="Jazz">
136 Jazz
137 </a>
138
139 <a asp-controller="Release"
140 asp-action="Index"
141 asp-route-genre="Electronic">
142 Electronic
143 </a>
144
145 <a asp-controller="Release"
146 asp-action="Index">
147 All Genres
148 </a>
149
150 </div>
151
152 </li>
153
154 <li>
155 <a asp-controller="Sale"
156 asp-action="Index"
157 class="nav-sale">
158 Sale
159 </a>
160 </li>
161
162 </ul>
163
164
165 <!-- =================================================
166 SEARCH
167 ================================================= -->
168
169 <form class="navbar-search"
170 asp-controller="Release"
171 asp-action="Index"
172 method="get">
173
174 <input type="text"
175 name="search"
176 placeholder="Search releases..."
177 autocomplete="off" />
178
179 <button type="submit"
180 aria-label="Search">
181 <span>⌕</span>
182 </button>
183
184 </form>
185
186
187 <!-- =================================================
188 RIGHT SIDE ACTIONS
189 ================================================= -->
190
191 <div class="navbar-actions">
192
193 <!-- WISHLIST -->
194
195 <a class="nav-icon"
196 asp-controller="Wishlist"
197 asp-action="Index"
198 title="Wishlist">
199
200 <span class="icon">♡</span>
201
202 <span class="icon-label">
203 Wishlist
204 </span>
205
206 </a>
207
208
209 <!-- CART -->
210
211 <a class="nav-icon nav-cart-link"
212 asp-controller="Order"
213 asp-action="Cart"
214 title="Shopping Cart">
215
216 <span class="nav-cart-icon-wrap">
217
218 <span class="icon cart-icon">
219 🛒
220 </span>
221
222 @if (cartCount > 0)
223 {
224 <span class="nav-cart-count"
225 aria-label="@cartCount item(s) in cart">
226 @(cartCount > 99 ? "99+" : cartCount.ToString())
227 </span>
228 }
229
230 </span>
231
232 <span class="icon-label">
233 Cart
234 </span>
235
236 </a>
237
238
239 <!-- ACCOUNT -->
240
241 @if (Context.Session.GetInt32("UserId") != null)
242 {
243 <div class="account-dropdown">
244
245 <button class="account-button"
246 type="button">
247
248 <span class="user-icon">●</span>
249
250 <span class="account-name">
251 @Context.Session.GetString("Username")
252 </span>
253
254 <span class="arrow">⌄</span>
255
256 </button>
257
258 <div class="account-menu">
259
260 <a asp-controller="Account"
261 asp-action="Profile">
262 <span>👤</span>
263 My Profile
264 </a>
265
266 <a asp-controller="Order"
267 asp-action="Cart">
268 <span>📦</span>
269 My Orders
270 </a>
271
272 <a asp-controller="Wishlist"
273 asp-action="Index">
274 <span>♡</span>
275 My Wishlist
276 </a>
277
278 @if (Context.Session.GetString("Role") == "Admin")
279 {
280 <div class="menu-divider"></div>
281
282 <a asp-controller="Admin"
283 asp-action="Index"
284 class="admin-link">
285 <span>⚙</span>
286 Admin Dashboard
287 </a>
288 }
289
290 <div class="menu-divider"></div>
291
292 <form asp-controller="Account"
293 asp-action="Logout"
294 method="post">
295
296 @Html.AntiForgeryToken()
297
298 <button type="submit"
299 class="logout-button">
300 <span>↪</span>
301 Logout
302 </button>
303
304 </form>
305
306 </div>
307
308 </div>
309 }
310 else
311 {
312 <div class="auth-buttons">
313
314 <a asp-controller="Account"
315 asp-action="Login"
316 class="login-button">
317 Login
318 </a>
319
320 <a asp-controller="Account"
321 asp-action="Register"
322 class="register-button">
323 Register
324 </a>
325
326 </div>
327 }
328
329 </div>
330
331 </div>
332
333 </div>
334
335 </nav>
336
337
338 <!-- =====================================================
339 ANNOUNCEMENT BAR
340 ===================================================== -->
341
342 <div class="announcement-bar">
343
344 <span>
345 FREE SHIPPING ON ORDERS OVER $100
346 </span>
347
348 </div>
349
350
351</header>
352
353
354<!-- =========================================================
355 MAIN CONTENT
356 ========================================================= -->
357
358<main class="main-content">
359 @RenderBody()
360</main>
361
362
363<!-- =========================================================
364 FOOTER
365 ========================================================= -->
366
367<footer class="site-footer">
368
369 <div class="footer-container">
370
371 <div class="footer-brand">
372
373 <div class="footer-logo">
374 KERNEL RECORDS
375 </div>
376
377 <p>
378 Your destination for vinyl, CDs and cassettes.
379 </p>
380
381 </div>
382
383
384 <div class="footer-column">
385
386 <h4>Shop</h4>
387
388 <a asp-controller="Release"
389 asp-action="Index">
390 Releases
391 </a>
392
393 <a asp-controller="Release"
394 asp-action="Index">
395 New Releases
396 </a>
397
398 <a asp-controller="Artist"
399 asp-action="Index">
400 Artists
401 </a>
402
403 </div>
404
405
406 <div class="footer-column">
407
408 <h4>Account</h4>
409
410 @if (Context.Session.GetInt32("UserId") != null)
411 {
412 <a asp-controller="Account"
413 asp-action="Profile">
414 My Profile
415 </a>
416
417 <a asp-controller="Order"
418 asp-action="Cart">
419 My Orders
420 </a>
421
422 <a asp-controller="Wishlist"
423 asp-action="Index">
424 Wishlist
425 </a>
426 }
427 else
428 {
429 <a asp-controller="Account"
430 asp-action="Login">
431 Login
432 </a>
433
434 <a asp-controller="Account"
435 asp-action="Register">
436 Register
437 </a>
438 }
439
440 </div>
441
442
443 <div class="footer-column">
444
445 <h4>Help</h4>
446
447 <a href="#">
448 Shipping
449 </a>
450
451 <a href="#">
452 Returns
453 </a>
454
455 <a href="#">
456 Contact
457 </a>
458
459 </div>
460
461 </div>
462
463
464 <div class="footer-bottom">
465
466 <span>
467 © @DateTime.Now.Year Kernel Records
468 </span>
469
470 <span>
471 All rights reserved.
472 </span>
473
474 </div>
475
476</footer>
477
478
479<!-- =========================================================
480 MOBILE NAVIGATION SCRIPT
481 ========================================================= -->
482
483<script>
484 function toggleMobileMenu()
485 {
486 const menu =
487 document.getElementById("navbarContent");
488
489 menu.classList.toggle("mobile-open");
490 }
491
492 document.addEventListener("click", function (event)
493 {
494 const menu =
495 document.getElementById("navbarContent");
496
497 const button =
498 document.querySelector(".mobile-menu-button");
499
500 if (!menu || !button)
501 return;
502
503 if (!menu.contains(event.target) &&
504 !button.contains(event.target))
505 {
506 menu.classList.remove("mobile-open");
507 }
508 });
509</script>
510
511@await RenderSectionAsync(
512 "Scripts",
513 required: false)
514
515</body>
516</html>
Note: See TracBrowser for help on using the repository browser.