Javascript sidebar

Create Sidebar Menu Using HTML,CSS and JavaScript (Source Code)

Create Sidebar Menu Using HTML,CSS and JavaScript (Source Code)

Welcome to the Codewithrandom blog. In this blog, we learn how to create a Sidebar Menu Using HTML, CSS, and JavaScript. This is the Light/Dark Mode Sidebar that expands on hover. we have a menu link with an icon in the Sidebar Menu.I hope you enjoy our blog so let’s start with a basic HTML structure for the Sidebar Menu.100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Live Preview Of Sidebar Menu

Code byAybüke Ceylan
Project DownloadLink Available Below
Language usedHTML  CSS and JS
External link / DependenciesYES
ResponsiveYES

HTML Code For Sidebar Menu

<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">
    <title>Sidebar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root"></div>

    <!-- Javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
      <script src="app.js"></script>
</body>
</html>
There is all the html code for the Sidebar Menu. This is only Html Code OutputOutput
Sidebar Menu Using HTML,CSS and JavaScript Code
Blank Output because All Html Tag Empty
 

CSS Code For Sidebar Menu

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
* {
  box-sizing: border-box;
}
body {
  --main-bg: #f5f4fd;
  --item-hover: #f9f8fb;
  --secondary-bg: #251d33;
  --main-container-bg: #fff;
  --container-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  --text-color: #00071d;
}
body.dark {
  --main-bg: #00071d;
  --item-hover: #1c2339;
  --secondary-bg: #36415e;
  --main-container-bg: #131c31;
  --text-color: #fff;
  --tooltip-bg: #251d33;
  --container-shadow: rgba(19, 28, 49, 0.2) 0px 7px 29px 0px;
}
html, body {
  width: 100%;
  margin: 0;
  height: 100%;
  font-family: 'Poppins', sans-serif;
}
body {
  background-color: var(--main-bg);
  transition: 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media screen and (max-height: 520px) {
  .sidebar-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.sidebar-container {
  background-color: var(--main-container-bg);
  box-shadow: var(--container-shadow);
  border-radius: 10px;
  padding: 16px;
  transition: width 0.3s ease-in-out;
  position: relative;
  width: 240px;
  height: 100vh;
  max-height: 600px;
}
.sidebar-container.shrink {
  width: 92px;
}
.sidebar-themeInput {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sidebar-themeInputText {
  font-size: 14px;
  opacity: 1;
  transform: translatex(0);
  transition: 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shrink .sidebar-themeInputText {
  width: 0;
  opacity: 0;
  transform: translatex(-8px);
}
.sidebar-themeType {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  z-index: 1;
  flex-shrink: 0;
  line-height: 20px;
}
.shrink .sidebar-themeType {
  width: 100%;
}
.sidebar-themeContainer {
  padding: 4px;
  border-radius: 4px;
  color: var(--text-color);
  overflow: hidden;
  background-color: var(--main-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-themeLabel {
  display: flex;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.sidebar-themeLabel svg {
  width: 18px;
  height: 18px;
}
.shrink .sidebar-themeLabel.switched .light {
  display: none;
}
.sidebar-themeLabel.switched:before {
  left: 50%;
}
.shrink .sidebar-themeLabel.switched:before {
  left: 2px;
}
.sidebar-themeLabel:not(.switched) .shrink .sidebar-themeLabel .dark {
  display: none;
}
.sidebar-themeLabel:before {
  content: "";
  position: absolute;
  z-index: 0;
  display: inline-block;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  border-radius: 4px;
  background-color: var(--main-container-bg);
  left: 2px;
  top: 50%;
  transform: translatey(-50%);
  transition: left 0.3s ease;
}
.shrink .sidebar-themeLabel:before {
  width: calc(100% - 4px);
}
.sidebar-viewButton {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  right: -10px;
  top: 32px;
  display: flex;
  align-items: center;
  padding: 0;
  cursor: pointer;
  transition: 0.3s ease-in-out;
  color: #fff;
  box-shadow: var(--container-shadow);
  background-color: var(--secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-viewButton:hover {
  opacity: 0.8;
}
.sidebar-viewButton svg {
  width: 16px;
}
.shrink .sidebar-viewButton {
  transform: rotatey(-180deg);
}
.sidebar-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.sidebar-listItem {
  color: var(--text-color);
  display: flex;
  align-items: center;
  animation: fadeInItem 0.6s forwards;
  transition: background 0.2s ease-in;
  transform: translatex(-16px);
  opacity: 0;
  padding: 8px 0;
  position: relative;
}
.shrink .sidebar-listItem span {
  visibility: hidden;
}
.sidebar-listItem.active a {
  background-color: var(--main-bg);
}
.sidebar-listItem:not(.active) a:hover {
  background-color: var(--item-hover);
}
.sidebar-listItem:hover .sidebar-listItemText {
  display: inline-block;
  opacity: 1;
  left: calc(100% + 8px);
  visibility: visible;
}
.sidebar-listItem + li {
  border-top: 1px solid var(--item-hover);
}
.sidebar-listItem a {
  width: 100%;
  padding: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.sidebar-listIcon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}
.shrink .sidebar-listIcon {
  margin-right: 0;
}
.sidebar-profileSection {
  display: flex;
  align-items: center;
  margin-top: auto;
  border: 1px solid var(--item-hover);
  padding: 8px 10px;
  border-radius: 28px;
  overflow: hidden;
  height: 60px;
  flex-shrink: 0;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
}
.sidebar-profileSection:hover {
  background-color: var(--item-hover);
}
.sidebar-profileSection img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}
.sidebar-profileSection span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-color);
}
.shrink .sidebar-profileSection span {
  display: none;
}
.shrink .sidebar-profileSection {
  border-radius: 50%;
}
.sidebar-listItemText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}
.shrink .sidebar-listItemText {
  position: absolute;
  padding: 8px;
  left: 100%;
  opacity: 0;
  background-color: var(--secondary-bg);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.sidebar-listItem:nth-child(n + 0) {
  animation-delay: 0s;
}
.sidebar-listItem:nth-child(n + 1) {
  animation-delay: 0.2s;
}
.sidebar-listItem:nth-child(n + 2) {
  animation-delay: 0.4s;
}
.sidebar-listItem:nth-child(n + 3) {
  animation-delay: 0.6s;
}
.sidebar-listItem:nth-child(n + 4) {
  animation-delay: 0.8s;
}
.sidebar-listItem:nth-child(n + 5) {
  animation-delay: 1s;
}
@keyframes fadeInItem {
  100% {
    transform: translatex(0px);
    opacity: 1;
  }
}
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)Now we write Html code for the structure of the sidebar and write css code for styling, now we need only JavaScript code for the main functionality in the sidebar. we write javascript code in the next step.Html + Css Code Output

Sidebar Menu Using HTML,CSS and JavaScript Code

JavaScript Code For Sidebar Menu

"use strict";

const {
  useState
} = React;

const Sidebar = () => {
  const [isShrinkView, setIsShrinkView] = React.useState(false);
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  const handleSidebarView = () => {
    setIsShrinkView(!isShrinkView);
  };

  const handleThemeChange = () => {
    setIsDarkMode(!isDarkMode);
    document.body.classList.toggle("dark");
  };

  return /*#__PURE__*/React.createElement("div", {
    className: `sidebar-container${isShrinkView ? " shrink" : ""}`
  }, /*#__PURE__*/React.createElement("button", {
    className: "sidebar-viewButton",
    type: "button",
    "aria-label": isShrinkView ? "Expand Sidebar" : "Shrink Sidebar",
    title: isShrinkView ? "Expand" : "Shrink",
    onClick: handleSidebarView
  }, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    class: "feather feather-chevron-left"
  }, /*#__PURE__*/React.createElement("polyline", {
    points: "15 18 9 12 15 6"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-themeContainer"
  }, /*#__PURE__*/React.createElement("label", {
    labelFor: "theme-toggle",
    className: `sidebar-themeLabel${isDarkMode ? " switched" : ""}`
  }, /*#__PURE__*/React.createElement("input", {
    className: "sidebar-themeInput",
    type: "checkbox",
    id: "theme-toggle",
    onChange: handleThemeChange
  }), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-themeType light"
  }, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "5"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-themeInputText"
  }, "Light")), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-themeType dark"
  }, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("path", {
    d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-themeInputText"
  }, "Dark")))), /*#__PURE__*/React.createElement("ul", {
    className: "sidebar-list"
  }, /*#__PURE__*/React.createElement("li", {
    className: "sidebar-listItem active"
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    stroke: "currentColor",
    viewBox: "0 0 24 24",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "3",
    rx: "2",
    ry: "2",
    className: "sidebar-listIcon"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M3 9h18M9 21V9"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-listItemText"
  }, "Dashboard"))), /*#__PURE__*/React.createElement("li", {
    className: "sidebar-listItem"
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("polyline", {
    points: "22 12 16 12 14 15 10 15 8 12 2 12"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-listItemText"
  }, "Inbox"))), /*#__PURE__*/React.createElement("li", {
    className: "sidebar-listItem"
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "4",
    width: "18",
    height: "18",
    rx: "2",
    ry: "2"
  }), /*#__PURE__*/React.createElement("line", {
    x1: "16",
    y1: "2",
    x2: "16",
    y2: "6"
  }), /*#__PURE__*/React.createElement("line", {
    x1: "8",
    y1: "2",
    x2: "8",
    y2: "6"
  }), /*#__PURE__*/React.createElement("line", {
    x1: "3",
    y1: "10",
    x2: "21",
    y2: "10"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-listItemText"
  }, "Calendar"))), /*#__PURE__*/React.createElement("li", {
    className: "sidebar-listItem"
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("polyline", {
    points: "22 12 18 12 15 21 9 3 6 12 2 12"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-listItemText"
  }, "Activity"))), /*#__PURE__*/React.createElement("li", {
    className: "sidebar-listItem"
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
    className: "sidebar-listIcon"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "12",
    cy: "12",
    r: "3"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"
  })), /*#__PURE__*/React.createElement("span", {
    className: "sidebar-listItemText"
  }, "Settings")))), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-profileSection"
  }, /*#__PURE__*/React.createElement("img", {
    src: "https://assets.codepen.io/3306515/i-know.jpg",
    width: "40",
    height: "40",
    alt: "Monica Geller"
  }), /*#__PURE__*/React.createElement("span", null, "Monica Geller"))));
};

ReactDOM.render( /*#__PURE__*/React.createElement(Sidebar, null), document.getElementById("root"));
Now we Write All the necessary code for a sidebar. let’s see the final output

Final Output Of Sidebar Menu Using HTML, CSS and JavaScript

Sidebar Menu Using HTML,CSS and JavaScript Code

Sidebar Menu Using HTML,CSS and JavaScript CodeSidebar Menu Using HTML,CSS and JavaScript CodeNow that we have completed our javascript section, our updated output with javascript. I hope you like the Sidebar. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.Thank you!Written by – Code With Random/AnkiCode By – Aybüke Ceylan

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!



Leave a Reply