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
<Modal show={modalShow}>
<MenuA bind:this={menuA}/>
<MenuB bind:this={menuB}/>
<MenuC bind:this={menuC}/>
</Modal>
<MainPage>
<pagecontent />
</MainPage>
<Modal show={modalShow}>
<MenuA bind:this={menuA}/>
<MenuB bind:this={menuB}/>
<MenuC bind:this={menuC}/>
</Modal>
<MainPage>
<pagecontent />
</MainPage>
or
<MenuA bind:this={menuA}/>
<MenuB bind:this={menuB}/>
<MenuC bind:this={menuC}/>
<MainPage>
<pagecontent />
</MainPage>
<MenuA bind:this={menuA}/>
<MenuB bind:this={menuB}/>
<MenuC bind:this={menuC}/>
<MainPage>
<pagecontent />
</MainPage>
& each menu has a modal in it
53 Replies
ἔρως
ἔρως3w ago
menus shouldnt open modals, but should open dropdowns
Natejoestev
NatejoestevOP3w ago
expound please
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
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?
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
ok, this is what i needed. now, how might i implement this in svelte?
ἔρως
ἔρως3w ago
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 it
Natejoestev
NatejoestevOP3w ago
so?
<ul>
<li><button>Menu A</button></li>
<li>Menu A</li>
</ul>
<ul>
<li><button>Menu A</button></li>
<li>Menu A</li>
</ul>
?
ἔρως
ἔρως3w ago
yes wait, no the button is outside the ul just look at how bootstrap 5.3 does it
Natejoestev
NatejoestevOP3w ago
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
ἔρως
ἔρως3w ago
you don't have to just look at the documentation the rest, you can interpolate yourself
Natejoestev
NatejoestevOP3w ago
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
ἔρως
ἔρως3w ago
yup check the examples also, check the navbar with a dropdown
Natejoestev
NatejoestevOP3w ago
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?
ἔρως
ἔρως3w ago
yes, and bootstrap handles that automatically
Natejoestev
NatejoestevOP3w ago
but, because i'm not using bootstrap, i'll implement it myself. optimaly, in a component?
ἔρως
ἔρως3w ago
basically, yes but instead of just getting down to coding, check if there's any implementation of it already
Natejoestev
NatejoestevOP3w ago
is flowbite good? https://flowbite-svelte.com/, it's been poping up for me whenever i google anything todo with svelte ui.
ἔρως
ἔρως3w ago
ew, uses tailwind
Natejoestev
NatejoestevOP3w ago
i have not delved into tailwind before, it seems way to messy. is that your problem with it?
ἔρως
ἔρως3w ago
yes, that's my only problem with it
Natejoestev
NatejoestevOP3w ago
fair point
Natejoestev
NatejoestevOP3w ago
well, that's just their abstracted components. and, it seems it only supports out-of-dom menues. i want mine, in the dom,,
Natejoestev
NatejoestevOP3w ago
well, i'm not sure i'll use flowbite.
ἔρως
ἔρως3w ago
it seems pretty decent, not gonna lie but it isn't even version 1
Natejoestev
NatejoestevOP3w ago
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 :/
Natejoestev
NatejoestevOP3w ago
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...
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
me too :)
ἔρως
ἔρως3w ago
yes, the classes are absolute nightmare fuel
Natejoestev
NatejoestevOP3w ago
having to learn every, single, abreviation
ἔρως
ἔρως3w ago
i usually just say that tailwind is just inline styles in classes and sadly, it isn't so far from the truth
Natejoestev
NatejoestevOP3w ago
yeah *maybe a little worse :/
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
so, this is what i'm thinking.
No description
ἔρως
ἔρως3w ago
side menus are a terrible idea for a simple reason:
No description
ἔρως
ἔρως3w ago
imagine having to travel to the other side of the world to change page
Natejoestev
NatejoestevOP3w ago
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.
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
⤴️ ?
ἔρως
ἔρως3w ago
i cant envision how that would work
Natejoestev
NatejoestevOP3w ago
No description
ἔρως
ἔρως3w ago
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
Natejoestev
NatejoestevOP3w ago
so, how would you do it?
ἔρως
ἔρως3w ago
personally, im a lazy fuck and would just use bootstrap 🤣 but i would use a normal boring regular navbar
Natejoestev
NatejoestevOP3w ago
ok, but how would you lay it out?
ἔρως
ἔρως3w ago
just the normal navbar everything uses
Natejoestev
NatejoestevOP3w ago
would this be more a #ui-ux question?
ἔρως
ἔρως3w ago
honestly, i don't think so but i don't know
Natejoestev
NatejoestevOP3w ago
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
ἔρως
ἔρως3w ago
try asking there then, if you think it is relevant there
Want results from more Discord servers?
Add your server