Edviron UI Components

A tailwind base UI Components powerd by React + Tailwind + Headless UI

Installation

Using npm:

  npm i edviron-ui-packege

Sidebar Component Documentation

The Sidebar component is a customizable sidebar menu designed for applications that need a navigational structure on the left-hand side of the screen. This documentation will guide you on how to use and customize the Sidebar component in your application.

Table of Contents

1. Introduction
2. Props
3. Usage
4. Example

Introduction

The Sidebar component is designed to provide a navigational menu with various options. It contains SidebarItem and NestedSidebarItem components, which represent individual menu items and nested menu items, respectively. The Sidebar component takes a set of properties to customize its behavior and appearance.

Props

| Prop | Type | Description | | ------------ | ---------- | ------------------------------------------------------------------------ | | schoolName | string | The name of the school that will be displayed at the top of the sidebar. | | Link | object | The Link component used for routing within the application. | | menu | boolean | A state variable used to toggle the visibility of the nested menu items. | | setMenu | function | A function to update the menu state variable. |

Usage

1. Importing the Component: Import the Sidebar, SidebarItem, and NestedSidebarItem components in your file.

   import { Sidebar, SidebarItem, NestedSidebarItem } from "edviron-ui-packege";

2. Using the Component: Use the Sidebar component in your JSX code and customize it by passing the required props.

   • schoolName: The name of the school that will be displayed at the top of the sidebar.
   • Link: The Link component used for routing within the application.
   • menu: A state variable used to toggle the visibility of the nested menu items.
   • setMenu: A function to update the menu state variable.

   The Sidebar component can have one or more SidebarItem and NestedSidebarItem components as its children.

   • SidebarItem: Represents an individual menu item.

     • icon: The icon to be displayed alongside the menu item. It can be any React component, but typically you will use an icon from a library like react-icons.
     • name: The text to be displayed for the menu item.
     • to: The path to navigate to when the menu item is clicked.

   • NestedSidebarItem: Represents a menu item with nested items. It takes the same props as SidebarItem in addition to the menu and setMenu props. It can have one or more SidebarItem components as its children.

Example

Below is an example of how to use the Sidebar component:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { Sidebar, SidebarItem, NestedSidebarItem } from "path_to_component";
import { AiFillHome } from "react-icons/ai";
import { BsCurrencyRupee } from "react-icons/bs";
import { FaSchool } from "react-icons/fa";

function App() {
  const [menu, setMenu] = useState(false);

  return (
    <Sidebar schoolName={"Edviron"} Link={Link} menu={menu} setMenu={setMenu}>
      <SidebarItem icon={icon} name="Dashboard" to="/" />
      <NestedSidebarItem
        icon={icon}
        name="Fee Management"
        Link={Link}
        menu={menu}
        setMenu={setMenu}
      >
        <SidebarItem icon={icon} name="nested menu" to="/ns-1" />
        <SidebarItem icon={icon} name="nested menu 2" to="/ns-2" />
      </NestedSidebarItem>
      <SidebarItem icon={icon} name="school" to="/school" />
    </Sidebar>
  );
}

export default App;