pachoclo / resizable-two-column-layout

A React + vanilla CSS two-column layout with resizable sidebar

Two Column Layout with resizable sidebar

• React + TS + Vite
• No libs
• Vanilla CSS
• Props for initial, min and max sidebar size
• Saves / loads preferred size automatically to LocalStorage
• Reset on double-click
• Most likely still has some bugs 🤷‍♂️

Screen.Recording.2023-03-16.at.8.21.31.PM.mov

🕹️ Commands

npm i

npm run dev

npm run build

npm run preview

---

🗂️ Structure

.
├── public/
├── src/
│   ├── components/
│   │   ├── App.tsx
│   │   ├── Layout.tsx              <- ⚠️
│   │   ├── MainContent.tsx
│   │   └── SidebarContent.tsx
│   ├── hooks/
│   │   └── use-resize-sidebar.tsx  <- ⚠️
│   ├── styles/
│   │   ├── Layout.css              <- ⚠️
│   │   └── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── tsconfig.json
├── tsconfig.node.json
├── package.json
└── vite.config.ts