https://github.com/treetips/ts-nextjs-chakraui-sidenavi-example
TypeScript, Next.js, Chakra-UI Responsive drawer example
https://github.com/treetips/ts-nextjs-chakraui-sidenavi-example
chakra-ui drawer nextjs responsive sidenav typescript
Last synced: 3 months ago
JSON representation
TypeScript, Next.js, Chakra-UI Responsive drawer example
- Host: GitHub
- URL: https://github.com/treetips/ts-nextjs-chakraui-sidenavi-example
- Owner: treetips
- Created: 2022-03-10T16:08:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-10T16:24:02.000Z (over 4 years ago)
- Last Synced: 2025-06-23T18:08:26.135Z (about 1 year ago)
- Topics: chakra-ui, drawer, nextjs, responsive, sidenav, typescript
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ts-nextjs-chakraui-sidenavi-example
This is a example of a responsive, Drawer-based sidenavi using TypeScript, Next.js, and Chakra-UI.
## Features
| Main | Sub | Version |
| --------------------------------------------------------- | --- | ------------ |
| [Visual Studio Code](https://code.visualstudio.com/) | | latest |
| [Node.js](https://nodejs.org/en/about/releases/) with npm | | v16 (LTS) |
| [Next.js](https://nextjs.org/) | | v12 |
| [Typescript](https://www.typescriptlang.org/) | | 4.6 or later |
| [React](https://www.typescriptlang.org/) | | 17 |
| [Chakra-UI](https://chakra-ui.com/) | | latest |
## Screenshot
https://user-images.githubusercontent.com/12574048/157705839-0e57107a-dd80-48d4-b656-df287935320f.mp4
## Usage
```sh
git clone git@github.com:treetips/ts-nextjs-chakraui-sidenavi-example.git
cd ts-nextjs-chakraui-sidenavi-example
npm i
```
```sh
npm run dev
```
open