Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sulaimanbiswas/fully-responsive-sidebar
A fully responsive sidebar built with Next.js, TypeScript, Tailwind CSS, ShadCN, and Lucide Icons. This sidebar is easily customizable, adapts to different screen sizes, and includes smooth animations and a toggle button for enhanced usability on smaller devices.
https://github.com/sulaimanbiswas/fully-responsive-sidebar
lucide-react nextjs14 shadcn-ui tailwind-css typescript
Last synced: 2 months ago
JSON representation
A fully responsive sidebar built with Next.js, TypeScript, Tailwind CSS, ShadCN, and Lucide Icons. This sidebar is easily customizable, adapts to different screen sizes, and includes smooth animations and a toggle button for enhanced usability on smaller devices.
- Host: GitHub
- URL: https://github.com/sulaimanbiswas/fully-responsive-sidebar
- Owner: sulaimanbiswas
- License: mit
- Created: 2024-08-25T15:34:47.000Z (4 months ago)
- Default Branch: admin
- Last Pushed: 2024-08-25T18:09:38.000Z (4 months ago)
- Last Synced: 2024-09-22T14:02:24.309Z (3 months ago)
- Topics: lucide-react, nextjs14, shadcn-ui, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://fully-responsive-sidebar.vercel.app/inventory
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fully Responsive Sidebar
This project provides a fully responsive sidebar, built with Next.js, TypeScript, Tailwind CSS, ShadCN, and Lucide Icons. It is highly customizable and designed to work seamlessly across different devices, ensuring a consistent user experience whether on desktop or mobile.
## Table of Contents
- [Demo](#demo)
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Customization](#customization)
- [Contributing](#contributing)
- [License](#license)
## Demo
You can view a live demo of the responsive sidebar [here](https://fully-responsive-sidebar.vercel.app/inventory).
## Features
- **Responsive Design**: The sidebar adapts to different screen sizes using Tailwind CSS, providing a consistent experience across devices.
- **Next.js with TypeScript**: Built using Next.js and TypeScript, enabling strong typing and modern web development practices.
- **ShadCN UI Components**: Utilizes ShadCN components for a sleek and modern design.
- **Lucide Icons**: Incorporates Lucide Icons for a clean and lightweight icon set.
- **Toggle Button**: A built-in toggle button allows the sidebar to be shown or hidden, enhancing usability on smaller screens.
- **Smooth Animations**: Includes smooth transitions for an enhanced user experience.
- **Cross-Browser Compatibility**: Works seamlessly across all major web browsers.
## Technologies Used
- **Next.js**: Framework for server-side rendering and static site generation.
- **TypeScript**: Strongly typed programming language that builds on JavaScript.
- **Tailwind CSS**: Utility-first CSS framework for custom designs.
- **ShadCN**: Component library for building user interfaces.
- **Lucide Icons**: Icon library offering a wide range of lightweight icons.
## Getting Started
### Installation
1. **Clone the repository**:
```bash
git clone https://github.com/sulaimanbiswas/fully-responsive-sidebar.git
```
2. **Navigate to the project directory**:
```bash
cd fully-responsive-sidebar
```
3. **Install dependencies**:
```bash
npm install
```
4. **Run the development server**:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
### Usage
1. Open the project in your preferred code editor.
2. Customize the sidebar by editing the relevant components and styling as needed.
3. Add your own content to the sidebar and main content area as required.
## Customization
### Sidebar Customization
- **Colors**: Modify the color scheme by updating the Tailwind CSS utility classes in the components or in the global styles.
- **Width**: Adjust the sidebar width by changing the Tailwind CSS width classes (e.g., `w-64`, `w-1/4`, etc.) in the component files.
- **Icons**: Replace or customize icons using Lucide Icons by importing the desired icons and using them in the sidebar.
### Adding/Removing Items
- Add or remove menu items in the sidebar by modifying the JSX structure in the Next.js TypeScript components.
### Mobile Responsiveness
- Adjust the responsiveness by customizing Tailwind CSS breakpoints and media queries in the global configuration or directly in the component files.
## Contributing
Contributions are welcome! If you have suggestions for improvements or new features, feel free to open an issue or submit a pull request.
1. **Fork the repository**
2. **Create a new branch**: `git checkout -b feature/YourFeature`
3. **Make your changes**
4. **Commit your changes**: `git commit -m 'Add some feature'`
5. **Push to the branch**: `git push origin feature/YourFeature`
6. **Submit a pull request**
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.