This PR allows attributify for `variant`, `size` and `color` props. This allows using shorthands, instant of writing full props.
We also added a small computed method to ensure these does not show up
in the DOM and pollute it
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
This pull request introduces a new `ChannelIcon` component and refactors the existing code to use this component, which simplifies the icon management for different channel types and providers.
This PR updates the background used in dropdown to match our design system. Previous PR failed to add this correctly.
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
This PR adds dropdown primitives to help compose custom dropdowns across the app. The following the sample usage
---------
Co-authored-by: Pranav <pranav@chatwoot.com>
The last item in the sidebar top level group has an indicator specified,
the problem in our case is that the structure can be nested and have sub
groups. So selecting the last item correctly can be tricky.
Previous implementation relied on the using DOM queries to find the last
item from a flat list of children, it would trigger on a `watch`. This
was error-prone as well as non idiomatic. The new approach is CSS-only
and reduces the unnecessary compute required.
Codepen for reference: https://codepen.io/scmmishra/pen/yLmKNLW
---------
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Ensures users are seamlessly directed to the first available menu item upon opening a group, improving UX by reducing unnecessary clicks. This change enhances navigation flow within groups.
Co-authored-by: Pranav <pranavrajs@gmail.com>
This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes
- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.
----
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
