Shadcn Components
Shadcn UI Sidebar

Horizon AI Boilerplate - @shadcn/ui

Shadcn UI Sidebar

The sidebar is used in our dashboard layout and it takes on several props, since it offers different functionalities like displaying the profile picture of the user, logout button and more. Here is an example of the Navbar component :

/components/layout/index.tsx
import Navbar from '@/components/navbar/NavbarAdmin';
import { routes } from '@/components/routes'; 
import { getActiveRoute } from '@/utils/navigation';
import React from 'react'; 
 
const DashboardLayout: React.FC<Props> = (props: Props) => {
  const pathname = usePathname();
  const [open, setOpen] = React.useState(false);
 
  return (
    .....................
    <div className="flex h-full w-full bg-white dark:bg-background-900">
      <Sidebar
          routes={routes}
          session={props.session}
          userDetails={props.userDetails}
          user={props.session?.user} 
          subscription={props.subscription}
          open={open}
          setOpen={() => setOpen(!open)}
        />
        <main
          className={`mx-2.5 flex-none transition-all md:pr-2 xl:ml-[313px] dark:bg-navy-900`}
        >
          <Navbar
            onOpen={() => setOpen(!open)} 
            userDetails={props.userDetails} 
            brandText={getActiveRoute(routes, pathname)}
          />
      ....................
        </main> 
      </div>
  );
};
 
export default DashboardLayout;
  • routes - passes and object that makes the routes automatically generate
  • onOpen - function that opens/closes the sidebar on the mobile screen
  • open - boolean that dictates if the sidebar on the mobile screen is opened or not
  • userDetails - object that includes user characteristics like name and profile picture
  • user - points to a specific user
  • subscription - object with the subscription owned by the user, doesn't pass anything if the subscription is non-existent
  • session - gives the sidebar user session details

Sidebar