Update design on navbar and sidebar

This commit is contained in:
Logan Cusano
2023-07-21 18:15:51 -04:00
parent 31de3a040d
commit 9c111eda1a
3 changed files with 21 additions and 13 deletions

View File

@@ -138,9 +138,16 @@ a {
/* Global Section */
.sidebar-container {
min-height: 94.2vh;
min-height: 95vh;
}
.sidebar {
position: fixed;
top: 5vh;
bottom: 0;
left: 0;
}
/* User table section */
.label {

View File

@@ -1,4 +1,4 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Node Master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"

View File

@@ -1,21 +1,22 @@
<div class="container-fluid">
<div class="container-fluid mt-5">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white sidebar-container">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark sidebar-container">
<div
class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white sidebar">
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li>
<a href="/" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span>
</a>
</li>
</a>
</li>
<li>
<a href="/controller" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Controller</span> </a>
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Controller</span>
</a>
</li>
</ul>
<hr>
<% /*
<div class="dropdown pb-4 fixed-bottom px-3">
<% /* <div class="dropdown pb-4 fixed-bottom px-3">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30"
@@ -31,8 +32,8 @@
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
*/%>
</div>
*/%>
</div>
<div class="col py-3">
</div>
<div class="col py-3">