I need to update the page content when item in a Bootstrap sidebar is clicked. All examples I find are just showing how to create a responsive sidebar but ends there. E.g. following this tutorial only gets the boilerplate up.
What I want is to have each of the items in the sidebar to load a section to the right of the sidebar with a new div. The way I do it now is with JavaScript.
window.addEventListener("hashchange", (event) => {
let allPages = [
"#network",
"#tally",
"#mesh",
"#admin",
];
allPages.splice(allPages.indexOf(window.location.hash), 1);
$( window.location.hash ).removeClass("d-none");
allPages.forEach(item => {
$( item ).addClass("d-none");
});
$("#pageTitle").html(window.location.hash.replace("#", ""));
});
But it must be a better way of doing it. Also, the selected item in the sidebar does not update....
Edited after comment:
Basically i just copied the link code straight off, changed some of the links et.c. Problem is in the <main> tag there , how to change the content. My approach is to hide/show the divs using bootstrap classes, but there must be a better way. And the sidebars active item does not update when clicking it, of course since I have not programed it to do that, but how do I do that :) .
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">dashboard</a>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#network">
<span data-feather="globe"></span>
Network <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tally">
<span data-feather="sun"></span>
Tally
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#board">
<span data-feather="hard-drive"></span>
Board
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mesh">
<span data-feather="share-2"></span>
Mesh
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#admin">
<span data-feather="user"></span>
Admin
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved configurations</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
example
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 id="pageTitle" class="h2">Network</h1>
</div>
<div id="network" class="justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/network">
<div class="form-group">
<label for="ssid">WiFi SSID:</label>
<input type="text" class="form-control" required id="ssid" name="ssid" value="%WIFI_SSID%" list="foundWifis">
<datalist id="foundWifis">
%FOUND_WIFI_NETWORKS%
</datalist>
</div>
<div class="form-group">
<label for="wpwd">WiFi Password:</label>
<input type="password" class="form-control" required id="wpwd" value="%WIFI_PWD%" name="wpwd">
</div>
<div class="form-group">
<label for="manual">Manual configuration</label>
<input type="checkbox" id="manual" name="Manual" %MANUAL_CFG% onclick="disableUnused()"></p>
<div id="manualCfg">
<label for="tid">IP</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tip" name="tip" value="%TALLY_IP%">
<label for="tnmid">netmask:</label>
<input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tnm" name="tnm" value="%TALLY_NETMASK%">
</div>
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div id="tally" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
<form action="/tally">
<div class="form-group">
<label for="gsip">Target IP</label>
<input type="text" class="form-control" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="gsip" name="gsip" value="%TARGET_IP%">
</div>
<div class="form-group">
<label for="smart">Smart assign</label>
<input type="checkbox" id="smart" %SMART_MODE% name="smart" onclick="disableUnused()">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</main>
