microsoft
feat: Add TopBar Component
🙋 Feature Request
The Top Bar Component that Replaces the Top Black Bar on Fluent Blazor Demo Site aka AppBar Component that we can find on Mobile Apps.
💁 Possible Solution
Implementing a Root TopBar Component aka MainTopBar that Cascades the Values from Childrens TopBar Component,
For example, The Main layout Does Contains MainTopBar That Default has Prefix Content and Suffix Contents and flags to Show Hamburger and Back buttons, On the Page Level We can Add Normal Top Bar, Which Cascades Values to MainTopBar, In this case we have only one Global TopBar Which is MainTopBar, NormalTopBar Used to Set the Values for MainTopBar
🔦 Context
This feature would be super useful on Maui Blazor Hybrid Projects and Also on Web Projects as well. Mainly this would be super useful on Mobile Views, Where We have Back Button Enabled for Specific Views and Showing Hamburger Buttons and Additionally We can Provide Users With Suffix and Prefix Content as RenderFragment
💻 Examples
Hi Aathif,
It is not exactly clear to me what the component should do. Can you add some more screenshots or links to similar components that are already out there.
Hi Aathif,
It is not exactly clear to me what the component should do. Can you add some more screenshots or links to similar components that are already out there.
https://mudblazor.com/components/appbar
Most cases it works like the appbar with additional stuffs. Top Bar Can be Useful when the Hamburger Menu is Hidden or In Blazor Hybrid Projects where Back Button is not available on Desktop and Mobile Application, Having This Component Would be super useful,
In summary, What we going to do here is Have AppBar aka TopBar Component that Works on Desktop and Mobile
Feel free to let me know, I'm happy to work on POC for this.
What I have mind for implementation is, Have a MainTopBar Component that goes into Main Layout and Listenes for Values on ChildTopBar Component, The ChildTopBar Component Used for Setting the Value doesn't have Any UX,
For example, childTopBar Component Does does Take some Function for Whatever Back Button Should do and etc.. and Also Some Properties to Set the Title and Provides some RenderFragment for Customization and etc..
If you want to work on this, sure. But we might conclude that it is not suited for us to take in. It might be something for the community extension library that is in incubation now. Let's see.
Just do not call it FluentAppBar as that one already exists.
One could argue that this functionality should be provided by the FluentLayout or FluentMainLayout and using the same breakpoint system as FluentGridItem. But that would mean we need 2 additional RenderFragments, one for header and one for navigation. Also we either need to pass a lot of parameters to let users customize the header and navigation as the component would render these.
Edit: Nvm, looking at the V5 Layout, this already includes the hamburger menu.
I'm closing this one as well. In v5 there will be new options to create layouts. Basically you can customize the menu in any way you want.
But I agree a simple way for creating a bsic menu with icons and submenus could be useful. Perhaps this might be something we can deliver with the community extensions.
https://github.com/Community-Toolkit-for-Fluent-UI-Blazor/fluentui-blazor-community-extensions
Feel free to create a PR there with a draft.
