logan/DRB-CnC
1
0
Fork 0
Code Issues 23 Pull Requests Packages Projects 1 Releases Wiki Activity

Update design on navbar and sidebar

Browse Source
This commit is contained in:
Logan Cusano
2023-07-21 18:15:51 -04:00
committed by logan
parent 6b4ffc88b3
commit 58b4b7ff40
3 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Server/public/res/css/main.css
View File

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

2
Server/views/partials/navbar.ejs
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"> <div class="container-fluid">
<a class="navbar-brand" href="#">Node Master</a> <a class="navbar-brand" href="#">Node Master</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"

23
Server/views/partials/sidebar.ejs
View File

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