Feat: add Sidebar component

[DMouayad]

close #239

Changes

New Components

• ShadSidebarScaffold
• ShadSidebar
• ShadSidebarContent
• ShadSidebarHeader
• ShadSidebarFooter
• ShadSidebarGroup
• ShadSidebarItem
• ShadSidebarTrigger
• ShadSidebarSeparator

Arch Breakdown

Why ShadSidebarScaffold ?

Well, this's because in the original Shadcn when a sidebar collapses two things happen:

• The sidebar slides out of view to the right\left.
• The main content animates to take full screen width.

So this means:

• The sidebar animate it's size & position when collapsing\extending.
• We need to have control on how the main screen content is rendered in order to animate it.

In addition, the original shad sidebar can be used as a child of any component(Widget in case of Flutter). For example, in a dialog or a popover.

As a result, we had to separate the actual sidebar component from the "wrapper". This's how it's also implemented in the original shad.

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider> // --> Sidebar wrapper
      <AppSidebar /> // --> Actual sidebar
      <main> // --> main content
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  )
}

Theme

• ShadSidebarTheme

Docs & Playground

I added a new page for the sidebar component in the docs site with the required example apps in the playground.
Since this's a fairly complex component, the docs page goes over each new sub-component(widget) and its props and how to use it.

NOTE: some parts need to be updated with the final sidebar version.

TODO

• Test keyboard accessibility.
• Add missing documentation.
• Fix example app when sidebars collapse to icons.
• Fix sidebar-on-mobile transition(Original Shadcn has a different transition for the overlay(barrier) and the sheet).
• Find a way to adjust the shad dialog-route exit-duration (used for sidebar on mobile) [Related feat(dialog): allow custom exit-transition duration #462 Setting reverseDuration for `showShadDialog` #461 ].
• Update Playground.
• Update docs.

Pre-launch Checklist

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• I read and followed the [Flutter Style Guide].
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making.
• I followed the [Data Driven Fixes] where supported.
• All existing and new tests are passing.
• I bumped the package version following the Semantic Versioning guidelines (For now the major is the second number and the minor the third, because the package is not feature complete). For example, if the package is at version 0.18.0 and you introduced a breaking change or a new feature, bump it to 0.19.0, if you just added a fix or a chore bump it to 0.18.1.
• I updated the CHANGELOG.md file with a summary of changes made following the format already used.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nank1ro]

@DMouayad let me know when you need a review, or if you need help continuing this PR

[DMouayad]

@nank1ro If u got some time then Yes I do need some help; this's still a draft but the code can be reviewed.
The actual code for the sidebar is very simple and easily understood- I hope so 😄
The majority of additions in the PR are for the docs, playground and example.

I've been busy lately to complete what's remaining but since this's a complex component, it needs a well thought-out design decisions.

[DMouayad]

I tried to use this in my app and discovered some limitations, we can't have multiple sidebars. also another issue related to this is: we should have ShadSidebarScaffold.sidebar and ShadSidebarScaffold.endSidebar to allow the users to specify both at the same time.
Looking at the Flutter's Scaffold, it uses a GlobalKey for each Drawer state so I'm planning to test how that would work for us.

Resolved in current version