Side Navigation Drawer Example

A sleek right sidebar panel drawer commonly used for settings, navigation menus, or shopping carts.

import React from 'react';
import { Drawer } from '@ughur/temper';

export function SideNavDrawer() {
  return (
    <Drawer.Root direction="right">
      <Drawer.Trigger className="px-4 py-2 bg-gray-900 text-white rounded-lg font-medium">
        Open Cart
      </Drawer.Trigger>

      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
        <Drawer.Content className="fixed top-0 bottom-0 right-0 w-80 max-w-full bg-white z-50 p-6 shadow-2xl flex flex-col">
          <Drawer.Title className="text-xl font-bold text-gray-900 mb-1">
            Shopping Cart (3 items)
          </Drawer.Title>
          <Drawer.Description className="text-sm text-gray-500 mb-6">
            Review items in your cart before checkout.
          </Drawer.Description>

          <div className="flex-1 overflow-y-auto space-y-4 mb-6">
            <div className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
              <div>
                <p className="font-semibold text-sm">Wireless Headphones</p>
                <p className="text-xs text-gray-500">Qty: 1</p>
              </div>
              <span className="font-bold text-sm">$199</span>
            </div>
          </div>

          <div className="border-t pt-4 space-y-3">
            <div className="flex justify-between font-bold text-lg">
              <span>Total</span>
              <span>$199.00</span>
            </div>
            <button className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition">
              Checkout Now
            </button>
            <Drawer.Close className="w-full py-2 bg-gray-100 text-gray-600 rounded-xl text-sm">
              Continue Shopping
            </Drawer.Close>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}