salimi-my / shadcn-ui-sidebar

A stunning, functional and responsive retractable sidebar for Next.js built on top of shadcn/ui.

Hello world!

• 😎 Hi, I’m Salimi
  
• 🔥 Web dev, making websites that are equal parts fun and functional 🎉💻
        No task too big, no bug too small 🐛
• 📫 You can reach me through [email protected]

Socials

Contributions

shadcn-ui-sidebar's Issues

Cannot update a component (`HotReload`)

Encountered the following error:

Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`, follow the stack trace as described in 

In a server page as simple as:

export default async function PublicPage() {
  return redirect(`/`);
}

When it was wrapped by the admin layout. The error was not obvious to me so it took a few hours, but the issue was the state management:

shadcn-ui-sidebar/src/components/admin-panel/admin-panel-layout.tsx

Line 14 in c2ef61d

const sidebar = useStore(useSidebarToggle, (state) => state);

My project is already large, so it wasn't clear the issue was the above link, and I haven't confirmed with a minimal reproducible example, but it might be worthwhile checking it out.

Bottom bar removal?

First of all, thanks to your repo! This is really helpful for me.

I have an issue though, it seems there is a buttom bar and no way to remove it? Removing the footer removes the content., but I was unable to locate the buttom bar's CSS.

Thanks!

License

Assume this is MIT licensed? Can you add to the docs on what the allowed usage of the example is. Look awesome by the way!

Background in sidebar-toggle

Hi,

i used your Sidebar and it works very well, thanks for that!
An issue i found is that when using a differnt color scheme, the background color for the sidebar-toggle is not appropriate anymore.
Especially in dark mode you can see the background color of the button.

I fixed this for me by changing line 13 in the sidebar-toggle.tsx component:

<div className="invisible lg:visible absolute top-[12px] -right-[16px] z-20 bg-white dark:bg-primary-foreground">

And just remove the colors here:

<div className="invisible lg:visible absolute top-[12px] -right-[16px] z-20">

Its not a bug, but i just wanted to mention it :)

Profile tooltip on small screen

Hello,
The profile icon tooltip overflows to the right on small screens and causes a scrollbar to appear.
(in user-nav.tsx)