jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

nav restyle

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-11-06 17:25:31 +00:00
parent 5772b0c3eb
commit 7762b830ec
2 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/scss/navbar.scss Normal file
View File

@ -0,0 +1,33 @@
#navbar {
background-color: $primary-colour;
.nav-link {
color: rgba(255, 255, 255, 0.55);
&.active { color: #fff; }
&:disabled { color: rgba(255, 255, 255, 0.25); }
&:focus, &:hover { color: rgba(255, 255, 255, 0.75); }
}
.btn-nav {
color: #fff;
background-color: transparent;
border-color: transparent;
border-radius: 0.25rem;
font-weight: bold;
font-size: 14px;
&:hover, &:active {
color: #fff;
background-color: #085c8d;
border-color: #085c8d;
}
}
}

49
templates/includes/navbar.html
View File

@ -1,52 +1,41 @@
{% load static %}
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #04385c;">
<div class="container-fluid">
<a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5 user-select-none">
<img src="{% static 'img/logo-icon-alt.webp' %}" class="me-1" height="45px" alt="Brand Logo">
<img src="{% static 'img/logo-text-alt.webp' %}" height="40px" alt="Brand Logo">
</a>
<button class="navbar-toggler mx-auto my-3 my-sm-0 me-sm-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<nav id="navbar" class="navbar navbar-expand-lg">
<div class="container-fluid py-lg-2">
<div class="ms-4 me-lg-2 me-4" data-bs-theme="dark">
<a href="/" class="navbar-brand">
<img src="{% static 'img/logo-icon-alt.webp' %}" height="45px" alt="Angling Trust Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse mx-4 mx-lg-0 mt-3 mt-lg-0">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 fw-bold small">
<li class="nav-item">
<a href="#" class="nav-link pe-3">Dashboard</a>
<a href="/" class="nav-link pe-3 {% if request.resolver_match.url_name == 'index' %}active{% endif %}">Dashboard</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pe-3 active">Venues &amp; Waters</a>
<a href="/venues" class="nav-link pe-3 {% if request.resolver_match.url_name == 'venues-waters' %}active{% endif %}">Venues &amp; Waters</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link pe-3">Other Page</a>
<a href="/leagues" class="nav-link pe-3 {% if request.resolver_match.url_name == 'leagues' %}active{% endif %}">Leagues</a>
</li>
</ul>
<hr class="d-lg-none">
<ul class="navbar-nav mb-2 mb-lg-0 me-0 me-lg-4 flex-row flex-wrap">
<li class="nav-item mb-2 mb-lg-0">
<button id="themeSwitcher" class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
<button id="themeSwitcher" class="btn btn-nav px-lg-3 me-2">
<i class="bi"></i>
<span class="d-lg-none ms-2">Theme</span>
</button>
</li>
<li class="nav-item mb-2 mb-lg-0 dropdown position-relative">
<button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
<i class="bi bi-bell"></i>
<span class="d-lg-none ms-2">Notifications</span>
<li class="nav-item mb-2 mb-lg-0 dropdown">
<button class="btn btn-nav dropdown-toggle" data-bs-toggle="dropdown">
<i class="bi bi-person-fill"></i>
<span class="d-lg-none ms-2">placeholder</span>
</button>
<ul class="dropdown-menu dropdown-menu-end position-absolute me-3 p-3" style="min-width: 15rem;">
<li class="text-center text-body-secondary small">
There are no notifications right now
</li>
</ul>
</li>
<li class="nav-item mb-2 mb-lg-0 ms-auto ms-lg-0 dropdown position-relative">
<button class="btn btn-outline-light rounded-pill border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
<i class="bi bi-person me-2"></i>
<span class="d-lg-none me-2">Administrator</span>
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end position-absolute me-3">
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a href="" class="dropdown-item">
<i class="bi bi-gear me-2"></i>