diff --git a/public/downloads/sidebar_navbar.zip b/public/downloads/sidebar_navbar.zip
new file mode 100644
index 0000000..6fcb960
Binary files /dev/null and b/public/downloads/sidebar_navbar.zip differ
diff --git a/src/components/ui/elements_list/elementslist.json b/src/components/ui/elements_list/elementslist.json
index eeab4e6..543c8d0 100644
--- a/src/components/ui/elements_list/elementslist.json
+++ b/src/components/ui/elements_list/elementslist.json
@@ -36,6 +36,23 @@
         "images": false,
         "clone_url": "clone https://github.com/wyfir/portfolio_navbar.git",
         "visit_url": "https://github.com/wyfir/portfolio_navbar"
+      },
+      {
+        "title": "Sidebar menu",
+        "description": "",
+        "demo_url": "https://example.com/classic-menu",
+        "path": "/sidebar-navbar",
+        "id": "sidebar-navbar",
+        "code": {
+          "html": "<header class=\"header\" id=\"header\">\n      <nav class=\"nav container\">\n        <a href=\"#\" class=\"nav__logo\">Logo</a>\n        <div class=\"nav__menu\" id=\"nav-menu\">\n          <ul class=\"nav__list\">\n            <li class=\"nav__item\">\n              <a href=\"#home\" class=\"nav__link active-link\">\n                <span>Home</span>\n              </a>\n            </li>\n            <li class=\"nav__item\">\n              <a href=\"#about\" class=\"nav__link\">\n                <span>About Us</span>\n              </a>\n            </li>\n            <li class=\"nav__item\">\n              <a href=\"#projects\" class=\"nav__link\">\n                <span>Projects</span>\n              </a>\n            </li>\n            <li class=\"nav__item\">\n              <a href=\"#studio\" class=\"nav__link\">\n                <span>Studio</span>\n              </a>\n            </li>\n            <li class=\"nav__item\">\n              <a href=\"#contact\" class=\"nav__link\">\n                <span>Contact</span>\n              </a>\n            </li>\n          </ul>\n          <div class=\"nav__close\" id=\"nav-close\">\n            <i class=\"ri-close-line\"></i>\n          </div>\n        </div>\n        <div class=\"nav__toggle\" id=\"nav-toggle\">\n          <i class=\"ri-menu-line\"></i>\n        </div>\n      </nav>\n    </header>\n    <main>\n      <section class=\"container section section__height\" id=\"home\">\n        <h2 class=\"section__title\">Home</h2>\n      </section>\n      <section class=\"container section section__height\" id=\"about\">\n        <h2 class=\"section__title\">About Us</h2>\n      </section>\n      <section class=\"container section section__height\" id=\"projects\">\n        <h2 class=\"section__title\">Projects</h2>\n      </section>\n      <section class=\"container section section__height\" id=\"studio\">\n        <h2 class=\"section__title\">Studio</h2>\n      </section>\n      <section class=\"container section section__height\" id=\"contact\">\n        <h2 class=\"section__title\">Contact</h2>\n      </section>\n    </main>",
+          "css": "/*=============== GOOGLE FONTS ===============*/\n@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500&display=swap');\n\n/*=============== VARIABLES CSS ===============*/\n:root {\n  --header-height: 2.5rem;\n  --white-color: hsl(0, 0%, 100%);\n  --black-color: hsl(0, 0%, 0%);\n  --body-font: 'Montserrat Alternates', sans-serif;\n  --h1-font-size: 1.5rem;\n  --normal-font-size: 0.938rem;\n  --font-regular: 400;\n  --font-medium: 500;\n  --z-tooltip: 10;\n  --z-fixed: 100;\n}\n\n/*========== Responsive typography ==========*/\n@media screen and (min-width: 1150px) {\n  :root {\n    --normal-font-size: 1rem;\n  }\n}\n\n/*=============== BASE ===============*/\n* {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  margin: var(--header-height) 0 0 0;\n  font-family: var(--body-font);\n  font-size: var(--normal-font-size);\n  background-color: var(--white-color);\n}\n\nul {\n  list-style: none;\n}\n\na {\n  text-decoration: none;\n}\n\n/*=============== REUSABLE CSS CLASSES ===============*/\n.container {\n  max-width: 1120px;\n  margin-inline: 1.5rem;\n}\n\n/*=============== HEADER & NAV ===============*/\n.header {\n  position: fixed;\n  width: 100%;\n  top: 0;\n  left: 0;\n  background-color: var(--black-color);\n  z-index: var(--z-fixed);\n}\n\n.nav {\n  position: relative;\n  height: var(--header-height);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.nav__logo {\n  color: var(--white-color);\n  font-weight: var(--font-medium);\n}\n\n.nav__close, \n.nav__toggle {\n  display: flex;\n  color: var(--white-color);\n  font-size: 1.5rem;\n  cursor: pointer;\n}\n\n/* Navigation for mobile devices */\n@media screen and (max-width: 785px) {\n  .nav__menu {\n    position: fixed;\n    left: -100%;\n    top: 0;\n    background-color: var(--black-color);\n    width: 100%;\n    height: 100%;\n    padding: 6rem 3.5rem 4.5rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    transition: left 0.4s;\n  }\n\n  .nav__item {\n    transform: translateX(-150px);\n    visibility: hidden;\n    transition: transform 0.4s ease-out, visibility 0.4s;\n  }\n\n  .nav__item:nth-child(1) { transition-delay: 0.1s; }\n  .nav__item:nth-child(2) { transition-delay: 0.2s; }\n  .nav__item:nth-child(3) { transition-delay: 0.3s; }\n  .nav__item:nth-child(4) { transition-delay: 0.4s; }\n  .nav__item:nth-child(5) { transition-delay: 0.5s; }\n}\n\n@media screen and (max-width: 350px) {\n  .nav {\n    margin: 0 10px 0 10px;\n  }\n}\n\n.nav__list {\n  display: flex;\n  flex-direction: column;\n  row-gap: 2rem;\n}\n\n.nav__link {\n  position: relative;\n  color: rgb(191, 191, 191);\n  font-size: var(--h1-font-size);\n  font-weight: var(--font-medium);\n  display: flex;\n  align-items: center;\n  transition: opacity 0.4s;\n  justify-content: center;\n}\n\n.nav__close {\n  position: absolute;\n  top: 1rem;\n  right: 1.5rem;\n}\n\n/* Show menu */\n.show-menu {\n  left: 0;\n}\n\n/* Animation link when displaying menu */\n.show-menu .nav__item {\n  visibility: visible;\n  transform: translateX(0);\n}\n\n/*=============== BREAKPOINTS ===============*/\n/* For large devices */\n@media screen and (min-width: 785px) {\n  .container {\n    margin-inline: auto;\n  }\n\n  .nav {\n    height: calc(var(--header-height) + 2rem);\n  }\n\n  .nav__toggle, \n  .nav__close { display: none; }\n\n  .nav__link { font-size: var(--normal-font-size); }\n\n  .nav__link i { font-size: 1.5rem; }\n\n  .nav__list { flex-direction: row; column-gap: 3.5rem; }\n\n  .nav__menu { display: flex; align-items: center; column-gap: 3.5rem; }\n}\n\n@media screen and (max-width: 1150px) {\n  .nav { margin: 0 20px 0 20px; }\n}\n\n.section {\n  padding: 4.5rem 0 2rem;\n}\n\n.section__title {\n  font-size: var(--h1-font-size);\n  color: var(--title-color);\n  text-align: center;\n  margin-bottom: 1.5rem;\n}\n\n.section__height {\n  height: 100vh;\n}\n\n.active-link {\n  color: white;\n}\n\n.active-link::before {\n  content: \"\";\n  position: absolute;\n  bottom: -0.5rem;\n  width: 35px;\n  height: 2px;\n  background-color: white;\n  border-radius: 3px;\n  transition: width 0.4s ease-out;\n}\n\n@media screen and (max-width: 800px) {\n  .nav__link { font-size: 1rem; }\n}",
+          "js": "/*=============== SHOW MENU ===============*/\nconst navMenu = document.getElementById(\"nav-menu\"),\n  navToggle = document.getElementById(\"nav-toggle\"),\n  navClose = document.getElementById(\"nav-close\"),\n  navLinks = document.querySelectorAll(\".nav__link\");\n\n/* Menu show */\nif (navToggle) {\n  navToggle.addEventListener(\"click\", () => {\n    navMenu.classList.add(\"show-menu\");\n  });\n}\n\n/* Menu hidden */\nif (navClose) {\n  navClose.addEventListener(\"click\", () => {\n    navMenu.classList.remove(\"show-menu\");\n  });\n}\n\n/* Close nav-menu when a nav-link is clicked */\nnavLinks.forEach((link) => {\n  link.addEventListener(\"click\", () => {\n    navMenu.classList.remove(\"show-menu\");\n  });\n});\n\n/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/\nconst sections = document.querySelectorAll(\"section[id]\");\n\nfunction scrollActive() {\n  const scrollY = window.pageYOffset;\n\n  sections.forEach((current) => {\n    const sectionHeight = current.offsetHeight,\n      sectionTop = current.offsetTop - 50,\n      sectionId = current.getAttribute(\"id\");\n\n    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {\n      document\n        .querySelector(\".nav__menu a[href*=\" + sectionId + \"]\")\n        .classList.add(\"active-link\");\n    } else {\n      document\n        .querySelector(\".nav__menu a[href*=\" + sectionId + \"]\")\n        .classList.remove(\"active-link\");\n    }\n  });\n}\nwindow.addEventListener(\"scroll\", scrollActive);\n\n/*=============== CHANGE BACKGROUND HEADER ===============*/\nfunction scrollHeader() {\n  const header = document.getElementById(\"header\");\n  // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag\n  if (this.scrollY >= 80) header.classList.add(\"scroll-header\");\n  else header.classList.remove(\"scroll-header\");\n}\nwindow.addEventListener(\"scroll\", scrollHeader);"
+        },
+        "important": "<div class=\"action_toadd_block\"><div class=\"fr_action_block\"><p>Add this to the head of html: </p><input class=\"value_imput\" type=\"text\" value=\"<link href='https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css' rel='stylesheet'>\" readOnly/></div><div class=\"sec_action_block\"><p>In this element were used icons from boxicons so please don’t forget to add this link to your html head.</p></div></div>",
+        "download_path": "/downloads/sidebar_nav.zip",
+        "images": false,
+        "clone_url": "clone https://github.com/wyfir/sidebar_navbar.git",
+        "visit_url": "https://github.com/wyfir/sidebar_navbar"
       }
     ]
   },