/React_AnimatedSidebar

This is a simple React sidebar navigation component that utilizes the React Router library for routing and Framer Motion for animation.

Primary LanguageTypeScriptMIT LicenseMIT

React Sidebar Navigation

This is a simple React sidebar navigation component that utilizes the React Router library for routing and Framer Motion for animation.

Features

  • Responsive sidebar navigation with collapsible menu items
  • Dynamic routing using React Router
  • Smooth animation effects using Framer Motion
  • Customizable icons for menu items
  • Supports nested sub-routes

Installation

  1. Clone the repository:

    git clone https://github.com/kit0-0/React_AnimatedSidebar.git

  2. Change to the project directory:

    cd your-repo

  3. Install the dependencies:

    npm install

  4. Start the development server:

    npm start

  5. Open your browser and visit http://localhost:3000 to see the application.

Usage

  1. Modify the routes array in the Sidebar.js file to define your desired navigation links and icons.

  2. Customize the styling of the sidebar by modifying the CSS styles in the Sidebar.css file.

  3. Add additional components and routes to your application as needed.

Dependencies

  • React
  • React Router
  • Framer Motion

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.