source: KernelRecordsMVC.Web/Views/Shared/_Layout.cshtml@ d89d25b

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

Added few implementaions, minor UI changes.
  • Property mode set to 100644
File size: 13.7 KB
Line 
1@using Microsoft.AspNetCore.Http
2
3<!DOCTYPE html>
4
5<html lang="en">
6<head>
7 <meta charset="utf-8" />
8 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
10
11<title>@ViewData["Title"] - Kernel Records</title>
12
13<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
14
15
16</head>
17
18<body>
19
20<header class="site-header">
21
22
23<!-- =====================================================
24 MAIN NAVBAR
25 ===================================================== -->
26
27<nav class="navbar">
28
29 <div class="navbar-container">
30
31 <!-- LOGO -->
32
33 <a asp-controller="Home"
34 asp-action="Index"
35 class="navbar-brand logo-brand">
36
37 <img src="~/images/logo.png"
38 asp-append-version="true"
39 alt="Kernel Records"
40 class="site-logo" />
41
42 </a>
43
44
45 <!-- MOBILE MENU BUTTON -->
46
47 <button class="mobile-menu-button"
48 type="button"
49 aria-label="Toggle navigation"
50 onclick="toggleMobileMenu()">
51
52 ☰
53
54 </button>
55
56
57 <!-- NAVBAR CONTENT -->
58
59 <div class="navbar-content"
60 id="navbarContent">
61
62
63 <!-- =================================================
64 MAIN NAVIGATION
65 ================================================= -->
66
67 <ul class="nav-links">
68
69 <!-- Browse -->
70
71 <li>
72
73 <a asp-controller="Release"
74 asp-action="Index">
75
76 Browse
77
78 </a>
79
80 </li>
81
82
83 <!-- Top Sellers -->
84
85 <li>
86
87 <a asp-controller="TopSellers"
88 asp-action="Index">
89
90 Top Sellers
91
92 </a>
93
94 </li>
95
96
97 <!-- Artists -->
98
99 <li>
100
101 <a asp-controller="Artist"
102 asp-action="Index">
103
104 Artists
105
106 </a>
107
108 </li>
109
110
111 <!-- Genres -->
112
113 <li class="nav-dropdown">
114
115 <a href="#"
116 class="dropdown-toggle">
117
118 Genres
119
120 <span class="arrow">
121 ⌄
122 </span>
123
124 </a>
125
126
127 <div class="dropdown-menu">
128
129 <a asp-controller="Release"
130 asp-action="Index"
131 asp-route-genre="Rock">
132
133 Rock
134
135 </a>
136
137 <a asp-controller="Release"
138 asp-action="Index"
139 asp-route-genre="Pop">
140
141 Pop
142
143 </a>
144
145 <a asp-controller="Release"
146 asp-action="Index"
147 asp-route-genre="Hip-Hop">
148
149 Hip-Hop
150
151 </a>
152
153 <a asp-controller="Release"
154 asp-action="Index"
155 asp-route-genre="Jazz">
156
157 Jazz
158
159 </a>
160
161 <a asp-controller="Release"
162 asp-action="Index"
163 asp-route-genre="Electronic">
164
165 Electronic
166
167 </a>
168
169 <a asp-controller="Release"
170 asp-action="Index">
171
172 All Genres
173
174 </a>
175
176 </div>
177
178 </li>
179
180
181 <!-- Sale -->
182
183 <li>
184
185 <a asp-controller="Sale"
186 asp-action="Index"
187 class="nav-sale">
188
189 Sale
190
191 </a>
192
193 </li>
194
195 </ul>
196
197
198 <!-- =================================================
199 SEARCH
200 ================================================= -->
201
202 <form class="navbar-search"
203 asp-controller="Release"
204 asp-action="Index"
205 method="get">
206
207 <input type="text"
208 name="search"
209 placeholder="Search releases..."
210 autocomplete="off" />
211
212 <button type="submit"
213 aria-label="Search">
214
215 <span>
216 ⌕
217 </span>
218
219 </button>
220
221 </form>
222
223
224 <!-- =================================================
225 RIGHT SIDE ACTIONS
226 ================================================= -->
227
228 <div class="navbar-actions">
229
230
231 <!-- =================================================
232 WISHLIST
233 ================================================= -->
234
235 <a class="nav-icon"
236 asp-controller="Wishlist"
237 asp-action="Index"
238 title="Wishlist">
239
240 <span class="icon">
241 ♡
242 </span>
243
244 <span class="icon-label">
245 Wishlist
246 </span>
247
248 </a>
249
250
251 <!-- =================================================
252 CART
253 ================================================= -->
254
255 <a class="nav-icon"
256 asp-controller="Order"
257 asp-action="Cart"
258 title="Shopping Cart">
259
260 <span class="icon cart-icon">
261 🛒
262 </span>
263
264 <span class="icon-label">
265 Cart
266 </span>
267
268 </a>
269
270
271 <!-- =================================================
272 ACCOUNT
273 ================================================= -->
274
275 @if (Context.Session.GetInt32("UserId") != null)
276 {
277
278 <!-- LOGGED IN -->
279
280 <div class="account-dropdown">
281
282
283 <button class="account-button"
284 type="button">
285
286 <span class="user-icon">
287 ●
288 </span>
289
290 <span class="account-name">
291
292 @Context.Session.GetString("Username")
293
294 </span>
295
296 <span class="arrow">
297 ⌄
298 </span>
299
300 </button>
301
302
303 <!-- ACCOUNT MENU -->
304
305 <div class="account-menu">
306
307
308 <!-- PROFILE -->
309
310 <a asp-controller="Account"
311 asp-action="Profile">
312
313 <span>
314 👤
315 </span>
316
317 My Profile
318
319 </a>
320
321
322 <!-- ORDERS -->
323
324 <a asp-controller="Order"
325 asp-action="Cart">
326
327 <span>
328 📦
329 </span>
330
331 My Orders
332
333 </a>
334
335
336 <!-- WISHLIST -->
337
338 <a asp-controller="Wishlist"
339 asp-action="Index">
340
341 <span>
342 ♡
343 </span>
344
345 My Wishlist
346
347 </a>
348
349
350 <!-- ADMIN -->
351
352 @if (Context.Session.GetString("Role") == "Admin")
353 {
354
355 <div class="menu-divider"></div>
356
357
358 <a asp-controller="Admin"
359 asp-action="Index"
360 class="admin-link">
361
362 <span>
363 ⚙
364 </span>
365
366 Admin Dashboard
367
368 </a>
369
370 }
371
372
373 <div class="menu-divider"></div>
374
375
376 <!-- LOGOUT -->
377
378 <form asp-controller="Account"
379 asp-action="Logout"
380 method="post">
381
382 @Html.AntiForgeryToken()
383
384 <button type="submit"
385 class="logout-button">
386
387 <span>↪</span>
388
389 Logout
390
391 </button>
392
393 </form>
394
395
396 </div>
397
398 </div>
399
400 }
401 else
402 {
403
404 <!-- =================================================
405 NOT LOGGED IN
406 ================================================= -->
407
408 <div class="auth-buttons">
409
410
411 <a asp-controller="Account"
412 asp-action="Login"
413 class="login-button">
414
415 Login
416
417 </a>
418
419
420 <a asp-controller="Account"
421 asp-action="Register"
422 class="register-button">
423
424 Register
425
426 </a>
427
428
429 </div>
430
431 }
432
433 </div>
434
435 </div>
436
437 </div>
438
439</nav>
440
441
442<!-- =====================================================
443 ANNOUNCEMENT BAR
444 ===================================================== -->
445
446<div class="announcement-bar">
447
448 <span>
449 FREE SHIPPING ON ORDERS OVER €50
450 </span>
451
452 <span class="announcement-separator">
453 •
454 </span>
455
456 <span>
457 NEW VINYL EVERY WEEK
458 </span>
459
460</div>
461
462
463</header>
464
465<!-- =========================================================
466 MAIN CONTENT
467 ========================================================= -->
468
469<main class="main-content">
470
471
472@RenderBody()
473
474
475</main>
476
477<!-- =========================================================
478 FOOTER
479 ========================================================= -->
480
481<footer class="site-footer">
482
483
484<div class="footer-container">
485
486
487 <!-- BRAND -->
488
489 <div class="footer-brand">
490
491 <div class="footer-logo">
492 KERNEL RECORDS
493 </div>
494
495 <p>
496 Your destination for vinyl, CDs and cassettes.
497 </p>
498
499 </div>
500
501
502 <!-- SHOP -->
503
504 <div class="footer-column">
505
506 <h4>
507 Shop
508 </h4>
509
510
511 <a asp-controller="Release"
512 asp-action="Index">
513
514 Releases
515
516 </a>
517
518
519 <a asp-controller="Release"
520 asp-action="Index">
521
522 New Releases
523
524 </a>
525
526
527 <a asp-controller="Artist"
528 asp-action="Index">
529
530 Artists
531
532 </a>
533
534 </div>
535
536
537 <!-- ACCOUNT -->
538
539 <div class="footer-column">
540
541 <h4>
542 Account
543 </h4>
544
545
546 @if (Context.Session.GetInt32("UserId") != null)
547 {
548
549 <a asp-controller="Account"
550 asp-action="Profile">
551
552 My Profile
553
554 </a>
555
556
557 <a asp-controller="Order"
558 asp-action="Cart">
559
560 My Orders
561
562 </a>
563
564
565 <a asp-controller="Wishlist"
566 asp-action="Index">
567
568 Wishlist
569
570 </a>
571
572 }
573 else
574 {
575
576 <a asp-controller="Account"
577 asp-action="Login">
578
579 Login
580
581 </a>
582
583
584 <a asp-controller="Account"
585 asp-action="Register">
586
587 Register
588
589 </a>
590
591 }
592
593 </div>
594
595
596 <!-- HELP -->
597
598 <div class="footer-column">
599
600 <h4>
601 Help
602 </h4>
603
604 <a href="#">
605 Shipping
606 </a>
607
608 <a href="#">
609 Returns
610 </a>
611
612 <a href="#">
613 Contact
614 </a>
615
616 </div>
617
618</div>
619
620
621<!-- FOOTER BOTTOM -->
622
623<div class="footer-bottom">
624
625 <span>
626 © @DateTime.Now.Year Kernel Records
627 </span>
628
629 <span>
630 All rights reserved.
631 </span>
632
633</div>
634
635
636</footer>
637
638<!-- =========================================================
639 MOBILE NAVIGATION SCRIPT
640 ========================================================= -->
641
642<script>
643
644 function toggleMobileMenu()
645 {
646 const menu =
647 document.getElementById("navbarContent");
648
649 menu.classList.toggle("mobile-open");
650 }
651
652
653 // Close mobile menu when clicking outside
654
655 document.addEventListener("click", function (event)
656 {
657 const menu =
658 document.getElementById("navbarContent");
659
660 const button =
661 document.querySelector(".mobile-menu-button");
662
663
664 if (!menu.contains(event.target) &&
665 !button.contains(event.target))
666 {
667 menu.classList.remove("mobile-open");
668 }
669
670 });
671
672</script>
673
674@await RenderSectionAsync(
675"Scripts",
676required: false)
677
678</body>
679</html>
Note: See TracBrowser for help on using the repository browser.