fix(frontend): added missing js file include for proper bootstrap functionality
feat(frontend): redone navbar
This commit is contained in:
@@ -20,6 +20,7 @@
|
||||
<body>
|
||||
<Routes @rendermode="InteractiveServer"/>
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
<script src="lib/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,7 +1,7 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="navbar">
|
||||
<div class="container-xxl">
|
||||
<div class="navbar navbar-expand-sm">
|
||||
<div class="container-xl">
|
||||
<a class="mx-2 navbar-brand" href="">
|
||||
<img src="img/MilkyShotLogoWhite.svg" alt="Milky Shot Logo" class="logo mx-2" href=""/>
|
||||
<span class="text m-1">Milky Shot</span>
|
||||
@@ -10,7 +10,7 @@
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Cosplayers</a>
|
||||
</li>
|
||||
@@ -21,6 +21,35 @@
|
||||
<a class="nav-link" href="#">Photos</a>
|
||||
</li>
|
||||
</ul>
|
||||
@if (loggedIn) {
|
||||
<button class="btn btn-outline-secondary mx-1">
|
||||
Login
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary mx-1">
|
||||
Register
|
||||
</button>
|
||||
} else {
|
||||
<form class="d-flex">
|
||||
<input class="form-control mx-1" type="search" placeholder="Search anything..." aria-label="search"/>
|
||||
<button class="btn btn-outline-success mx-1" type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-search-heart" viewBox="0 0 16 16">
|
||||
<path d="M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018"/>
|
||||
<path d="M13 6.5a6.47 6.47 0 0 1-1.258 3.844q.06.044.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<div class="mx-2">placeholder-user@(username)</div>
|
||||
<button class="btn btn-outline-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
|
||||
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code{
|
||||
bool loggedIn = false;
|
||||
string username = "Guest";
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
font-size: 1.1rem;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
filter: drop-shadow(0 0 0.15rem var(--bs-primary));
|
||||
filter: drop-shadow(0 0 0.1rem var(--bs-light));
|
||||
}
|
||||
|
||||
.logo{
|
||||
|
||||
Reference in New Issue
Block a user