feat: add a toggle for sidebar

components/client-layout.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React, { PropsWithChildren } from "react";
+
+import { cn } from "@/lib/style";
+import { SidebarStatus, useSidebarStatus } from "@/contexts/sidebar";
+
+export function ClientLayout({ children }: PropsWithChildren) {
+  const sidebarStatus = useSidebarStatus();
+  const isOpen = sidebarStatus === SidebarStatus.Open;
+  const isClosed = sidebarStatus === SidebarStatus.Closed;
+
+  return (
+    <div
+      className={cn(
+        "grid h-full grid-rows-[3.5rem_1fr] transition-all",
+        isOpen && "grid-cols-[18rem_1fr]",
+        isClosed && "grid-cols-[0_1fr]"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

components/sidebar.tsx

@@ -7,11 +7,11 @@ import { ToolGroups } from "./sidebar/tool-groups";
 
 export function Sidebar() {
   return (
-    <nav className="flex flex-col overflow-y-auto">
+    <nav className="flex flex-col overflow-y-auto overflow-x-hidden">
       <div className="mt-px px-4">
         <SearchBar />
       </div>
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden">
         <div className="mt-2 p-2">
           <AllTools />
         </div>

components/sidebar/tool-link.tsx

@@ -18,7 +18,7 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, highlight, groupe
   return (
     <Link
       className={cn(
-        "flex h-10 items-center gap-3 rounded",
+        "flex h-10 items-center gap-3 whitespace-nowrap rounded",
         highlight === "both" && "bg-accent",
         grouped && "pl-8 -outline-offset-1", // -outline-offset-1: ugly hack for Chrome outlines
         "hover:bg-accent"

components/site-header.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback } from "react";
 import Link from "next/link";
 
@@ -6,38 +8,34 @@ import { cn } from "@/lib/style";
 import * as icons from "@/components/icons";
 import { Menu } from "@/components/icons";
 import { ThemeToggle } from "@/components/theme-toggle";
+import { SidebarStatus, useSetSidebarStatus, useSidebarStatus } from "@/contexts/sidebar";
 
 type Props = {
   className?: string;
-  isMenuOpen?: boolean;
-  onMenuToggle?: (newValue: boolean) => void;
 };
 
-export function SiteHeader({ className, isMenuOpen, onMenuToggle }: Props) {
+export function SiteHeader({ className }: Props) {
+  const setSidebarStatus = useSetSidebarStatus();
+  const sidebarStatus = useSidebarStatus();
   const handleMenuToggle = useCallback(() => {
-    onMenuToggle?.(!isMenuOpen);
-  }, [isMenuOpen, onMenuToggle]);
+    setSidebarStatus(
+      sidebarStatus === SidebarStatus.Open ? SidebarStatus.Closed : SidebarStatus.Open
+    );
+  }, [sidebarStatus, setSidebarStatus]);
 
   return (
     <header className={cn("flex items-center justify-between px-4", className)}>
-      <div className="flex items-baseline gap-x-2.5">
-        <button type="button" className="flex items-center self-center" onClick={handleMenuToggle}>
+      <div className="flex items-center gap-x-2.5">
+        <button
+          type="button"
+          className="flex items-center rounded p-1.5 hover:bg-accent"
+          onClick={handleMenuToggle}
+        >
           <Menu />
         </button>
         <Link className="text-lg" href="/">
           {siteConfig.name}
         </Link>
-        <small className="text-xs">
-          web clone of{" "}
-          <a
-            className="text-link hover:underline"
-            href={siteConfig.links.devtoys}
-            target="_blank"
-            rel="noreferrer"
-          >
-            DevToys
-          </a>
-        </small>
       </div>
       <div className="flex gap-x-1">
         <a