Navs
Side [ .side ]
Menu lateral com icones e texto. Texto só aparece no hover, e no mobile não aparece. Com ajustes de posicionamento: Esquerdo ou Direito;
Por padrão o posicionamento é a Esquerda. para colocar o posicionamento a direita acrescente na div aside a classe .sideb-right.
As cores e alguns ajustes do sideb, você pode fazer no arquivo swconfig.
<aside class="side">
<div class="side-header">
<i class="bx bxs-leaf"></i></a>
<h2>CodingLab</h2>
</div>
<ul class="side-links">
<h4><div class="menu-separator"></div></h4>
<li><a href="#">
<i class="bx bx-home-alt-2"></i>Home</a>
</li>
<li><a href="#">
<i class="bx bx-leaf"></i>Overview</a>
</li>
<li><a href="#">
<i class="bx bx-buildings"></i>Analytic</a>
</li>
<h4><div class="menu-separator"></div></h4>
<li><a href="#">
<i class="bx bx-comment-dots"></i>Comment</a>
</li>
<li><a href="#">
<i class="bx bx-bowl-hot"></i>Groups</a>
</li>
<li><a href="#">
<i class="bx bx-wifi-off"></i>Transfer</a>
</li>
<li><a href="#">
<i class="bx bx-file-find"></i>All Reports</a>
</li>
<li><a href="#">
<i class="bx bx-smile"></i>Notifications</a>
</li>
<h4><div class="menu-separator"></div></h4>
<li><a href="#">
<i class="bx bx-smile"></i>Profile</a>
</li>
<li><a href="#">
<i class="bx bx-gift"></i>Settings</a>
</li>
</ul>
</aside>
NavBar [ .navbar ]
<nav class="navbar">
<div class="logo"><i class='bx bxs-leaf'></i> SandCss</div>
<div class="menu-toggle" id="mobile-menu">
<i class='bx bx-menu'></i>
</div>
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li>
<a href="#">Serviços <i class='bx bx-chevron-down'></i></a>
<ul class="submenu">
<li><a href="#">Serviço 1</a></li>
<li><a href="#">Serviço 2</a></li>
<li><a href="#">Serviço 3</a></li>
</ul>
</li>
<li><a href="#">Sobre</a></li>
<li>
<a href="#">Projetos <i class='bx bx-chevron-down'></i></a>
<ul class="submenu">
<li><a href="#">Projetos 1</a></li>
<li><a href="#">Projetos 2</a></li>
<li><a href="#">Projetos 3</a></li>
<li><a href="#">Projetos 4</a></li>
<li><a href="#">Projetos 5</a></li>
</ul>
</li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
Acrescente este javascript em seu site:
document.addEventListener("DOMContentLoaded", () => {
const navbars = document.querySelectorAll(".navbar");
navbars.forEach((navbar) => {
const toggle = navbar.querySelector(".toggle_navbar");
const menu = navbar.querySelector(".menu_navbar");
toggle.addEventListener("click", () => {
menu.classList.toggle("active");
});
});
});
Sidebar [ .side-bar ]
SandroWeb Administrador
<!-- Botão -->
<div class="side-bar-btn"><i class='bx bx-menu'></i></div>
<!-- Side-bar -->
<div class="side-bar">
<div class="header">
<div class="side-bar-close">
<i class='bx bx-x'></i>
</div>
<img src="img/progressive02.png" alt="">
<h1>SandroWeb <small>Administrador</small></h1>
</div>
<div class="menu">
<div class="item"><a href="" class="fcr"><i class='bx bx-home-alt-2'></i>Dashboard</a></div>
<div class="item"><a class="side-bar-sub-btn"><i class='bx bx-window-alt'></i>Tables
<i class='bx bx-chevron-right dropdown'></i>
</a>
<div class="sub-menu">
<a href="" class="sub-item fcr">Sub item 01</a>
<a href="" class="sub-item fcr">Sub item 02</a>
<a href="" class="sub-item fcr">Sub item 03</a>
</div>
</div>
<div class="item"><a href="" class="fcr"><i class='bx bx-user'></i>Forms</a></div>
<div class="item"><a class="side-bar-sub-btn"><i class='bx bx-buildings'></i>Settings
<i class='bx bx-chevron-right dropdown'></i>
</a>
<div class="sub-menu">
<a href="" class="sub-item fcr">Sub item 01</a>
<a href="" class="sub-item fcr">Sub item 02</a>
</div>
</div>
<div class="item"><a href="" class="fcr"><i class='bx bx-briefcase-alt-2'></i>About</a></div>
</div>
</div>
Acrescente este Javascript em seu site:
document.addEventListener("DOMContentLoaded", function () {
const menuBtn = document.querySelector(".side-bar-btn");
const sideBar = document.querySelector(".side-bar");
const closeBtn = document.querySelector(".side-bar-close");
const subBtns = document.querySelectorAll(".side-bar-sub-btn");
if (menuBtn) {
menuBtn.addEventListener("click", function () {
sideBar.classList.add("active");
menuBtn.style.visibility = "hidden";
});
closeBtn.addEventListener("click", function () {
sideBar.classList.remove("active");
menuBtn.style.visibility = "visible";
});
subBtns.forEach(function (subBtn) {
subBtn.addEventListener("click", function () {
const subMenu = subBtn.nextElementSibling;
subMenu.classList.toggle("active");
subBtn.querySelector(".dropdown").classList.toggle("rotate");
});
});
const fcrLinks = document.querySelectorAll(".fcr");
fcrLinks.forEach(function (link) {
link.addEventListener("click", function () {
sideBar.classList.remove("active");
menuBtn.style.visibility = "visible";
});
});
}
});