[blocks]: A closable sidebar

[rrchampavat]

Description

A closable sidebar with a button to handle open and close events. When the sidebar is closed only the icons of the menus should be visible and users should be able to navigate using those icons.

Example

https://ant.design/components/layout#components-layout-demo-custom-trigger

[AbdulrahmanNahhas]

This is another example from NextUI:

https://www.nextui.pro/component/application/sidebar-compact?theme=dark&preview=true

[rrchampavat]

Seems like it is using a pro version component. Is there any alternative way by which we can leverage the community version? 😅

[ishaanw007]

#3652
Please have a look

[trueberryless]

Cool idea, but pls look into GitHub PRs: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests

Or try putting the whole code inside three ticks: ```

[manurakesh]

@rrchampavat, this is a work in progress, but I hope it helps.

sidebar/AppItem.tsx

import { useRouter } from "next/navigation";

interface AppItemProps {
  name: string;
  Icon: React.ElementType; // Keeping it flexible to allow passing any icon component
  AppLink: string;
  isSidebarOpen: boolean;
  activeApp: string | null;
  handleAppClick: (appName: string, appLink: string) => void;
}

export function AppItem({
  name,
  Icon,
  AppLink,
  isSidebarOpen,
  activeApp,
  handleAppClick,
}: AppItemProps) {
  const router = useRouter();
  return (
    <div
      title={!isSidebarOpen ? name : undefined} // Show title as tooltip only when sidebar is collapsed
      className={cn(
        "flex items-center rounded-xl h-10 mx-1 my-1 py-2 space-x-4 dark:hover:bg-gray-800 hover:bg-gray-200",
        activeApp === name ? "bg-blue-500 text-white" : "" // Highlight the active app
      )}
      onClick={() => {
        handleAppClick(name, AppLink);
        router.push(AppLink);
      }}
    >
      <Icon className="flex-shrink-0 min-w-[4] ml-3 h-4" />
      <span className="overflow-hidden whitespace-nowrap">{name}</span>
    </div>
  );
}

sidebar/sidebar.tsx

import { SidebarHeader } from "./sidebarHeader"
import { SidebarFooter } from "./sidebarFooter";
import { AppItem } from "./appItem";
import { HomeIcon, RocketIcon, BackpackIcon, PlusIcon } from "@radix-ui/react-icons"; // Keep your existing icon setup
import { cn } from "@/lib/utils";
import { useRouter } from "next/navigation";

export function Sidebar() {
  const router = useRouter();
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [activeApp, setActiveApp] = useState<string | null>(null);

  const apps = [
    { name: "Home", Icon: HomeIcon, AppLink: "/groupLife" },
    { name: "App 2", Icon: RocketIcon, AppLink: "/groupLife" },
    { name: "Tasks", Icon: BackpackIcon, AppLink: "/groupLife/tasks" },
    { name: "New Application", Icon: PlusIcon, AppLink: "/groupLife/newMemberApplication" },
    // Add more apps here as needed
  ];

  // Load the active app from localStorage on component mount
  useEffect(() => {
    const storedApp = localStorage.getItem("activeApp");
    if (storedApp) {
      setActiveApp(storedApp);
    }
  }, []);

  // Save the active app to localStorage when it changes
  useEffect(() => {
    if (activeApp) {
      localStorage.setItem("activeApp", activeApp);
    }
  }, [activeApp]);

  const handleAppClick = (appName: string, appLink: string) => {
    setActiveApp(appName);
    router.push(appLink);

  };

  return (
    <div
      className={cn(
        "flex flex-col flex-shrink-0 border-r overflow-x-hidden justify-between transition-all duration-500 ease-in-out dark:bg-gray-900 dark:text-white",
        isSidebarOpen ? "w-48" : "w-12" // Width of the sidebar based on whether it's open or collapsed
      )}
    >
      <SidebarHeader
        isSidebarOpen={isSidebarOpen}
        toggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
      />

      <div className="flex-grow flex-col space-y-2">
        {apps.map(({ name, Icon, AppLink }, index) => (
          <AppItem
            key={index}
            name={name}
            Icon={Icon}
            AppLink={AppLink}
            isSidebarOpen={isSidebarOpen}
            activeApp={activeApp}
            handleAppClick={handleAppClick}
          />
        ))}
      </div>

      <SidebarFooter />
    </div>
  );
}

sidebar/SidebarHeader.tsx

import { Button } from "../button";

interface SidebarHeaderProps {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
}

export function SidebarHeader({ isSidebarOpen, toggleSidebar }: SidebarHeaderProps) {
  return (
    <div className="flex border-b p-2 h-12">
      <Button
        variant="outline"
        className="relative h-8 w-8 rounded-s"
        size="icon"
        onClick={toggleSidebar}
      >
        {isSidebarOpen ? "C" : "A"} {/* Can toggle between different icons or letters */}
      </Button>
    </div>
  );
}

sidebar/SidebarFooter.tsx

import { ThemeToggle } from "./theme-toggle";
import { UserNav } from "./user-nav";

export function SidebarFooter() {
  return (
    <div className="flex flex-col space-y-2 mb-2">
      <NotificationCenter />
      <ThemeToggle />
      <UserNav />
    </div>
  );
}

sidebar/theme-toggle.tsx

"use client";

import * as React from "react";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ThemeToggle() {
  const { setTheme, theme } = useTheme();
  const [mounted, setMounted] = React.useState(false);

  // Ensure the component is only rendered after it's mounted on the client
  React.useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    // Return nothing until the component has mounted to avoid hydration error
    return null;
  }
  
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <div className="flex items-center rounded-full h-10 my-1 mx-1 py-2 space-x-4 dark:hover:bg-gray-800 hover:bg-gray-200">
          {theme === "light" && (
            <SunIcon className="flex-shrink-0 h-4 ml-3 scale-100 transition-all dark:scale-0" />
          )}
          {theme === "dark" && (
            <MoonIcon className="flex-shrink-0 ml-3 h-4 scale-0 transition-all dark:scale-100" />
          )}
          <span className="overflow-hidden whitespace-nowrap">
            Toggle Theme
          </span>
        </div>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        {/* <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem> */}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

sidebar/user-nav.tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function UserNav() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <div className="flex items-center rounded-full h-10 mx-1 my-1 py-2 space-x-4 dark:hover:bg-gray-800 hover:bg-gray-200">
          {/* <BellIcon className="flex-shrink-0 min-w-[4] ml-3 h-4" />
           */}
          <div className="items-center">
            <Avatar className="items-center justify-center h-10 w-10">
              <AvatarImage src="/avatars/01.png" alt="@unintentional_badass" />
              <AvatarFallback>SC</AvatarFallback>
            </Avatar>
          </div>
          <span className="overflow-hidden whitespace-nowrap">
            Jamnalal Thakur
          </span>
        </div>
        {/* <Button
          variant="ghost"
          className="relative h-8 w-8 rounded-full"
        ></Button> */}
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">shadcn</p>
            <p className="text-xs leading-none text-muted-foreground">
              [email protected]
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>New Team</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

sidebar/notification-center.tsx

import { Button } from "@/components/ui/button";
import { BellIcon } from "@radix-ui/react-icons";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function NotificationCenter() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        {/* <Button variant="ghost" className="relative h-8 w-8 rounded-full" size="icon">
          <BellIcon />
        </Button> */}
        <div className="flex items-center rounded-full h-10 mx-1 my-1 py-2 space-x-4 dark:hover:bg-gray-800 hover:bg-gray-200">
          <BellIcon className="flex-shrink-0 min-w-[4] ml-3 h-4" />
          <span className="overflow-hidden whitespace-nowrap">
            Notifications
          </span>
        </div>
      </PopoverTrigger>
      <PopoverContent>Place Content here.</PopoverContent>
    </Popover>
  );
}

[trueberryless]

I guess this is completed now, good job for creating such a flexible sidebar @shadcn ❤️

[shadcn]

Thanks everyone.