started dashboard layout

2025-02-12 23:20:40 +01:00
parent 63bb8eee52
commit d65380363e
30 changed files with 1025 additions and 23 deletions
@@ -0,0 +1,17 @@
+import { Link, useLocation } from "react-router-dom"
+
+export default function AsideLink({shrinkAside, name, to, icon}) {
+
+  const {pathname} = useLocation()
+
+  return (
+    <Link 
+        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+        to={to}
+    >   
+        {/* {icon && <span className={`after:content-['24']`}></span>} */}
+        {icon && <i className={`${icon}`}></i>}
+        {shrinkAside ? '' : name}
+    </Link>
+  )
+}
@@ -0,0 +1,33 @@
+import { ReactNode } from "react"
+// import { useLocation } from "react-router-dom"
+
+
+export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu,  setHideSubMenu, children}) {
+
+    // const btnName = name
+
+//   const {pathname} = useLocation()
+
+//   const [hideSubMenu, setHideSubMenu] = useState(true)
+
+  return (
+    // <Link 
+    //     className={`w-full flex items-center gap-2 px-4 py-2 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+    //     to={to}
+    // > 
+    //     {icon && <i className={`${icon}`}></i>}
+    //     {shrinkAside ? '' : name}
+    // </Link>
+    <div 
+        className={`w-full px-4 text-[13px] font-semibold rounded-md`} 
+    >   
+        <button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
+            <span className="flex gap-2 items-center">{icon && <i className={`${icon}`}></i>}{shrinkAside ? '' : name}</span>
+            <i className={`fa-solid fa-caret-up  ${(hideSubMenu && hideSubMenu==name) ? 'rotate-0' : 'rotate-180'}`}></i>
+        </button>
+        <div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
+            {children}
+        </div>
+    </div>
+  )
+}
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import {Link, useLocation} from 'react-router-dom'
+import RouteLinks from "../../../RouteLinks";
+import DummyLogo from "../../DummyLogo";
+import MainBtn from "../../MainBtn";
+import AsideLink from "./AsideLink";
+import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
+import { useSelector } from "react-redux";
+import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
+
+import { AiOutlineDashboard } from "react-icons/ai";
+import { IoPeople } from "react-icons/io5";
+
+
+export default function DashboardAside({shrinkAside=false}) {
+
+    const {pathname} = useLocation()
+
+    const {setLogoutModal} = generalLayoutContext()
+
+    const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
+    const {role}= userDetails
+
+    const [hideSubMenu, setHideSubMenu] = useState('')
+
+    const handleHideSubMenu = (e) => {
+        e.stopPropagation()
+        let name = e.target.name
+        setHideSubMenu((prev) => {
+            if(prev == name){
+                return ''
+            }else{
+                return name
+            }
+        })
+    }
+
+  return (
+    <div className='w-full h-full flex flex-col'>
+        <div className="px-4 w-full h-24 logo flex items-center">
+            <DummyLogo />
+        </div>
+        <hr className="border-slate-400" />
+
+        <div className="p-4 w-full h-full overflow-y-auto">
+            <Link 
+                className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.homePage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                to={RouteLinks.homePage}
+            >   
+                <AiOutlineDashboard className="text-base" />
+                <span>{shrinkAside ? '' : 'Dashboard'}</span>
+            </Link>
+
+            <div className="w-full">
+                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
+                <Link 
+                    className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == RouteLinks.usersPage ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
+                    to={RouteLinks.usersPage}
+                >   
+                    <IoPeople className="text-base" />
+                    <span>{shrinkAside ? '' : 'Users'}</span>
+                </Link>            
+            </div>
+
+            {/* <div className="w-full">
+                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
+                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='us' icon='fa-solid fa-list'>
+                <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
+                <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
+                <AsideLinkWithSubLinks hideSubMenu={hideSubMenu} setHideSubMenu={handleHideSubMenu} shrinkAside={shrinkAside} name='me' icon='fa-solid fa-list'>
+                    <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-circle text-[5px]' />
+                    <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-circle text-[5px]' />
+                </AsideLinkWithSubLinks>
+                </AsideLinkWithSubLinks>
+            </div> */}
+
+            {/* <div className="w-full">
+                <h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">Admin</h1>
+                <AsideLink shrinkAside={shrinkAside} name='Admin List' to={RouteLinks.dashboardAdminList} icon='fa-solid fa-list' />
+                <AsideLink shrinkAside={shrinkAside} name='Users List' to={RouteLinks.dashboardUserList} icon='fa-solid fa-list' />
+            </div> */}
+        </div>
+        <div className='px-4 py-2'>
+            <div className="bg-primary rounded-md w-full flex justify-center items-center gap-2">
+                <MainBtn 
+                    shrinkAside={shrinkAside} 
+                    icon='fa-solid fa-right-from-bracket' 
+                    text='Logout' 
+                    className="w-full text-center flex justify-center gap-2 items-center" 
+                    onClick={()=>setLogoutModal(true)}
+                />
+            </div>
+        </div>
+    </div>
+  )
+}