From d72bdb614d3977bc329eb058408d343d4e2fc314 Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Wed, 26 Jan 2022 22:25:58 +0000 Subject: [PATCH] i stg --- client/public/components/components.js | 4 +- client/public/components/navbar/navbar.css | 169 +++++++++++++++++--- client/public/components/navbar/navbar.html | 57 ++++--- client/public/components/navbar/navbar.js | 7 + client/public/global.css | 8 +- client/public/index.html | 4 +- 6 files changed, 203 insertions(+), 46 deletions(-) diff --git a/client/public/components/components.js b/client/public/components/components.js index 9939365..4a7164d 100644 --- a/client/public/components/components.js +++ b/client/public/components/components.js @@ -18,6 +18,7 @@ async function loadComponents() { const components = [ 'navbar' ]; + for (let i = 0; i < components.length; i++) { const path = `./components/${components[i]}/${components[i]}.html`; const component = await sideLoad(path); @@ -38,7 +39,7 @@ async function loadComponents() { const script = document.createElement('script'); script.text = scriptComponent; shadow.appendChild(script); - + // always assume global.css is the first css file const style = document.createElement('style'); style.textContent = styleComponent; @@ -47,6 +48,7 @@ async function loadComponents() { } Object.defineProperty(Template, 'name', {value: components[i]}); customElements.define(`${components[i]}-component`, Template); + } } diff --git a/client/public/components/navbar/navbar.css b/client/public/components/navbar/navbar.css index b63618f..d0915e9 100644 --- a/client/public/components/navbar/navbar.css +++ b/client/public/components/navbar/navbar.css @@ -1,25 +1,156 @@ -.tl-nav-bar { +.logo { + max-width: 200px; +} + +.navbar { + align-items: flex-end; display: flex; - font-family: 'Londrina Solid', cursive; flex-direction: row; - justify-content: center; - align-items: baseline; - align-content: center; - flex-wrap: nowrap; + font-family: 'Londrina Solid', cursive; + font-size: 20px; + margin: auto; + padding: 20px 50px; + color: #111; +} + +.push-left { + margin-left: auto; +} + +/* Menu */ +.hamburger { + background: transparent; + border: none; + cursor: pointer; + display: none; + outline: none; + height: 30px; + position: relative; + width: 30px; + z-index: 1000; +} + +@media screen and (max-width: 768px) { + .hamburger { + display: inline-block; + } +} + +.hamburger-line { + background: #272727; + height: 3px; + position: absolute; + left: 0; + transition: all 0.2s ease-out; width: 100%; - height: 10%; - background-color: #4A6C6F; - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); -}; +} -.tl-nav-item { - display: flex; - font-size: 150%; - flex-grow: 2; -}; +.hamburger:hover .hamburger-line { + background: #777; +} -.nav-bar-logo { +.hamburger-line-top { + top: 3px; +} + +.menu-active .hamburger-line-top { + top: 50%; + transform: rotate(45deg) translatey(-50%); +} + +.hamburger-line-middle { + top: 50%; + transform: translatey(-50%); +} + +.menu-active .hamburger-line-middle { + left: 50%; + opacity: 0; + width: 0; +} + +.hamburger-line-bottom { + bottom: 3px; +} + +.menu-active .hamburger-line-bottom { + bottom: 50%; + transform: rotate(-45deg) translatey(50%); +} + +.nav-menu { display: flex; - flex-shrink: 3; - order: -1; -}; + list-style: none; + margin: 0; + padding: 0; + transition: all 0.25s ease-in; +} + +@media screen and (max-width: 768px) { + .nav-menu { + background: #E4D6FF; + flex-direction: column; + justify-content: center; + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translatey(-100%); + text-align: center; + } + .menu-active .nav-menu { + transform: translatey(0%); + opacity: 1; + } +} + +.nav-menu .menu-item a { + color: #444; + display: block; + line-height: 30px; + margin: 0px 10px; + text-decoration: none; + text-transform: uppercase; +} + +.nav-menu .menu-item a:hover { + color: #777; + text-decoration: underline; +} + +@media screen and (max-width: 768px) { + .nav-menu .menu-item a { + font-size: 20px; + margin: 8px; + } +} + +.sub-nav { + border: 1px solid #ccc; + display: none; + position: absolute; + background-color: #E4D6FF; + padding: 5px 5px; + list-style: none; + width: 230px; +} + +@media screen and (max-width: 768px) { + .sub-nav { + position: relative; + width: 100%; + display: none; + background-color: rgba(0, 0, 0, 0.20); + box-sizing: border-box; + } +} + +.nav-link:hover + .sub-nav { + display: block; +} + +.sub-nav:hover { + display: block; +} diff --git a/client/public/components/navbar/navbar.html b/client/public/components/navbar/navbar.html index d5a774b..2198817 100644 --- a/client/public/components/navbar/navbar.html +++ b/client/public/components/navbar/navbar.html @@ -1,25 +1,34 @@ - -
-
- +
+ diff --git a/client/public/components/navbar/navbar.js b/client/public/components/navbar/navbar.js index e69de29..16f832e 100644 --- a/client/public/components/navbar/navbar.js +++ b/client/public/components/navbar/navbar.js @@ -0,0 +1,7 @@ +const menuToggler = document.querySelector('navbar-component').shadowRoot.querySelector('#menu-toggler'); +const navMenu = document.querySelector('navbar-component').shadowRoot.querySelector('.navbar'); + +menuToggler.addEventListener('click', function() { + menuToggler.classList.toggle('menu-active'); + navMenu.classList.toggle('menu-active'); +}); diff --git a/client/public/global.css b/client/public/global.css index d481d3b..a123607 100644 --- a/client/public/global.css +++ b/client/public/global.css @@ -3,7 +3,13 @@ body { font-size: 14px; line-height: 1.42857143; color: #333; - background-color: rgb(241, 241, 241); + text-decoration: none; + /* background-color: rgb(241, 241, 241); */ + background-color: #D7C2FF; + width: 70%; + display: block; + margin-left: auto; + margin-right: auto; } .text { diff --git a/client/public/index.html b/client/public/index.html index 5660b4b..a30df7f 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,10 +1,12 @@ LegoLog Home! + - + +