DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

started layout adjusting

Browse Source
This commit was merged in pull request #2.
This commit is contained in:
victorAnumudu
2025-04-06 02:24:29 +01:00
parent 4d89908200
commit 9520b2e851
15 changed files with 448 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/aside/DashboardAside.jsx
+47 -37
View File
@@ -1,5 +1,4 @@
import { useEffect, useState } from "react";
import {Link, useLocation} from 'react-router-dom'
import {useLocation} from 'react-router-dom'
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
@@ -8,45 +7,33 @@ import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
import { useSelector } from "react-redux";
import { generalLayoutContext } from "../../../context/GeneralLayoutContext";
import { TbLogout2 } from "react-icons/tb";
import UserAvatar from '../../../assets/user_avatar.jpg'
import Icons from "../../Icons";
export default function DashboardAside({shrinkAside=false}) {
export default function DashboardAside() {
const {pathname} = useLocation()
const {setLogoutModal} = generalLayoutContext()
const {setLogoutModal, activeMenu, handleActiveMenu} = generalLayoutContext()
const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
const {role}= userDetails
// const [hideSubMenu, setHideSubMenu] = useState('')
// const handleHideSubMenu = (name) => {
// // e.stopPropagation()
// 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">
<div className="mb-3 w-full h-24 logo flex items-center">
<DummyLogo />
</div>
<hr className="border-slate-400" />
{/* <hr className="border-slate-400" /> */}
<div className="p-4 w-full flex flex-col gap-2 h-full overflow-y-auto">
<div className="aside-scroll-design w-full flex flex-col gap-2 h-full overflow-y-auto">
{asideNavLinks.map((link, index) => {
let active = link.status == 1 ? true : false
let hasSubLinks = (link.subLinks && link.subLinks.length > 0) ? true : false
if(active && !hasSubLinks){
return (
<div key={index}>
<AsideLink to={link.to} shrinkAside={shrinkAside} name={link.name} icon={link.icon} />
<AsideLink to={link.to} name={link.name} icon={link.icon} />
</div>
)
}
@@ -70,9 +57,9 @@ export default function DashboardAside({shrinkAside=false}) {
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-12 text-slate-400 font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
<h1 className="px-4 py-2 text-sm sm:text-sm text-black dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
}
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
<>
{link.subLinks.map((subItem, index)=>{
let active = subItem.status == 1 ? true : false
@@ -80,7 +67,7 @@ export default function DashboardAside({shrinkAside=false}) {
if(active && !hasSubLinks){
return (
<div key={index}>
<AsideLink key={index} to={subItem.to} shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} />
<AsideLink key={index} to={subItem.to} name={subItem.name} icon={subItem.icon} />
</div>
)
}else if(active && hasSubLinks){
@@ -90,14 +77,14 @@ export default function DashboardAside({shrinkAside=false}) {
}
})
return(
<AsideLinkWithSubLinks shrinkAside={shrinkAside} name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
<AsideLinkWithSubLinks name={subItem.name} icon={subItem.icon} isOpen={subLinkList.includes(pathname)}>
<>
{subItem.subLinks.map((item, index)=>{
let active = item.status == 1 ? true : false
if(active){
return (
<div key={index}>
<AsideLink key={index} to={item.to} shrinkAside={shrinkAside} name={item.name} icon={item.icon} />
<AsideLink key={index} to={item.to} name={item.name} icon={item.icon} />
</div>
)
}
@@ -117,17 +104,40 @@ export default function DashboardAside({shrinkAside=false}) {
})}
</div>
<div className='px-4 py-2'>
<div className="bg-primary rounded w-full flex justify-center items-center gap-2">
<MainBtn
shrinkAside={shrinkAside}
text='Logout'
className="w-full text-center flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)}
>
<TbLogout2 className="text-base" />
</MainBtn>
<div className='py-2 mt-4 relative'>
<div className="w-full flex items-center gap-2">
<div className="w-full flex items-center gap-2">
<img src={UserAvatar} alt='user avatar' className='w-12 h-12 p-1 rounded-full' />
<div>
<p className="text-sm font-bold text-black-body dark:text-white-body">Username</p>
<p className="text-12 text-black-box/90 dark:text-white-body/80">username@gmail.com</p>
</div>
</div>
<button onClick={()=>handleActiveMenu('settings')} className="text-black-body dark:text-white-body">
<Icons name='settings' className='text-3xl' />
</button>
</div>
{activeMenu == 'settings' &&
<div className="pop-modal-down absolute p-4 w-full bg-white-body dark:bg-black-box left-0 bottom-[60%] rounded shadow-round_black dark:shadow-round_white">
<div className="w-full min-h-48 flex flex-col justify-between gap-4">
<div className="w-full h-full">
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
<h1 className="font-semibold">Username</h1>
<p className="-mt-2">username@gmail.com</p>
</div>
</div>
<div className="rounded w-full flex items-center gap-2">
<MainBtn
text='Logout'
className="w-full text-center text-black-body hover:text-red-500 dark:text-white-body font-bold text-lg flex justify-center gap-2 items-center"
onClick={()=>setLogoutModal(true)}
>
<TbLogout2 className="text-base" />
</MainBtn>
</div>
</div>
</div>
}
</div>
</div>
)