CSS Sidebar Using HTML CSS and Javascript

CSS Sidebar |CSS Sidebar Using HTML CSS and Javascript

Learners, In this article we are going to design a very interesting and impressive new feature for our project which is a CSS Sidebar with detailed functionality.

Now Learner Do you have any idea that the CSS sidebar is nothing but another way of creating our webpage navbar it is generally in the horizontal form. It could be on any side as the right or left side of web pages.

Something similar, we are going to design a CSS Sidebar by ourselves πŸ˜‰.

CSS Sidebar | CSS Sidebar Using HTML CSS and Javascript

Hey learners..!

Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design a CSS Sidebar Project Using HTML CSS JAVASCRIPT.

I hope you must have got an idea about the project.

Let’s have a look at our project.

Css Sidebar Light theme

As you are looking in the project preview how the thing is organized in the 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 have 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 and 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.

Css Sidebar Dark theme

HTML SECTION

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

Email Validation In Javascript

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>  

CSS 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 and 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.

 @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

In the Javascript part, we will add magic logic as initially when our page will be loaded then By default our project will look like the first attached preview project.

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.

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

See the Pen Dashboard sidebar – Theme by Jothinayagan (@Jothinayagan) on CodePen.

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 ProjectFreeCode. 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.

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment