Sidebar hides on mobile view

[sapkotagaurav]

I have implemented the sidebar with collapse button. The collapse button is inside the sidebar, and the sidebar hides in mobile view. There is no way to access the sidebar in mobile view. I want it to collapse to icons instead of hiding.

This can also be seen on some shadcn blocks.

https://ui.shadcn.com/view/styles/new-york/sidebar-13

sidebar in dialog

https://ui.shadcn.com/view/styles/new-york/sidebar-15
right sidebar in this case

[nyakondaanesu]

also got this problem need help

[codebysid]

Idea is to put < SidebarTrigger /> outside of the main < Sidebar /> component or your project's sidebar component so, user can view and toggle whenever they want

Exmple: Put < SidebarTrigger /> in layout.tsx in nextjs as in shadcn example

import { AppSidebar } from "@/components/app-sidebar"
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  )
}