Navbar with links #34
Conversation
|
Visit the preview URL for this PR (updated for commit 4e71b5d): https://mmp-site-b1c9b--pr34-navbar-init-h7jsomls.web.app (expires Thu, 14 Mar 2024 16:05:54 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 4eb870c89e876f1812e204af417359065d2a23b1 |
| <script> | ||
| class NavbarHamburger extends HTMLElement { | ||
| constructor() { | ||
| super() | ||
|
|
||
| let isHidden = true | ||
| const button = this.querySelector("button") | ||
| const menuElement: HTMLElement = document.getElementById("#menu-body")! | ||
| button?.addEventListener("click", () => { | ||
| isHidden = !isHidden | ||
| if (isHidden) { | ||
| menuElement.style.display = "none" | ||
| } else { | ||
| menuElement.style.display = "inherit" | ||
| } | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| customElements.define("navbar-hamburger", NavbarHamburger) | ||
|
|
||
| </script> |
There was a problem hiding this comment.
This is neat, is this how Astro recommends doing things? I would have done this with straight css
There was a problem hiding this comment.
Yes, isn't it interesting?
There was a problem hiding this comment.
That is how you add event listeners with astro!
There was a problem hiding this comment.
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
I wonder it there are any real differences between web components and astro components
There was a problem hiding this comment.
My understanding is that there's very little difference!
Added
Tailwind added
Prettier integration with tailwind requires plugin
Changed
consts.ts
Added array of navbar links
Header.astro
Removed default blog-related things
Removed style tags in favor of inline Tailwind styling
HeaderLink.astro
Removed style tags in favor of inline Tailwind styling
Helpful Links
Tailwind:
Images
Full View
Tablet & Mobile
Tablet & Mobile, clicked hamburger