tabler icon indicating copy to clipboard operation
tabler copied to clipboard

feat: improve vertical sidebar with minification, theme mode and user menu when header is disabled

Open bastienrossi opened this issue 1 year ago • 4 comments

Hi,

I saw that an issue has been open for some time https://github.com/tabler/tabler/issues/1803 concerning the improvement of the sidebar in vertical mode. I've made some modifications for my needs, so I'm proposing a PR with the code. I've tried to use as little javascript as possible with the bootstrap collapse system, but I'd like your opinion on whether you think this is a good idea or whether it's preferable to use dedicated management. I've added a sidebar.js script to manage tooltips when the sidebar is minimized. I've also added a button to switch from dark to light mode and a user menu that opens over the sidebar to avoid conflicts. I added these two elements because when the header is not in use, access to the user menu and dark mode is not possible.

Don't hesitate to give me feedback on what's wrong so that I can propose an improvement.

Here's how it looks: menu-with-header-and-footer menu-footer-opened menu-minified menu-minified-footer-opened menu-minified-hover

Thanks

bastienrossi avatar Jan 06 '25 13:01 bastienrossi

⚠️ No Changeset found

Latest commit: 48ed814cd0742aaf2c302ea6b55b8f01e5b3b7cb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Jan 06 '25 13:01 changeset-bot[bot]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
tabler ✅ Ready (Inspect) Visit Preview Jan 13, 2025 10:43am

vercel[bot] avatar Jan 06 '25 13:01 vercel[bot]

wow, it looks awesme!

codecalm avatar Jan 10 '25 21:01 codecalm

Would be a really great feature to have at the same time some nav-header, like Projects as @codecalm designed it:

image

They will not be visible when the navbar is collapsed: image

cavasinf avatar Jan 27 '25 16:01 cavasinf