Dark/light Mode Sidebar Menu Using Html, Css And, Javascript

Dark/light Mode Sidebar Menu Using Html, Css And, Javascript

Hello learners, a very warm welcome to codewithrandom today’s blog in this article we are going to design a very interesting and impressive new feature for our project which is a Dark/light Mode Sidebar Menu Using Html, Css And, and Javascript with detailed functionality.

Now learner do you have any idea that the Dark/light Mode Sidebar Menu Using Html, Css, And, and Javascript is nothing but another way of creating our webpage navbar it is generally in the horizontal form. It could be on any side of the right or left side of web pages.

For something similar, we are going to design the Dark/light Mode Sidebar Menu by ourselves.

 

As we can see in the project preview how the thing is organized in a single container.
Following is the feature of our project:-
Like as you can see there is a sidebar on the left side of web pages and there is also a similar navbar like we used to see in the vertical navbar.
Although it has some more functionality or a better user interface.
We have a google mode for light and dark mode switch with the stretchable feature.
By default, our sidebar will look like as above but after stretching and switching to the dark mode functionality we have some like this.

 

Html section 

Html is the layout of the website. I hope you have gone through the basic topics of html like div, span heading tags, anchors tags, and semantic tags.

So as you have seen in the project preview there are icons used in the webpage so here we are using icons from the boxicons

Instead of boxicons, there are a lot of websites that provide free packages of icons like fontawesome, ionicons, bootstrap icons, etc.

We have the following part in the html section.

First, we have a nav with the sidebar closed.
Within the nav, we have all the nav links and toggle links and at the top, we have a logo.
Go through the below code and run it in your ide or where you used to design just html without css styling.

<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/boxicons@2.1.2/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>
</html>

Css section:-

Css is used for styling here we are using basic css properties like border-box,flex-box, and transform property.

100+ Front-end Projects for Web developers (Source Code)

By css, we will design our container and will bring in the left side, and then we will set the width for the container after setting the basic property we will design each and every part of the html content.

The below code will analyze you more. So just add in your html half-complete file and wait to watch some magic.

@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);
}

Javascript section:-

By css, we will design our container and will bring in the left side, and then we will set the width for the container after setting basic property we will design each and every part of the html content.

The below code will analyze you more. So just add in your html half-complete file and wait to watch some magic.

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";
});

Final Output

By this blog… We have learned how we can design a css sidebar project html css javascript.

Now I’m looking for your reviews.
So, how was the blog, learners?

If you want a more crisp blog like this then please check our blogs sites codewithrandom. Keep tuned with us because every day you will learn something new here.

I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.

Written by  @ankit kumar  & Himanshu Singh

Code by @jothinayagan 

Share on:

Leave a Comment