SideNavDash

SideNavDash is a modern and responsive dashboard application built with Next.js, Tailwind CSS, and Chart.js. It features an intuitive layout with a collapsible sidebar, a top navigation bar, and various chart components to display data visually.

Features

• Responsive Sidebar: A collapsible sidebar menu for seamless navigation.
• Charts Integration: Interactive Bar and Line charts powered by Chart.js.
• Dynamic Components: Modular and reusable components like MenuBar, Header, and chart widgets.
• Lightweight Design: Built using Tailwind CSS for a clean and minimalistic UI.
• Toggle Menu: Easily toggle the sidebar for an enhanced user experience on mobile and desktop.

Technologies Used

• Next.js – React framework for server-side rendering and static site generation.
• Tailwind CSS – A utility-first CSS framework.
• Chart.js – JavaScript library for data visualization.
• React Chart.js 2 – React wrapper for Chart.js.

Getting Started

Follow the steps below to set up the project locally.

Contributing

• Fork the repository.
• Create a branch for your changes: git checkout -b feature-name.
• Push your branch and open a pull request.

Contributing Guidelines

1. Fork the repository.
2. Create a new branch for your changes.
3. Ensure your code is clean and well-documented.
4. Submit a pull request with a detailed explanation of the changes.

Prerequisites

Make sure you have the following installed:

• Node.js (v16 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/SideNavDash.git
   cd SideNavDash

2. Install dependencies:

   npm install

   or

   yarn install

3. Start the development server:

   npm run dev

   or

   yarn dev

4. Open your browser and navigate to:

   http://localhost:3000
   

Project Structure

• components/
  • header.js: Contains the top navigation bar.
  • menuBar.js: Defines the sidebar menu items and structure.
• pages/
  • index.js: Main entry point of the dashboard.
  • dashboard.js: Contains the dashboard layout and widgets.
• styles/: Tailwind CSS configuration and custom styles.
• public/: Static assets like icons and images.

Usage

• Sidebar Toggle: Use the button at the bottom of the sidebar to collapse or expand it.
• Charts: The Bar and Line charts display dynamic data. Modify the barData and lineData objects in the Dashboard component to update chart content.

---

Feel free to customize it according to your project requirements. Happy coding! 🚀