Skip to content

Commit

Permalink
added sidebar navigation menu to elements_list.json , added files to …
Browse files Browse the repository at this point in the history 
…download sidebar
  • Loading branch information
@ihorvasiuta
ihorvasiuta committed Jul 22, 2024
1 parent e94dc68 commit 745df2c
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 0 deletions.
Binary file added public/downloads/sidebar_navbar.zip
View file
Binary file not shown.
17 changes: 17 additions & 0 deletions src/components/ui/elements_list/elementslist.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
},
Expand Down

0 comments on commit 745df2c

Please sign in to comment.