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
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
-
Importing the Component: Import the
Sidebar
,SidebarItem
, andNestedSidebarItem
components in your file.import { Sidebar, SidebarItem, NestedSidebarItem } from "edviron-ui-packege";
-
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
: TheLink
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 themenu
state variable.
The
Sidebar
component can have one or moreSidebarItem
andNestedSidebarItem
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 likereact-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 asSidebarItem
in addition to themenu
andsetMenu
props. It can have one or moreSidebarItem
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;