https://github.com/heynzar/resizable-sidebar
A fully Customizable and Resizable sidebar component, built from Scratch. Using Nextjs, React, TailwindCSS and TypeScript.
https://github.com/heynzar/resizable-sidebar
animation nextjs react resizable sidebar tailwindcss
Last synced: 3 months ago
JSON representation
A fully Customizable and Resizable sidebar component, built from Scratch. Using Nextjs, React, TailwindCSS and TypeScript.
- Host: GitHub
- URL: https://github.com/heynzar/resizable-sidebar
- Owner: heynzar
- Created: 2024-11-29T20:50:18.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-10T20:57:21.000Z (6 months ago)
- Last Synced: 2025-01-14T00:35:23.236Z (5 months ago)
- Topics: animation, nextjs, react, resizable, sidebar, tailwindcss
- Language: TypeScript
- Homepage: https://nz-sidebar.vercel.app
- Size: 549 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic and Resizable - Sidebar
A fully customizable and resizable sidebar component inspired by [todoist.com](https://todoist.com)'s design. Built from scratch.
🚀 **[Live Demo Here](https://nz-sidebar.vercel.app/)**
[](https://nz-sidebar.vercel.app/)
---
## Table of Contents
---
## 🎯 Why I Built It?
It all started when I was working on the [sheikh-othman-platform](https://github.com/heynzar/sheikh-othman-platform) project that needed a sidebar, a simple component that could adapt to different layouts, screen sizes, and user needs.
One day, while using Todoist to organize my tasks, I realized how much I admired their sidebar. It was clean, intuitive, and just worked smoothly. That’s when the idea hit me: What if I could recreate something just as functional and beautiful, but flexible enough for anyone to use in their projects?
**I wanted to challenge myself to build this component from scratch—no shortcuts**. it was about creating something developers could trust and users would love.
This project became more than just a sidebar, it was a way to refine my skills in React, TypeScript, and TailwindCSS, while also creating a tool I knew others would find valuable. **It’s a journey of solving a problem, learning, and sharing a solution with the world.**
---
## ✨ Features
- **Responsive Design**: Optimized to use on desktops, tablets, and mobile devices.
- **Clean UI**: Modern, minimalistic, and intuitive design.
- **Lightweight and Fast**: Minimal dependencies to ensure quick loading times.
- **Resizable**: Easily adjust the width of the sidebar, with smooth animation.
---
## 🛠 Built With
- [![Next][Next.js]][Next-url]
- [![React][React.js]][React-url]
- [![TypeScript][TypeScript]][TypeScript-url]
- [![TailwindCSS][TailwindCSS]][TailwindCSS-url]
---
## 📦 Installation
1. Clone the repo
```sh
git clone https://github.com/heynzar/resizable-sidebar.git
```
2. Install NPM packages
```sh
npm install
```
3. Run the Project
```sh
npm run dev
```
---
## 🤝 Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request.
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 📜 License
This project is licensed under the MIT License. Feel free to use and modify it for your own projects.
See `LICENSE.txt` for more information.
---
## 📬 Contact
Nzar - [@heynzar](https://x.com/heynzar) - [email protected]
Project Link: [https://github.com/heynzar/resizable-sidebar](https://github.com/heynzar/resizable-sidebar)
---
## 👏 Acknowledgements
This project is inspired by the sidebar component of [Todoist.com](https://todoist.com/) and was developed to practice and demonstrate advanced component design techniques. All rights to the original design belong to Todoist.
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[Next-url]: https://nextjs.org/
[React.js]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[TypeScript]: https://img.shields.io/badge/typescript-000000?style=for-the-badge&logo=typescript&logoColor=60a5fa
[TypeScript-url]: https://www.typescriptlang.org
[TailwindCSS]: https://img.shields.io/badge/TailwindCSS-000000?style=for-the-badge&logo=tailwindcss&logoColor=38bdf8
[TailwindCSS-url]: https://tailwindcss.com