<html class="light">
<div class="flex">
<div class="sidebar flex flex-col antialiased relative shadow-xl">
<a href="#" class="logo flex-shrink-0 m-4 w-14 h-14 flex justify-center items-center text-white hover:text-gray-200 transition duration-300">
<i icon-name="layers"></i>
</a>
<div class="mx-4 search flex-shrink-0 relative h-14 transition duration-300">
<div class="h-14 w-14 absolute z-10 grid place-items-center"><i icon-name="search"></i></div>
<input type="text" class="pl-14 outline-none absolute top-0 left-0 w-full h-full rounded placeholder-current" placeholder="Search...">
</div>
<nav class="my-4 flex-1">
<ul class="flex flex-col h-full">
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="home"></i></div>
<span class="font-semibold">Home</span>
</a>
</li>
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300 relative">
<div class="p-4"><i icon-name="mail"></i></div>
<span class="font-semibold">Messages</span>
<div class="indicator bg-red-400 w-1.5 h-1.5 rounded-full right-0 absolute transition duration-300"></div>
</a>
</li>
<li class="active">
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="inbox"></i></div>
<span class="font-semibold">Projects</span>
</a>
</li>
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="gauge"></i></div>
<span class="font-semibold">Reports</span>
</a>
</li>
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="users"></i></div>
<span class="font-semibold">Team</span>
</a>
</li>
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="wallet"></i></div>
<span class="font-semibold">Expenses</span>
</a>
</li>
<li class="withDivider mt-4 pt-4">
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="life-buoy"></i></div>
<span class="font-semibold">Support</span>
</a>
</li>
<li class="mt-auto">
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300 relative">
<div class="p-4"><i icon-name="bell"></i></div>
<span class="font-semibold">Notifications</span>
<div class="indicator bg-blue-400 w-1.5 h-1.5 rounded-full right-0 absolute transition duration-300"></div>
</a>
</li>
<li>
<a href="#" class="mx-4 flex h-14 rounded items-center transition duration-300">
<div class="p-4"><i icon-name="settings"></i></div>
<span class="font-semibold">Settings</span>
</a>
</li>
</ul>
</nav>
<div class="footer flex flex-shrink-0 px-4">
<div class="px-4 flex items-center cursor-pointer icon transition duration-300">
<i icon-name="briefcase"></i>
</div>
<div class="flex w-full briefcase transition duration-300">
<div class="justify-center flex flex-col">
<a href="" class="whitespace-nowrap font-semibold">Hive Five Studio</a>
<span class="text-sm">Workspace</span>
</div>
<div class="ml-auto cursor-pointer items-center more flex transition duration-300">
<i icon-name="chevron-down"></i>
</div>
</div>
</div>
<div id="sidebar-toggle" class="transition duration-500 toggle flex w-8 h-8 items-center justify-center absolute rounded-full top-7 -right-4 z-10 cursor-pointer shadow">
<i icon-name="chevron-left"></i>
</div>
</div>
<div class="py-16 px-10">
<h1 class="text-4xl text-black font-semibold mb-8">Projects</h1>
<input type="checkbox" id="toggle-check" checked>
<label for="toggle-check" class="toggle-label cursor-pointer">
<div class="toggle-container">
<div class="toggle-light-icon icon">
<svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</div>
<div class="toggle-dark-icon icon">
<svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
</div>
<div class="toggle-circle"></div>
</div>
</label>
</div>
</div>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<script>
lucide.createIcons()
</script>
</html>@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');
$black: #0d0d0d;
$dark: #181820;
$text: #5c636a;
$gray: #21212b;
$text-active: #e3e3e3;
$closed-width: 5.5rem;
* {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html.light {
body {
background: #e6ebf4;
}
.sidebar {
background: #fefefe;
}
.logo, .footer, .footer a {
color: #bdbcb8;
}
.logo:hover {
color: $dark;
}
nav li a{
color: #bdbcb8;
&:hover {
color: $dark
}
}
.footer {
.more:hover, .icon:hover, a:hover {
color: $dark;
}
}
ul li.withDivider {
border-top: 1px solid rgba(#000, 0.1);
}
.search input, .footer {
background: #eef2f7
}
.search {
color: #bdbcb8;
&:focus-within {
color: $dark;
}
}
nav li.active a {
background: #2984ff;
color: #fefefe;
}
nav {
color: #eef2f7;
}
.toggle {
background: #eef2f7;
color: #bdbcb8;
&:hover {
color: $dark;
}
}
}
body {
background: #434a5a;
transition: 1s background;
}
.sidebar {
background: $dark;
width: 20rem;
height: 100vh;
height: 100dvh;
color: $text;
transition: 0.3s width, 1s background;
.search {
color: rgba($text-active, .25);
input {
background: $black;
transition: 1s background;
}
&:focus-within {
color: $text-active
}
}
nav {
overflow-y: overlay;
overflow-x: hidden;
color: $gray;
transition: 1s color;
}
ul {
li.active a {
color: $text-active;
background: $gray;
}
li.withDivider {
border-top: 1px solid rgba(#eee, 0.1)
}
.indicator {
animation: blink 1.5s infinite;
}
a:hover {
color: $text-active;
}
a span {
transition: 0.3s opacity;
}
li a {
color: $text;
}
}
.footer {
height: $closed-width;
background: $gray;
transition: 1s background;
a {
color: $text-active;
transition: .3s color;
&:hover {
color: $text;
}
}
.more:hover, .icon:hover {
color: $text-active;
}
}
.toggle {
background: $black;
color: $text;
&:hover {
color: $text-active;
}
}
&.closed {
width: 5.5rem;
.toggle {
transform: rotate(180deg)
}
nav ul li a span {
opacity: 0;
width: 0;
}
.indicator {
transform: translate(-15px,-8px)
}
.footer .more {
opacity: 0;
}
.footer .briefcase {
opacity: 0;
}
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
}
}
*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
width: 16px;
border-radius: 8px;
background-clip: padding-box;
border: 6px solid transparent;
}
*::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0 10px;
}
@keyframes blink {
0%{
}
50%{
background: transparent
}
100% {
}
}
// dark light toggle by https://codepen.io/alireza82/pen/XWeabge
.toggle-container {
width: 70px;
height: 30px;
background-color: #0d1117;
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 5px;
position: relative;
transition: background .5s;
overflow: hidden;
.icon {
svg {
stroke: #fff;
stroke-width: 1.5px;
width: 19px;
}
}
.toggle-dark-icon {
margin-left: 12px;
margin-top: 1px;
svg {
transition: transform .9s;
transform: translateX(0px);
}
}
.toggle-light-icon {
margin-top: 2px;
svg {
transform-origin: center;
transform: scale(.7) rotate(0deg);
position: relative;
right: 30px;
transition: transform .9s, right .5s;
}
}
.toggle-circle {
width: 24px;
height: 24px;
position: absolute;
background-color: #fff;
border-radius: 50%;
// opacity: .2;
left: 5%;
transition: left .5s;
}
}
#toggle-check {
display: none;
&:checked~.toggle-label .toggle-container {
background: #fd7e14;
.toggle-circle {
left: 62%;
}
.toggle-light-icon {
svg {
transform: scale(1) rotate(180deg);
right: 0px;
}
}
.toggle-dark-icon {
svg {
transform: translateX(30px);
}
}
}
}// Credits: https://dribbble.com/shots/16771965-Sidebar-menu-dark-mode
// dribble@rymasheuski
// Preview with the link below.
// https://cdpn.io/ilyasbilgihan/fullpage/BadPLRd
// Please leave a comment if you like.
// twitter@ilyasbilgihan
// github@ilyasbilgihan
// linkedin@ilyasbilgihan
const sidebarToggleBtn = document.querySelector('#sidebar-toggle')
const sidebar = document.querySelector('.sidebar')
const toggle = document.querySelector('#toggle-check')
const html = document.querySelector("html")
sidebarToggleBtn.addEventListener("click", function(){
sidebar.classList.toggle("closed")
})
toggle.addEventListener("change", function(e){
html.classList.toggle("light")
})
// Showcase
function showCase(){
setTimeout(function(){
sidebar.classList.toggle("closed")
},1000)
setTimeout(function(){
toggle.checked = false
html.classList.toggle("light")
},2000)
setTimeout(function(){
sidebar.classList.toggle("closed")
},3000)
}
showCase()
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.