<html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<!-- Boxicons CSS -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title>Dashboard</title>
</head>
<body>
<nav class='sidebar close'>
<header>
<div class='image-text'>
<span class='image'>
<img src="https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png" alt="logo" />
</span>
<div class='text header-text'>
<span class='name'>Jothinayagan</span>
<span class='profession'>Web Developer</span>
</div>
</div>
<i class='bx bx-chevron-right toggle'></i>
</header>
<div class='menu-bar'>
<div class='menu'>
<li class='search-box'>
<a href="#">
<i class='bx bx-search icon'></i>
<input type="search" placeholder="Search" />
</a>
</li>
<ul class='menu-links'>
<li class='nav-link'>
<a href="#">
<i class='bx bx-home-alt icon'></i>
<span class='text nav-text'>Dashboard</span>
</a>
</li>
<li class='nav-link'>
<a href="#">
<i class='bx bx-bar-chart-alt-2 icon'></i>
<span class='text nav-text'>Revenue</span>
</a>
</li>
<li class='nav-link'>
<a href="#">
<i class='bx bx-bell icon'></i>
<span class='text nav-text'>Notifications</span>
</a>
</li>
<li class='nav-link'>
<a href="#">
<i class='bx bx-pie-chart-alt icon'></i>
<span class='text nav-text'>Analytics</span>
</a>
</li>
<li class='nav-link'>
<a href="#">
<i class='bx bx-heart icon'></i>
<span class='text nav-text'>Likes</span>
</a>
</li>
<li class='nav-link'>
<a href="#">
<i class='bx bx-wallet icon'></i>
<span class='text nav-text'>Wallet</span>
</a>
</li>
</ul>
</div>
<div class='bottom-content'>
<li class='nav-link'>
<a href="#">
<i class='bx bx-log-out icon'></i>
<span class='text nav-text'>Logout</span>
</a>
</li>
<li class='mode'>
<div class='moon-sun'>
<a href="#">
<i class='bx bx-sun icon sun'></i>
<i class='bx bx-moon icon moon'></i>
</a>
</div>
<span class='mode-text text'>Dark Mode</span>
<div class='toggle-switch'>
<span class='switch'></span>
</div>
</li>
</div>
</div>
</nav>
<section class="home">
<div class="text">Dashboard</div>
</section>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Colors */
--body-color: #e4e9f7;
--sidebar-color: #fff;
--primary-color: #695cfe;
--primary-color-light: #f6f5ff;
--toggle-color: #ddd;
--text-color: #707070;
/* Transition */
--tran-02: all 0.2s ease;
--tran-03: all 0.3s ease;
--tran-04: all 0.3s ease;
--tran-05: all 0.3s ease;
}
body {
font-family: "Lato", sans-serif;
height: 100vh;
background: var(--body-color);
transition: var(--tran-05);
}
body.dark {
--body-color: #18191a;
--sidebar-color: #242526;
--primary-color: #3a3b3c;
--primary-color-light: #3a3b3c;
--toggle-color: #fff;
--text-color: #ccc;
}
/* sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
padding: 10px 14px;
background: var(--sidebar-color);
transition: var(--tran-05);
z-index: 1;
}
.sidebar.close {
width: 88px;
}
.sidebar.close .text {
display: none;
}
/* Reusable CSS */
.sidebar .text {
font-size: 16px;
font-weight: 500;
color: var(--text-color);
transition: var(--tran-04);
white-space: nowrap;
}
.sidebar .image {
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar header {
position: relative;
}
.sidebar li {
display: flex;
align-items: center;
height: 50px;
margin-top: 10px;
list-style: none;
}
.sidebar li .icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
font-size: 20px;
}
.sidebar li .icon,
.sidebar li .text {
color: var(--text-color);
}
.sidebar li a {
height: 100%;
width: 100%;
display: flex;
align-items: center;
border-radius: 10px;
text-decoration: none;
transition: var(--tran-04);
}
.sidebar li a:hover {
background: var(--primary-color);
transition: var(--tran-02);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text {
color: var(--sidebar-color);
}
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
color: var(--text-color);
}
.sidebar .image-text img {
width: 60px;
border-radius: 6px;
}
.sidebar .search-box {
background: var(--primary-color-light);
border-radius: 6px;
transition: var(--tran-05);
}
.search-box input {
height: 100%;
width: 100%;
border: none;
outline: none;
background: var(--primary-color-light);
border-radius: 6px;
font-size: 16px;
font-weight: 500;
color: var(--text-color);
}
.sidebar header .image-text {
display: flex;
align-items: center;
}
header .image-text .header-text {
display: flex;
flex-direction: column;
}
.header-text .name {
font-size: 20px;
font-weight: 700;
}
.header-text .profession {
margin-top: -2px;
}
.sidebar header .toggle {
position: absolute;
top: 50%;
right: -25px;
transform: translatey(-50%) rotate(180deg);
height: 25px;
width: 25px;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--sidebar-color);
font-size: 22px;
transition: translatey(--tran-03);
}
.sidebar.close header .toggle {
transform: translatey(-50%);
}
body.dark .sidebar header .toggle {
color: var(--text-color);
}
.sidebar .menu {
margin-top: 25px;
}
.sidebar .menu-bar {
/* background: red; */
height: calc(100% - 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-bar .mode {
position: relative;
border-radius: 6px;
background: var(--primary-color-light);
}
.menu-bar .mode .moon-sun {
height: 50px;
width: 60px;
display: flex;
align-items: center;
}
.menu-bar .mode i {
position: absolute;
transform: var(--text-03);
}
.menu-bar .mode i.sun {
opacity: 0;
}
body.dark .menu-bar .mode i.sun {
opacity: 1;
}
body.dark .menu-bar .mode i.moon {
opacity: 0;
}
.menu-bar .mode .toggle-switch {
position: absolute;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-width: 60px;
cursor: pointer;
border-radius: 6px;
background: var(--primary-color-light);
/* transition: var(--tran-05); */
}
.toggle-switch .switch {
position: relative;
height: 22px;
width: 44px;
border-radius: 25px;
background: var(--toggle-color);
}
.switch::before {
content: "";
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 50%;
left: 5px;
transform: translatey(-50%);
background: var(--sidebar-color);
transition: var(--tran-03);
}
body.dark .switch::before {
left: 24px;
}
.home {
position: relative;
height: 100vh;
left: 250px;
width: calc(100% - 250px);
transition: var(--tran-05);
}
.home .text {
font-weight: 500;
font-size: 30px;
color: var(--text-color);
padding: 8px 40px;
}
.sidebar.close ~ .home {
left: 88px;
height: 100vh;
width: calc(100% - 88px);
}
const body = document.querySelector("body");
const sidebar = document.querySelector("nav");
const toggle = document.querySelector(".toggle");
const searchBox = document.querySelector(".search-box");
const modeSwitch = document.querySelector(".toggle-switch");
const modeText = document.querySelector(".mode-text");
toggle.addEventListener("click", () => {
sidebar.classList.toggle("close");
});
searchBox.addEventListener("click", () => {
sidebar.classList.remove("close");
});
modeSwitch.addEventListener("click", () => {
body.classList.toggle("dark");
modeText.innerText = body.classList.contains("dark")
? "Light Mode"
: "Dark Mode";
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.