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
• Features
• Technologies Used
• Getting Started
  • Installation
  • Usage
• Customization
• Contributing
• License

Demo

You can view a live demo of the responsive sidebar here.

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:

   git clone https://github.com/sulaimanbiswas/fully-responsive-sidebar.git
   

2. Navigate to the project directory:

   cd fully-responsive-sidebar
   

3. Install dependencies:

   npm install
   

4. Run the development server:

   npm run dev
   

   Open 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 file for more information.