Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link href="~/css/navbar.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>FlushDev</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
	<link rel="stylesheet" href="~/FlushDev.styles.css" asp-append-version="true" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"></script>
</head>
<body>
	<header>
		<div>
		<nav class="navbar-container " id="sideBar">
				<ul>
					<li>
						<span class="logo">
						</span>
						@*"this" is not parsed here as the button has an id which we reference in the js code for this button*@
						<button onclick=toggleSidebar() id="toggle-btn">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" /></svg>
						</button>
					</li>
					<li class="active">
						@*The active class is used to highlight the "current" page the user is on*@
						<a href="../Index">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" /></svg>
							<span>Forside</span>
						</a>
					</li>
					<li>
						@*onclick=toggleSubMenu(this) "this" is written in the parentheses to ensure that when this function is called it only shows the html which is next to it
							In the case of this navbar this is irrelevant as there is only one button, but it is good practice to include it in case more buttons are added in the future.
							Had there been more buttons and the function was called without "this" then it would have shown all the submenus at once.
							This function is used to show the submenu when the button is clicked, and hide it when it is clicked again.
							The code for this button is located in the site.js file.
							*@
						<button onclick=toggleSubMenu(this) class="dropdown-btn">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z" /></svg>
							<span>Musikerne</span>
						</button>
						<ul class="submenu">
							@*The elements of this submenu are enclosed in a div. This allows os manage the elements in a grid which ensures that they are only affected by the css of which we want*@
							<div>
							<li><a href="/KimLarsen">Kim Larsen</a></li>
							<li><a href="/FranzBeckerlee">Franz Beckerlee</a></li>
							<li><a href="/WiliJønsson">Wili Jønsson</a></li>
							<li><a href="/BjørnUglebjerg">Bjørn Uglebjerg</a></li>
							<li><a href="/SørenBerlev">Søren Berlev</a></li>
							</div>
						</ul>
					</li>
					<li>
						<a href="/histore">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M300-80q-58 0-99-41t-41-99v-520q0-58 41-99t99-41h500v600q-25 0-42.5 17.5T740-220q0 25 17.5 42.5T800-160v80H300Zm-60-267q14-7 29-10t31-3h20v-440h-20q-25 0-42.5 17.5T240-740v393Zm160-13h320v-440H400v440Zm-160 13v-453 453Zm60 187h373q-6-14-9.5-28.5T660-220q0-16 3-31t10-29H300q-26 0-43 17.5T240-220q0 26 17 43t43 17Z" /></svg>
							<span>Bandets Historie</span>
						</a>
					</li>
					<li>
						<a href="/memorabilia">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z" /></svg>
							<span>Memorabilia</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>
    </header>
	<div class="background">
		<div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
	</div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>