//sidebar
import { useState } from "react";
import { BsArrowLeftCircle } from "react-icons/bs";
import { BsBoxFill, BsSearch } from "react-icons/bs";
import { MdDashboard } from "react-icons/md";
import {FaAngleDown } from "react-icons/fa";
export default function Sidebar() {
const [open, setopen] = useState(true);
const [submenuOpen, setsubmenuOpen] = useState(false);
const menus = [
{ title: "Dashboard" },
{ title: "Pages" },
{ title: "Media", spacing: true },
{ title: "Projects" ,submenu:true,submenuItems:[{title:"Submenu1"},
{title:"Submenu2"},{title:"Submenu3"},],},
{ title: "Analytics" },
{ title: "Inbox" },
{ title: "Profile" ,spacing:true},
{ title: "Setting" },
{ title: "Logout" },
];
return (
<div className="flex">
<div className={` bg-purple-950 p-5 pt-7 ${open?'w-72':'w-20'} h-screen
relative duration-300`}>
<BsArrowLeftCircle className={`bg-white text-purple-950 text-3xl
rounded-full -right-3 border border-purple-950 absolute cursor-pointer ${!open &&
'rotate-180'}`} onClick={() => {
setopen(!open)
}}/>
<div className=" inline-flex">
<BsBoxFill className={`text-4xl rounded bg-yellow-600 cursor-
pointer text-gray-900 mr-2 block float-left duration-500 ${open && "rotate-
[360deg]"} `}/>
<h1 className={`text-2xl text-white origin-left duration-300 ${!
open && "scale-0"}`}> Tailwind</h1>
</div>
<div className={`mt-6 bg-gray-700 ${!open?"px-2.5":"px-4"} py-2 flex
items-center rounded-md`}>
<BsSearch className={`block float-left text-white text-lg cursor-
pointer ${open && "mr-2"}`} />
<input type={"search"} placeholder="Search" className={`bg-
transparent text-white hover:outline-none w-full text-base ${!open &&
"hidden"}`} />
</div>
<ul className="pt-2">
{menus.map((menu,index) => (
<>
<li key={index} className={`flex items-center gap-x-4
hover:bg-gray-700 rounded-md text-slate-500 text-sm p-2 cursor-pointer $
{menu.spacing ?'mt-9':'mt-2'}`}>
<span className="text-2xl block float-left">
<MdDashboard/>
</span>
<span className={`text-base font-medium flex-1
duration-300 ${!open && "hidden"}`}>{menu.title}</span>
{menu.submenu && open && (
<FaAngleDown className={` ${submenuOpen &&
"rotate-180"}`} onClick={() => {
setsubmenuOpen(!submenuOpen)
}}/>
)}
</li>
{menu.submenu && submenuOpen && open && (
<ul >
{menu.submenuItems.map((submenuItem, index)
=> (
<li key={index} className="flex items-
center gap-x-4 hover:bg-gray-700 rounded-md text-slate-500 text-sm p-2 px-5 cursor-
pointer">
<span >{ submenuItem.title}</span>
</li>
))}
</ul>
)}
</>
))}
</ul>
</div>
<div className="p-7">
Home Page
</div>
</div>
)
}
//menubar
import { BsBoxFill } from "react-icons/bs";
import Button from "./Button";
import { useState } from "react";
export default function Menubar() {
const links = [
{ name: "HOME", link: "/" },
{ name: "SERVICE", link: "/" },
{ name: "ABOUT", link: "/" },
{ name: "BLOG'S", link: "/" },
{ name: "CONTACT", link: "/" },
];
const [open, setOpen] = useState(false);
return (
<div className=" left-0 top-0 w-full shadow-md fixed">
<div className="py-4 md:flex items-center justify-between bg-white
md:px-10 px-7">
<div className=" font-bold text-2xl cursor-pointer flex items-
center text-gray-800 ">
<span className="text-3xl text-indigo-600 mr-1 pt-1">
<BsBoxFill/>
</span>
Designer
</div>
<div onClick={() =>setOpen(!open)} className="text-3xl right-8
absolute top-6 md:hidden">
{ open? <BsBoxFill/>:<BsBoxFill/>}
</div>
<ul className={`md:flex md:items-center md:pb-0 pb-12 absolute
md:static bg-white w-full md:w-auto left-0 z-[-1] md:z-auto md:pl-0 pl-9
transition-all duration-500 ease-in ${open?' top-[68px] opacity-100':'top-[-
490px]'} opacity-0 md:opacity-100`}>
{
links.map(i => (
<li key={i.name} className="md:ml-8 text-xl md:my-0 my-
7">
<a href={i.link} className="text-gray-800
hover:text-gray-400 duration-500"> {i.name}</a>
</li>
))
}
<Button>
Get Started
</Button>
</ul>
</div>
</div>
)
}
