supabase · kiwicopple · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026
diff --git a/website/components/layouts/Navbar.tsx b/website/components/layouts/Navbar.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { Bars3Icon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { toast } from '~/hooks/use-toast'
 import Search from '~/components/search/Search'
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
@@ -12,6 +13,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '~/components/ui/dropdown-menu'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '~/components/ui/sheet'
 import { useSignOutMutation } from '~/data/auth/sign-out-mutation'
 import { useUsersOrganizationsQuery } from '~/data/organizations/users-organizations-query'
 import { useUser } from '~/lib/auth'
@@ -81,11 +89,22 @@ const Navbar = () => {
       </Avatar>
     )
 
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [mobileSearchExpanded, setMobileSearchExpanded] = useState(false)
+  const mobileSearchRef = useRef<HTMLDivElement>(null)
+
+  const handleMobileSearchBlur = useCallback((e: React.FocusEvent) => {
+    // Check if the new focus target is still within the search container
+    if (!mobileSearchRef.current?.contains(e.relatedTarget as Node)) {
+      setMobileSearchExpanded(false)
+    }
+  }, [])
+
   return (
     <header className="px-4 py-2 border-b border-gray-100 dark:border-slate-700 md:px-8">
-      {/* sticky top-0 bg-gray-100 dark:bg-slate-900 */}
       <nav className="flex items-center justify-between gap-4 md:gap-6">
-        <div>
+        {/* Logo - hidden on mobile when search is expanded */}
+        <div className={mobileSearchExpanded ? 'hidden' : 'block'}>
           <Link href="/">
             <img
               src={
@@ -99,20 +118,22 @@ const Navbar = () => {
           </Link>
         </div>
 
+        {/* Desktop Search - hidden on mobile */}
         <div className="flex-1 max-w-3xl hidden sm:block">
           <Search />
         </div>
 
-        <div className="flex items-center justify-end gap-2 sm:gap-6 sm:min-w-[160px]">
-          <div className="flex items-center ml-1 sm:ml-4">
+        {/* Desktop Navigation - hidden on mobile */}
+        <div className="hidden sm:flex items-center justify-end gap-6 min-w-[160px]">
+          <div className="flex items-center ml-4">
             <Button variant="link" asChild>
               <Link href="https://supabase.github.io/dbdev/" target="blank">
                 Docs
               </Link>
             </Button>
 
             {user ? (
-              <div className="flex items-center ml-1 sm:ml-4">
+              <div className="flex items-center ml-4">
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <AvatarWrapper size="md" />
@@ -172,10 +193,129 @@ const Navbar = () => {
               </div>
             )}
           </div>
-          <div className="flex items-center gap-2 sm:gap-4 pl-4 border-l dark:border-slate-700">
+          <div className="flex items-center gap-4 pl-4 border-l dark:border-slate-700">
             <ThemeSwitcher />
           </div>
         </div>
+
+        {/* Mobile Navigation - visible only on mobile */}
+        <div className="flex items-center gap-2 sm:hidden">
+          {/* Mobile Search - expandable */}
+          {mobileSearchExpanded ? (
+            <div
+              ref={mobileSearchRef}
+              className="flex-1"
+              onBlur={handleMobileSearchBlur}
+            >
+              <Search autoFocus />
+            </div>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Search"
+              onClick={() => setMobileSearchExpanded(true)}
+            >
+              <MagnifyingGlassIcon className="h-5 w-5" />
+            </Button>
+          )}
+
+          {/* Mobile Menu Button */}
+          <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" aria-label="Open menu">
+                <Bars3Icon className="h-6 w-6" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent
+              side="right"
+              className="w-[280px] bg-white dark:bg-slate-900"
+            >
+              <SheetHeader>
+                <SheetTitle className="text-left">Menu</SheetTitle>
+              </SheetHeader>
+              <div className="flex flex-col gap-6 mt-6">
+                {/* Mobile Navigation Links */}
+                <nav className="flex flex-col gap-4">
+                  <Link
+                    href="https://supabase.github.io/dbdev/"
+                    target="blank"
+                    className="text-sm font-medium hover:text-blue-500 transition-colors"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    Docs
+                  </Link>
+
+                  {user ? (
+                    <>
+                      <Link
+                        href={`/${user?.user_metadata.handle}`}
+                        className="flex items-center gap-3 text-sm font-medium hover:text-blue-500 transition-colors"
+                        onClick={() => setMobileMenuOpen(false)}
+                      >
+                        <AvatarWrapper size="sm" />
+                        {displayName}
+                      </Link>
+                      <Link
+                        href={`/${user?.user_metadata.handle}/_/access-tokens`}
+                        className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 transition-colors pl-9"
+                        onClick={() => setMobileMenuOpen(false)}
+                      >
+                        Access Tokens
+                      </Link>
+
+                      {isOrganizationsSuccess && organizations.length > 0 && (
+                        <div className="pt-2 border-t dark:border-slate-700">
+                          <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2">
+                            Organizations
+                          </p>
+                          {organizations.map((org) => (
+                            <Link
+                              key={org.id}
+                              href={`/${org.handle}`}
+                              className="block text-sm text-gray-600 dark:text-gray-400 hover:text-blue-500 transition-colors py-1"
+                              onClick={() => setMobileMenuOpen(false)}
+                            >
+                              {org.display_name}
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+
+                      <button
+                        onClick={() => {
+                          handleSignOut()
+                          setMobileMenuOpen(false)
+                        }}
+                        className="text-sm text-left text-red-500 hover:text-red-600 transition-colors"
+                      >
+                        Sign out
+                      </button>
+                    </>
+                  ) : (
+                    <Link
+                      href="/sign-in"
+                      className="text-sm font-medium hover:text-blue-500 transition-colors"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      Login
+                    </Link>
+                  )}
+                </nav>
+
+                {/* Theme Switcher */}
+                <div className="pt-4 border-t dark:border-slate-700">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                      Theme
+                    </span>
+                    <ThemeSwitcher />
+                  </div>
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
       </nav>
     </header>
   )

diff --git a/website/components/search/Search.tsx b/website/components/search/Search.tsx
@@ -14,7 +14,11 @@ import { Popover, PopoverAnchor, PopoverContent } from '../ui/popover'
 import Spinner from '../ui/spinner'
 import SearchInput from './SearchInput'
 
-const Search = () => {
+type SearchProps = {
+  autoFocus?: boolean
+}
+
+const Search = ({ autoFocus = false }: SearchProps) => {
   const [searchValue, setSearchValue] = useState('')
   const [isOpen, setIsOpen] = useState(false)
 
@@ -62,7 +66,11 @@ const Search = () => {
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverAnchor asChild>
         <div className="relative">
-          <SearchInput value={searchValue} onChange={onSearchChange} />
+          <SearchInput
+            value={searchValue}
+            onChange={onSearchChange}
+            autoFocus={autoFocus}
+          />
         </div>
       </PopoverAnchor>
 

diff --git a/website/components/search/SearchInput.tsx b/website/components/search/SearchInput.tsx
@@ -4,10 +4,11 @@ import { Input } from '~/components/ui/input'
 export type SearchInputProps = {
   value: string
   onChange: (value: string) => void
+  autoFocus?: boolean
 }
 
 const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  function SearchInput({ value, onChange }, ref) {
+  function SearchInput({ value, onChange, autoFocus = false }, ref) {
     return (
       <>
         <Input
@@ -18,6 +19,7 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
           type="search"
           value={value}
           onChange={(e) => onChange(e.target.value)}
+          autoFocus={autoFocus}
         />
       </>
     )

diff --git a/website/components/ui/sheet.tsx b/website/components/ui/sheet.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+const Sheet = DialogPrimitive.Root
+
+const SheetTrigger = DialogPrimitive.Trigger
+
+const SheetClose = DialogPrimitive.Close
+
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+)
+
+interface SheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = DialogPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = DialogPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}