Sidebar Shift Copy this Tailwind Sidebarto Your Project
"use client"; import React, { useState } from "react"; import { Search, Person, HelpOutline, ContactPage, ExpandMore, ExpandLess, BarChart, Login, EventNote } from "@mui/icons material"; import { RxDashboard } from "react icons/rx"; import { FiBarChart2 } from "react icons/fi"; import { TbChartLine, TbLogout } from "react icons/tb"; import { LuCalendarArrowUp } from "react icons/lu"; import { AiOutlineLineChart } from "react icons/ai"; import { IoPersonOutline } from "react icons/io5"; import { MdOutlineQuestionMark } from "react icons/md"; import { LuContact } from "react icons/lu"; import { IoSearchSharp } from "react icons/io5"; import { useRouter } from "next/navigation"; const Sidebar = () => { const router = useRouter(); const [open, setOpen] = useState(false); const [todaysessionopen, setTodaysessionopen] = useState(false); const [resourcesopen, setResourcesopen] = useState(false); const [selected, setSelected] = useState("Ending of the Session"); // Default selected const [TodaySessionselected, setTodaySessionSelected] = useState("PUSHED TO DOCTOR"); const [Resourcesselected, setResourcesSelected] = useState(""); const [expandedSections, setExpandedSections] = useState({ IMPAIRMENT: false, TREATMENT: false }); const toggleSection = (section) => { setExpandedSections((prev) => ({ ...prev, [section]: !prev[section], // Toggle the clicked section without affecting the other })); }; const menuItems = ["Starting of the Day", "Ending of the Session", "Overall Session"]; const TodaySessionMenuItems = ["NEW CLAIMANT", "WORKING BY FRONT DESK", "PUSHED TO DOCTOR", "SHOW LIST", "PENDING BY FRONT DESK", "NO EXAM BY FRONT DESK", "NO SHOW LIST", "WAITING BY DOCTOR", "CANCELLED BY DOCTOR", "STARTING OF THE DAY"]; const Resourcesmenuitems = ["IMPAIRMENT GUIDLINES", "TREATMENT GUIDLINES"]; const imparimentguidlinesmenuitems = ["SPINE PERMANENCY", "EXTREMITIES SLU"]; const treatmentguidelinesmenuitems = ["NECK", "MID & LOWERBACK", "SHOULDER", "HIP", "KNEE", "HAND & WIRST", "ANKLE & FOOT"]; return ( <div className="hidden sm:block w [352px] h min screen text [14px] bg white shadow md p 4 py 8"> {/* Dashboard */} <div className="flex items center space x 2 py 3 px 4 bg neutral 100 rounded lg"> <RxDashboard className="text [22px] " /> <span className="font semibold pl 2">DASHBOARD</span> </div> {/* Menu Items */} <ul className="mt 4 space y 2"> <li className="flex items center space x 2 p 3 hover:bg neutral 100 rounded lg cursor pointer uppercase"> <FiBarChart2 className="text neutral 500 ml 1 text [22px]" /> <span className="pl 2 text neutral 600 font medium ">Start the Session</span> </li> {/* Sign In Sheet (Collapsible) */} <button onClick={() => setOpen(!open)} className="flex items center justify between w full p 3 hover:bg gray 100 rounded lg cursor pointer uppercase"> <div className="flex items center space x 2"> <TbLogout className="text gray 500 ml 2 text [22px]" /> <span className="pl 2 text gray 600 font medium">Sign In Sheet</span> </div> {open ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />} </button> {/* Dropdown Items */} {open && ( <div className="bg gray 50 rounded lg mt 2 ml 8"> {menuItems.map((item, index) => ( <button key={index} onClick={() => { if (item === "Starting of the Day") { router.push("/frontdesk/start_day"); } if (item === "Ending of the Session") { router.push("/frontdesk/end_day_sheet"); } if (item === "Overall Session") { router.push("/frontdesk/overall_day_sheet"); } setSelected(item); }} className={`w full text left px 4 py 2 font medium transition all duration 200 cursor pointer ${selected === item ? "bg [#E3EBFF] text [#4773E5] border l 4 border [#4773E5]" : "text gray 600 border l 4 border [#E3EBFF]"}`} > {item} </button> ))} </div> )} <button onClick={() => { setTodaysessionopen(!todaysessionopen); }} className="flex items center justify between w full p 3 hover:bg gray 100 rounded lg cursor pointer uppercase" > <div className="flex items center space x 2"> <LuCalendarArrowUp className="text neutral 500 ml 2 text [22px] " /> <span className="pl 2 text gray 600 font medium">Today's Session</span> </div> {todaysessionopen ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />} </button> {/* Dropdown Items */} {todaysessionopen && ( <div className="bg gray 50 rounded lg mt 2 ml 8"> {TodaySessionMenuItems.map((item, index) => ( <button key={index} onClick={() => { if (item === "NEW CLAIMANT") { router.push("/frontdesk/from_frontdesk"); } if (item === "WORKING BY FRONT DESK") { router.push("/frontdesk/workingbyfd"); } if (item === "PUSHED TO DOCTOR") { router.push("/frontdesk/doctor_waiting"); } if (item === "SHOW LIST") { router.push("/frontdesk/frontdesk_show"); } if (item === "PENDING BY FRONT DESK") { router.push("/frontdesk/frontdesk_pending"); } if (item === "NO EXAM BY FRONT DESK") { router.push("/frontdesk/frontdesk_cancelled"); } if (item === "NO SHOW LIST") { router.push("/frontdesk/frontdesk_noshow"); } if (item === "WAITING BY DOCTOR") { router.push("/frontdesk/doctor_pending"); } if (item === "CANCELLED BY DOCTOR") { router.push("/frontdesk/doctor_cancelled"); } if (item === "STARTING OF THE DAY") { router.push("/frontdesk/start_day"); } if (item === "ENDING OF THE DAY") { router.push("/frontdesk/end_day_sheet"); } if (item === "OVERALL DAY") { router.push("/frontdesk/overall_day_sheet"); } setTodaySessionSelected(item); }} className={`w full text left px 4 py 2 font medium transition all duration 200 cursor pointer ${TodaySessionselected === item ? "bg [#E3EBFF] text [#4773E5] border l 4 border [#4773E5]" : "text gray 600 border l 4 border [#E3EBFF]"}`} > {item} </button> ))} </div> )} <button onClick={() => setResourcesopen(!resourcesopen)} className="flex items center justify between w full p 3 hover:bg gray 100 rounded lg cursor pointer uppercase"> <div className="flex items center space x 2"> <AiOutlineLineChart className="text neutral 500 ml 2 text [22px]" /> <span className="pl 2 text neutral 600 font medium">Resources</span> </div> {resourcesopen ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />} </button> {resourcesopen && ( <div> {/* Impairment Guidelines Section */} <div className="bg [#E3EBFF] pl 3 pr 1 rounded md text [14px] font medium ml 5"> <button onClick={() => { toggleSection("IMPAIRMENT"); setResourcesSelected("IMPAIRMENT"); }} className={`w full text left px 4 py 2 font medium transition all duration 200 cursor pointer flex justify between items center bg [#E3EBFF] text [#4773E5] border l 4 border [#4773E5]`} > IMPAIRMENT GUIDELINES {expandedSections.IMPAIRMENT ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />} </button> </div> {/* Impairment Sub menu */} {expandedSections.IMPAIRMENT && ( <div className="ml 8 text gray 600 border l 4 border [#EEEEEE] cursor pointer"> {["Spine Permanency", "Extremities SLU"].map((item, index) => ( <p key={index} className="text gray 600 text sm ml 10 py 1 uppercase"> <span className="text 4xl align middle pr 2">•</span> {item} </p> ))} </div> )} {/* Treatment Guidelines Section */} <div className="bg [#E3EBFF] pl 3 pr 1 rounded md text [16px] font medium ml 5 mt 2"> <button onClick={() => { toggleSection("TREATMENT"); setResourcesSelected("TREATMENT"); }} className={`w full text left px 4 py 2 font medium transition all duration 200 cursor pointer flex justify between items center bg [#E3EBFF] text [#4773E5] border l 4 border [#4773E5]`} > TREATMENT GUIDELINES {expandedSections.TREATMENT ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />} </button> </div> {/* Treatment Sub menu */} {expandedSections.TREATMENT && ( <div className="ml 8 text gray 600 border l 4 border [#EEEEEE] cursor pointer"> {["Neck", "Mid & Lower Back", "Shoulder", "Hip", "Knee", "Hand & Wrist", "Ankle & Foot"].map((item, index) => ( <p key={index} className="text gray 600 text sm ml 10 py 1 uppercase"> <span className="text 4xl align middle pr 2">•</span> {item} </p> ))} </div> )} </div> )} <li className="flex items center space x 2 p 3 hover:bg neutral 100 rounded lg cursor pointer uppercase" onClick={() =>router.push("/search")} > <IoSearchSharp className="text neutral 500 ml 2 text [22px]" /> <span className="pl 3 text neutral 600 font medium">Search</span> </li> <li className="flex items center space x 2 p 3 hover:bg neutral 100 rounded lg cursor pointer uppercase" onClick={() =>router.push("/profile")} > <IoPersonOutline fontSize="small" className="text neutral 500 ml 2 text [22px]" /> <span className="pl 3 text neutral 600 font medium">Profile</span> </li> <li className="flex items center space x 2 p 3 hover:bg neutral 100 rounded lg cursor pointer uppercase" > <MdOutlineQuestionMark className="text neutral 500 ml 2 text [22px]" /> <span className="pl 3 text neutral 600 font medium">Site Help</span> </li > <li className="flex items center space x 2 p 3 hover:bg neutral 100 rounded lg cursor pointer uppercase"> <LuContact className="text neutral 500 ml 2 text [22px]" /> <span className="pl 3 text neutral 600 font medium">Contact</span> </li> </ul> </div> ); }; export default Sidebar; alter this side bar for mobile and i pad view
