Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
614 stars 27 forks source link

NavigationView #40

Open Tropix126 opened 2 years ago

Tropix126 commented 2 years ago

One of WinUI's most important (and most complex) components is NavigationView, which provides the base layout for most apps. NavigationView provides the base layout for most apps with either a sidebar or navigation strip.

image

image

Tropix126 commented 2 years ago

I think that it's probably best to split this into two components, considering how different they are. Also not sure about the viability of topnav's overflow menu with traditional slots. We'll see.

Tropix126 commented 2 years ago

thinking of something like this

<NavigationView variant="standard | narrow | minimal" backButton menuButton expanded on:expand on:collapse on:back>
    <svelte:fragment slot="title">
        Header
    </svelte:fragment>

    <svelte:fragment slot="header">
        <AutoSuggestBox placeholder="Search" />
    </svelte:fragment>

    <svelte:fragment slot="items">
        <NavigationViewItem>Item 1</NavigationViewItem>
        <NavigationViewItem>Item 2</NavigationViewItem>
        <NavigationViewItem>Item 3</NavigationViewItem>
        <NavigationViewItem>Item 4</NavigationViewItem>
    </svelte:fragment>

    <svelte:fragment slot="footer">
        <NavigationViewItem>Settings</NavigationViewItem>
    </svelte:fragment>

    <TextBlock variant="title">Page Title</TextBlock>
</NavigationView>
d2dyno1 commented 2 years ago

How much customization will be available? Would it work for navigating pages as well?

Tropix126 commented 2 years ago

How much customization will be available? Would it work for navigating pages as well?

I think that this will ideally just be for layout. I'll leave the navigation up to a routing library of the user's choice, since things start to get very complicated and unwieldy at that point.