Left & Right Sidebar

The simplest use case. A left navigation drawer and a right settings panel. Both respond to edge swipes on mobile and toggle buttons on desktop. Cross-direction locking prevents both from opening at once.

Live Demo

Source

Wrap your layout in SwipeBarProvider, drop in SwipeBarLeft and SwipeBarRight, and use the context hook for programmatic control:

LeftRightExample.tsx

import {
  SwipeBarProvider,
  SwipeBarLeft,
  SwipeBarRight,
  useSwipeBarContext,
} from "@luciodale/swipe-bar";

function App() {
  return (
    <SwipeBarProvider>
      <Layout />
    </SwipeBarProvider>
  );
}

function Layout() {
  const { openSidebar, closeSidebar, isLeftOpen, isRightOpen } =
    useSwipeBarContext();

  return (
    <>
      <SwipeBarLeft className="bg-gray-900 text-white">
        <nav>
          <button onClick={() => closeSidebar("left")}>Close</button>
        </nav>
      </SwipeBarLeft>

      <main>
        <button onClick={() => openSidebar("left")}>Menu</button>
        <button onClick={() => openSidebar("right")}>Settings</button>
      </main>

      <SwipeBarRight className="bg-gray-900 text-white">
        <div>
          <button onClick={() => closeSidebar("right")}>Close</button>
        </div>
      </SwipeBarRight>
    </>
  );
}