Add sidebar component

[zhiyanzhaijie]

related: #160

A new sidebar component is added with followed changes:

• r#as and merged_attribute in multiple components

1. in primitive/lib.rs, add meged_attribute for component withr#as, handle class/props of component(TODO: event handler)
2. r#as support - collapsible,tooltip, dropdown_menu

• Style optimization

1. better theme display of separator
2. add gap in dropdown menu item

• Add sidebar component

1. SidebarProvider and others
2. use_sidebar hook
3. use_is_mobile hook (considering the right position in a shared module)
4. doc and variant preview (playwright test)

• Block component type and its display

1. A new component type that need to be show in a isolate html, sidebar as example
2. Change preview/src/main.rs, preview/src/mod.rs to allow block component display, by:
   - 2.1 extend example! macro
   - 2.2 add Route and component for block component, implement isolate envrionment by iframe (Only work in web platform now, not Desktop supported)
   - 2.3 refactoring theme sync, add theme.rs by set theme cookies and sychronize theme change across mutilple iframe by BroadcastChannel
   - 2.4 extractor html (--dark/--light) logic from main.css to dx-component-theme.css

lacks:

1. using extra class in demo of sidebar to correctly show dropdown cotent (need floating ui)
2. tooltip is now not working in sidebar collapsible (overflow: hidden) (need a unifying portal solution, those thing will be nice when mounted in the root of )
3. mege_attribute is now experiment, consult needed

Big changes with r#as in others component, sry about that

[github-actions]

Preview available at https://dioxuslabs.github.io/components/pr-preview/pr-177/

[ealmloff]

Thanks for working on this, the sidebar itself mostly looks right, but some of these changes will make the components harder to maintain in the long run.

Adding as everywhere is useful, but makes the attributes significantly harder to maintain. I would rather add support for some of this in core. An attributes macro that accepts the same syntax as the element body but expands to Vec<Attribut> would make this a lot easier to maintain:

attributes!{
    width: 100,
    onclick,
}

This will also need some playright tests for the sidebar behavior before it can be merged

[ealmloff]

Do we need two open signals/callbacks?

[zhiyanzhaijie]

Same interface with shadcn.
I thought they keep two open state management methods because of the separation between the sidebar (not mobile) and the sheet (mobile).

• diff UI pattern: sidebar keep displaying in layout no matters collapsible or not while mobile's display depending on open state
• state persiste: I haven't complete the state persistence now, but in shadcn, sidebar's state persisted by document.cookie and sheet's state work as temporary

In conclusion, I think shadcn keeps two state managers for separation of concerns. Picking the combination of sheet and sidebar, this should be keep also

[zhiyanzhaijie]

@ealmloff sidebar has done some optimization and added playwright test now. I keep the sheet/sidebar separation for the reason I replied.

There is still a Clippy check errors about format!(), but the newer Clippy checked pass, I think the code now is clearer than the way of inline variables used.

For the inscaleble r#as in everywhere, I don't figure out how to implement optimization, doesn't it need a support in dioxus core or just core of components?

[ealmloff]

It might make sense to upstream into dioxus itself at some point, but for now the macro is fine in the component library. As a slightly odd consequence of how we type check attributes, you still need to put the element name you expect to spread into