Add: theme selector if logged in to navbar

This commit is contained in:
Aroy-Art 2024-07-01 21:51:50 +02:00
parent 3972ac7feb
commit 3f762419df
Signed by: Aroy
GPG key ID: DB9689E9391DD156

View file

@ -48,6 +48,57 @@
</form> </form>
</li> </li>
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2">
</li>
<!-- Theme Selector -->
<li class="nav-item dropdown ms-auto mx-auto">
<div class="d-flex align-items-center dropdown-center ">
<button class="btn btn-link text-body-emphasis px-0 text-decoration-none dropdown-toggle d-flex align-items-center icon-link"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static"
aria-label="Toggle theme">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="d-lg-none ms-0" id="bd-theme-text"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="bd-theme" >
<li>
<button type="button" class="dropdown-item d-flex align-items-center icon-link" data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center icon-link" data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active icon-link" data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
</li>
<!-- End Theme Selector -->
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2">
</li>
{% else %} {% else %}
<!-- Theme Selector --> <!-- Theme Selector -->