184 lines
7.9 KiB
HTML
184 lines
7.9 KiB
HTML
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top navShadow" style="z-index: 999">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand user-select-none ms-2" onclick="doTheConfetti()" style="cursor: default">
|
|
<img alt="AssetFlow Logo" draggable="false" class="me-2 headLogo" src="/logo/Design_icon.svg"/> AssetFlow</a>
|
|
<button
|
|
class="navbar-toggler position-absolute d-md-none collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#sidebarMenu"
|
|
aria-controls="sidebarMenu"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
|
|
<form class="d-flex" role="search">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#search_modal"><i class="bi bi-search"></i></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="modal" id="search_modal">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="modalSearchBar">
|
|
<div class="input-group mb-3">
|
|
<form id="searchForm">
|
|
<input type="text" id="SearchBoxInput" class="form-control focus" placeholder="Start typing to search..." aria-label="Search" autocomplete="off">
|
|
</form>
|
|
</div>
|
|
</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="autocompletBody">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
|
|
<div class="d-flex">
|
|
<div class="toast-body">Hello, world! This is a toast message.</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastMainController">
|
|
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000">
|
|
<div class="d-flex">
|
|
<div class="toast-body">Hello, world! This is a toast message.</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<nav id="sidebarMenu" class="col-md-2 col-lg-2 d-md-block sidebar collapse">
|
|
<div class="position-sticky pt-3">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'Dashboard' ? 'active' : ''%>" aria-current="page" href="/"> <i class="bi bi-house"></i> <strong>Dashboard</strong> </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'Items' ? 'active' : ''%>" href="/items"> <i class="bi bi-list-ul"></i> Items </a>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Products </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Customers </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Reports </a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'placeholder' ? 'active' : ''%>" href="#"> Integrations </a>
|
|
</li> -->
|
|
</ul>
|
|
|
|
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
|
<a href="/manage/" class="nav-link"
|
|
>Settings
|
|
<span class="badge rounded-pill bg-danger invisible">
|
|
2
|
|
<span class="visually-hidden">changes or updates</span>
|
|
</span>
|
|
</a>
|
|
</h6>
|
|
|
|
<ul class="nav flex-column mb-2">
|
|
<a class="nav-link <%= it.active == 'SETT_STORE' ? 'active' : ''%>" href="/manage/storages"
|
|
><i class="bi bi-box-seam"></i> Manage storages
|
|
<span
|
|
class="<%= it.active == 'SETT_STORE' ? 'active' : ''%>"
|
|
type="button"
|
|
onclick="return false"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseSettingsStorages"
|
|
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
|
|
aria-controls="collapseSettingsStorages">
|
|
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsStorages"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="collapse <%= it.active == 'SETT_STORE' ? 'show' : ''%>" id="collapseSettingsStorages">
|
|
<a class="nav-link ms-4" href="/manage/storages#storage-loc-tab"><i class="bi bi-bookshelf"></i> Manage locations </a>
|
|
<a class="nav-link ms-4" href="/manage/storages#storage-unit-tab"><i class="bi bi-buildings"></i> Manage units </a>
|
|
</div>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link <%= it.active == 'SETT_CAT' ? 'active' : ''%>" href="/manage/categories"><i class="bi bi-tag"></i> Manage categories </a>
|
|
</li>
|
|
|
|
<a class="nav-link">
|
|
<span
|
|
class="<%= it.active == 'SETT_IMPORT' ? 'active' : ''%>"
|
|
type="button"
|
|
onclick="return false"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseSettingsImport"
|
|
aria-expanded="<%= it.active.includes('SETT_IMPORT') ? 'true' : 'false'%>"
|
|
aria-controls="collapseSettingsImport">
|
|
<i class="bi bi-box-seam"></i> Import
|
|
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsImport"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<div class="collapse <%= it.active.includes('SETT_IMPORT') ? 'show' : ''%>" id="collapseSettingsImport">
|
|
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_CSV' ? 'active' : ''%>" href="/manage/import/csv"><i class="bi bi-filetype-csv"></i> CSV Import </a>
|
|
<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
<!-- Align the mode picker at the bottom of the navbar -->
|
|
|
|
<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
|
|
<div class="input-group mb-3 justify-content-center w-100">
|
|
<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
|
|
<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" />
|
|
|
|
<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked />
|
|
<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
|
|
|
|
<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off" />
|
|
<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
|
|
</div>
|
|
<script>
|
|
const modeFromStorage = localStorage.getItem('bs.theme') ?? 'auto';
|
|
const modeLight = document.getElementById('mode_light');
|
|
const modeAuto = document.getElementById('mode_auto');
|
|
const modeDark = document.getElementById('mode_dark');
|
|
if (modeFromStorage === 'light') {
|
|
modeLight.checked = true;
|
|
} else if (modeFromStorage === 'dark') {
|
|
modeDark.checked = true;
|
|
} else {
|
|
modeAuto.checked = true;
|
|
}
|
|
modeLight.addEventListener('click', () => {
|
|
localStorage.setItem('bs.theme', 'light');
|
|
updateColorMode();
|
|
//document.documentElement.setAttribute('data-bs-theme', 'light');
|
|
});
|
|
modeAuto.addEventListener('click', () => {
|
|
localStorage.setItem('bs.theme', 'auto');
|
|
updateColorMode();
|
|
//document.documentElement.setAttribute('data-bs-theme', 'auto');
|
|
});
|
|
modeDark.addEventListener('click', () => {
|
|
localStorage.setItem('bs.theme', 'dark');
|
|
updateColorMode();
|
|
//document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
});
|
|
</script>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">
|
|
<!-- The main tag needs to be left open! -->
|