Skip to content

Instantly share code, notes, and snippets.

@rnkoaa

rnkoaa/index.html

Created November 9, 2022 00:25
Show Gist options
  • Save rnkoaa/ab84c3c554bb20d44c7d406d582df7ca to your computer and use it in GitHub Desktop.
Save rnkoaa/ab84c3c554bb20d44c7d406d582df7ca to your computer and use it in GitHub Desktop.
Download ZIP
sidebar navigration with minimization to small bar on click inspired by bedimcode
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Bedim Code</title>
</head>
<body id="body-pd">
<div class="l-navbar" id="navbar">
<nav class="nav">
<div>
<div class="nav__brand">
<ion-icon
name="menu-outline"
class="nav__toggle"
id="nav-toggle"
></ion-icon>
<a href="#" class="nav__logo">Bedimcode</a>
</div>
<div class="nav__list">
<a href="#" class="nav__link active">
<ion-icon name="home-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Dashboard</span>
</a>
<a href="#" class="nav__link">
<ion-icon name="chatbubbles-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Messenger</span>
</a>
<div class="nav__link collapse">
<ion-icon name="folder-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Projects</span>
<ion-icon
name="chevron-down-outline"
class="collapse__link"
></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="pie-chart-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Analytics</span>
</a>
<div class="nav__link collapse">
<ion-icon name="people-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Team</span>
<ion-icon
name="chevron-down-outline"
class="collapse__link"
></ion-icon>
<ul class="collapse__menu">
<a href="#" class="collapse__sublink">Data</a>
<a href="#" class="collapse__sublink">Group</a>
<a href="#" class="collapse__sublink">Members</a>
</ul>
</div>
<a href="#" class="nav__link">
<ion-icon name="settings-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Settings</span>
</a>
</div>
</div>
<a href="#" class="nav__link">
<ion-icon name="log-out-outline" class="nav__icon"></ion-icon>
<span class="nav__name">Log Out</span>
</a>
</nav>
</div>
<h1>Components</h1>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
const showMenu = (toggleId, navbarId, bodyId) => {
const toggle = document.getElementById(toggleId),
navbar = document.getElementById(navbarId),
bodyPadding = document.getElementById(bodyId);
if (toggle && navbar) {
toggle.addEventListener("click", () => {
navbar.classList.toggle("expander");
bodyPadding.classList.toggle("body-pd");
});
}
};
showMenu("nav-toggle", "navbar", "body-pd");
const linkColor = document.querySelectorAll(".nav__link");
const colorLink = () => {
linkColor.forEach((lk) => lk.classList.remove("active"));
this.classList.add("active");
};
linkColor.forEach((l) => l.addEventListener("click", colorLink));
const linkCollapse = document.getElementsByClassName("collapse__link");
Array.from(linkCollapse).forEach((lc) => {
lc.addEventListener("click", () => {
const collapseMenu = lc.nextElementSibling;
collapseMenu.classList.toggle("showCollapse");
const rotate = collapseMenu.previousElementSibling;
rotate.classList.toggle("rotate");
});
});
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
:root {
--nav-width: 92px;
--first-color: #0c5df4;
--bg-color: #12192c;
--sub-color: #b6cefc;
--white-color: #fff;
--body-font: "Poppins", sans-serif;
--normal-font-size: 1rem;
--small-font-size: 0.875rem;
--z-fixed: 100;
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding: 2rem 0 0 6.75rem;
font-family: var(--body-font);
font-size: var(--normal-font-size);
transition: 0.5s;
}
h1 {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.l-navbar {
position: fixed;
top: 0;
left: 0;
width: var(--nav-width);
height: 100vh;
background: var(--bg-color);
color: var(--white-color);
padding: 1.5rem 1.5rem 2rem;
transition: 0.5s;
z-index: var(--z-fixed);
}
.nav {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.nav__brand {
display: grid;
grid-template-columns: max-content max-content;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.nav__toggle {
font-size: 1.25rem;
padding: .75rem;
cursor: pointer;
}
.nav__logo {
color: var(--white-color);
font-weight: 600;
}
.nav__link {
display: grid;
grid-template-columns: max-content max-content;
align-items: center;
column-gap: .75rem;
padding: .75rem;
color: var(--white-color);
border-radius: .5rem;
margin-bottom: 1rem;
transition: .3s;
cursor: pointer;
}
.nav__link:hover {
background-color: var(--first-color);
}
.nav__icon {
font-size: 1.25rem;
}
.nav__name {
font-size: var(--small-font-size);
}
.expander {
width: calc(var(--nav-width) + 9.25rem)
}
.body-pd {
padding: 2rem 0 0 16rem;
}
.active {
background-color: var(--first-color);
}
.collapse {
grid-template-columns: 20px max-content 1fr;
}
.collapse__link {
justify-self: flex-end;
transition: .5;
}
.collapse__menu {
display: none;
padding: 0.75rem 2.25rem;
}
.collapse__sublink {
color: var(--sub-color);
font-size: var(--small-font-size);
}
.collapse__sublink:hover {
color: var(--white-color) ;
}
.showCollapse {
display: block;
}
.rotate {
transform: rotate(180deg);
transition: .5s
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment