multi-menu modal
I have a main site with mutlitple buttons.
each one will open a popup modal that has options for that specific section.
i have a modal component.
i'm thinking how i should structure it
either
or
& each menu has a modal in it
53 Replies
menus shouldnt open modals, but should open dropdowns
expound please
thats what modals cant do: expand
imagine im a visually impaired person and navigate a menu that opens a modal
how long will it take me to navigate back and forth from the same item?
imagine i have a menu with categories
if it expands, the visually impaired user gets feedback that the categories can get expanded
then, the user presses space and gets feedback the menu was expanded
i understand this, But what if there is no one visualy impaired using this app, and it's only locally hosted does this still apply?
and then can navigate over the options and go back to the categories and close it (or press escape)
yes, modals are a very shitty ui for sub-menus
even those stupid search modals are horrible ui
ok, this is what i needed.
now, how might i implement this in svelte?
well, you can have an ul that is hidden while the parent has
aria-collapsed set to false
and when clicked, it toggles between true and false
the rest is css
it should use a button of type button for toggling
you can look at how bootstrap implements it, and improve on itso?
?
yes
wait, no
the button is outside the ul
just look at how bootstrap 5.3 does it
last time i used bootstrap was like 6 years ago, i'm not the most fluent with it
nor have a taken a glipse into it's source code
you don't have to
just look at the documentation
the rest, you can interpolate yourself
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
yup
check the examples
also, check the navbar with a dropdown
ah, i'm so smart, i didn't see the examples section 😐
but, when i have one of the menus open, it would hide the other ones, including the button.
when i close one, it will show the rest?
yes, and bootstrap handles that automatically
but, because i'm not using bootstrap, i'll implement it myself.
optimaly, in a component?
basically, yes
but instead of just getting down to coding, check if there's any implementation of it already
is flowbite good? https://flowbite-svelte.com/, it's been poping up for me whenever i google anything todo with svelte ui.
ew, uses tailwind
i have not delved into tailwind before, it seems way to messy. is that your problem with it?
yes, that's my only problem with it
fair point
https://flowbite-svelte.com/docs/components/dropdown <-- the code is very simple
well, that's just their abstracted components.
and, it seems it only supports out-of-dom menues.
i want mine, in the dom,,
https://flowbite-svelte.com/docs/components/navbar#Navbar_with_dropdown <-- this is what you want
well, i'm not sure i'll use flowbite.
it seems pretty decent, not gonna lie
but it isn't even version 1
exactly..
, but i would like to use a UI component library, instead of just writing everything myself.
i might use flowbite, it's just i'd have tailwind installed, and all those clases :/
i'm watching https://www.youtube.com/watch?v=qyG-xWjNZKU
Joy of Code
YouTube
I Tried Every Svelte UI Library
List of Svelte UI libraries.
🔴 Patreon: https://www.patreon.com/joyofcode
𝕏 Twitter: https://twitter.com/joyofcodedev
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ
🔥 Uses: https://www.joyofcode.xyz/uses
🔗 Svelte UI Libraries: https://joyofcode.xyz/svelte-ui-libraries
🔖 Timestamps
0:00 Intro
0:37 Melt UI
4:49 Bits UI
7:55 Skeleton UI
9:4...
im not very well versed in svelte, so, the best i can offer is the basic ideas and examples that others do
but tailwind is a liability, in my opinion
me too :)
yes, the classes are absolute nightmare fuel
having to learn every, single, abreviation
i usually just say that tailwind is just inline styles in classes
and sadly, it isn't so far from the truth
yeah
*maybe a little worse :/
it's worse, because mostly the same content is present 3 times: once in the class name, once in the css file and once in the actuall css property
so, this is what i'm thinking.
side menus are a terrible idea for a simple reason:
imagine having to travel to the other side of the world to change page
ok, this app is local, only for events, and will 99.999% only be opened on cheep laptops and iphones.
and no-one is bringing an ultrawide monitor.
but, it might also work to center the mobile idea on desktop.
if it is just for yourself, do whatever the hell you want
if it is for the public, you have to be very careful and consider these idiotic screens
⤴️ ?
i cant envision how that would work
those paint skills look good, but actually using it is probably going to be a different experience
i can see it wasting a ton of space or not being that nice to use
so, how would you do it?
personally, im a lazy fuck and would just use bootstrap 🤣
but i would use a normal boring regular navbar
ok, but how would you lay it out?
just the normal navbar everything uses
would this be more a #ui-ux question?
honestly, i don't think so
but i don't know
well, i have kindof driffted away from the how do i implement a multiple menu modal to how do i structure my whole application UI/UX
try asking there then, if you think it is relevant there