App.tsx

import { twMerge } from 'tailwind-merge';
import { useSidebarStore } from './sidebar-store';

function App() {
  const {
    value,
    close,
    open,
    toggle: _toggle,
  } = useSidebarStore((store) => store);
  return (
    <div
      className={twMerge(
        'w-screen h-screen bg-teal-900',
        value && 'flex flex-row',
      )}
    >
      {!value && <button onClick={open}>Open</button>}
      <aside
        className={twMerge(
          'bg-slate-50/50 block',
          value &&
            'block min-w-[128px] min-[500px]:min-w-[256px] lg:min-w-[468px] w-auto',
          !value && 'hidden',
        )}
      >
        {value && <button onClick={close}>Close</button>}
      </aside>
      <main className='flex-1'>main part of the page</main>
    </div>
  );
}

export default App;

sidebar-store.tsx

import { create } from 'zustand';

type SidebarStore = {
  value: boolean;
  toggle: () => void;
  close: () => void;
  open: () => void;
};

export const useSidebarStore = create<SidebarStore>()((set) => ({
  value: false,
  toggle: () => set((state) => ({ value: !state.open })),
  close: () => set({ value: false }),
  open: () => set({ value: true }),
}));