Feature Request: `AppBar` menu icon customization
vanderburg opened this issue · comments
Would it be possible to add a menuIcon prop on AppBar with a default of the mdiMenu icon?
For example:
<AppBar /> = <AppBar menuIcon /> = <AppBar menuIcon={true} />
would all produce the current AppBar.
One might also want to do <AppBar menuIcon={false} /> if they have no aside, or potentially:
<AppBar menuIcon={$largeScreen ? false : mdiDotsVertical} />
It would also be useful to add the rounded prop for the button, so I might do <AppBar menuIcon={mdiSilverware} rounded> to get a less round icon.
It also occurred to me that someone might want a different icon when the aside is open as to when it's collapsed, but I've reached the limit of my understanding that might articulate how that would work.
Quick thought, but allowing menuIcon as a prop (and set to null / undefined to remove), as well as wrapping the current...
<Button icon={mdiMenu} on:click={() => ($showDrawer = !$showDrawer)} class="p-3" /><slot name="menuIcon" toggleMenu={() => $showDrawer = !$showDrawer} isMenuOpen={$showDrawer}>
<Button icon={mdiMenu} on:click={() => ($showDrawer = !$showDrawer)} class="p-3" />
</slot>would allow for...
<AppBar>
<svelte:fragment name="menuIcon" let:toggleMenu let:isMenuOpen>
<Button let icon={isMenuOpen ? iconOpen : iconClosed} on:click={toggleMenu} class="p-3" />
</svelte:fragment>
</AppBar>We do a similar hiding of icons if null passed on MenuButton
Also, the slot would enable adding transitions or CSS animations based on the state. Icon could be an arrow that points left or rotates right based on the state of the drawer, for example.
@vanderburg Does this work for your use cases?
Oh, those look like they'd work nicely! Especially just letting me modify the whole slot, I can't think of anything I might want to do that that wouldn't allow.