An interactive menu that opens to the bottom of a button using Svelte and Tailwind CSS. For this component to properly work, you will need to install popper.js into your project. Please run the following: npm i -E @popperjs/core@2.4.4
Full Answer
Creating a sidebar menu in Svelte
A common requirement for web apps is a sidebar menu, at least on mobile, sometimes on desktop too.
Component Tree
First, let's think 🤔 about what kind of components we need in our tree:
Navigation bar
In our navigation, we'll use Tailwind's justify-between to keep the hamburger and logo on the left, with the menu on the right.
Floating Sidebar
The sidebar component is an <aside> that is offscreen by default left: -100%, but when open == true, the class .open is added, which transitions the sidebar to left: 0. That makes it slide across the screen.
The navbar Svelte script logic
This section of the Svelte component is what handles our state, menu items, and even handlers.
The markup
Some key parts to this section is the class conditionals, attaching the handleMobileIconClick function to a click event, and going through a an each loop to render the menu items.
The styles
Here are the styles that make up the navgiation bar, mobile menu icon, and it’s transitions.
Full code
I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!
