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

aside settings btn fixed

Browse Source
This commit was merged in pull request #8.
This commit is contained in:
victorAnumudu
2025-04-08 18:12:08 +01:00
parent 92688000ff
commit 18fc4505dc
9 changed files with 140 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layouts/DashboardHeader.jsx
+8 -2
View File
@@ -5,7 +5,7 @@ import { generalLayoutContext } from "../../context/GeneralLayoutContext"
import UserAvatar from '../../assets/user_avatar.jpg'
import HandBurger from "./HandBurger"
import { Link } from "react-router-dom"
import { Link, useLocation } from "react-router-dom"
import RouteLinks from "../../RouteLinks"
import { useState } from "react";
import MainBtn from "../MainBtn";
@@ -14,6 +14,8 @@ import Icons from "../Icons";
export default function DashboardHeader() {
let {pathname} = useLocation()
const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
return (
@@ -33,9 +35,13 @@ export default function DashboardHeader() {
<i className="fa-solid fa-wallet text-xl"></i>
</Link>
{/* RIGHT DRAWER BUTTON */}
{pathname == '/' &&
<div onClick={()=>setShowAsideDrawer('right-aside')} className='large:hidden w-10 h-10 border border-slate-300 text-slate-500 dark:text-white-body rounded-md px-2 flex justify-center items-center gap-2 cursor-pointer' title='Switch Color Mode'>
<Icons name='right-panel' className="text-sm md:text-xl font-bold" />
</div>
}
{/* MESSAGE */}
{/* <button onClick={()=>handleDrawer(drawerName.chat)} className="relative px-2 flex justify-center items-center gap-2 cursor-pointer">
<i className="fa-regular fa-envelope text-xl"></i>
@@ -54,7 +60,7 @@ export default function DashboardHeader() {
<div onClick={()=>handleActiveMenu('avatar')} className='relative cursor-pointer w-10 h-10 rounded shadow-round_black dark:shadow-round_white'>
<img src={UserAvatar} alt='user avatar' className='w-full h-full p-1 rounded-full' />
{activeMenu == 'avatar' &&
<div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white-body dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
<div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
<div className="w-full h-full flex flex-col gap-4">
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
<h1 className="font-semibold">Username</h1>
src/components/layouts/DashboardLayout.jsx
+15 -9
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Outlet, useLocation } from 'react-router-dom'
import DashboardHeader from './DashboardHeader'
import { generalLayoutContext } from '../../context/GeneralLayoutContext'
@@ -8,6 +8,8 @@ import RightAsideBar from './rightaside/RightAsideBar'
export default function DashboardLayout() {
let {pathname} = useLocation()
const {showAsideDrawer, setShowAsideDrawer} = generalLayoutContext()
return (
@@ -26,7 +28,7 @@ export default function DashboardLayout() {
</div>
</div>
<div className='main w-full bg-inherit large:mr-[400px]'>
<div className={`main w-full bg-inherit ${pathname == '/' && 'large:mr-[400px]'}`}>
<div className='fixed top-0 left-0 z-[777] w-full px-8 bg-inherit lg:hidden'>
<DashboardHeader />
</div>
@@ -43,15 +45,19 @@ export default function DashboardLayout() {
</div>
{/* Right Aisde */}
<div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
<RightAsideBar />
</div>
<div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
{/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
<div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
{pathname == '/' &&
<>
<div className={`px-8 py-4 hidden large:flex fixed right-5 top-0 bottom-0 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
<RightAsideBar />
</div>
</div>
<div className={`${showAsideDrawer =='right-aside' ? 'right-0 w-full' : '-right-full w-0'} fixed inset-0 z-[999] large:hidden bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')}>
{/* <div className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] right-0 top-0 inset-0 w-full bg-white/20 bg-red-400 transition-all cursor-pointer`} onClick={()=>setShowAsideDrawer('')} ></div> */}
<div onClick={(e)=>e.stopPropagation()} className={`${showAsideDrawer =='right-aside' ? 'right-0' : '-right-full'} fixed z-[999] top-0 botom-0 px-8 py-4 h-full w-4/5 sm:w-[400px] bg-[#192440] dark:bg-[#1E1E2D] text-white-body`}>
<RightAsideBar />
</div>
</div>
</>
}
</div>
)
}
src/components/layouts/aside/AsideLinkWithSubLinks.jsx
+2 -2
View File
@@ -18,13 +18,13 @@ export default function AsideLinkWithSubLinks({name, icon, to, children, isOpen}
return (
<div
className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded`}
className={`w-full px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded overflow-hidden`}
>
<button onClick={()=>setHideSubMenu(prev => !prev)} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-500 dark:text-white-body/90">
<span className="flex gap-2 items-center">{icon && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
<FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
</button>
<div className={`w-full ${(hideSubMenu) ? 'opacity-100' : 'opacity-0'} transition-aall duration-500`}>
<div className={`w-full ${(hideSubMenu) ? 'opacity-100 min-h-72' : 'opacity-0 h-0'} transition-all duration-500`}>
{children}
</div>
</div>
src/components/layouts/aside/DashboardAside.jsx
+5 -13
View File
@@ -38,11 +38,6 @@ export default function DashboardAside() {
)
}
if(active && hasSubLinks){
// let subLinkList = link.subLinks.filter(value => value.to).map(item => { //any of all open
// if(item.to){
// return item.to
// }
// })
let subLinkList = []
link.subLinks.forEach(item =>{
if(item.to){
@@ -53,13 +48,12 @@ export default function DashboardAside() {
})
}
})
// console.log('subLinkList', subLinkList)
return (
<div key={index} className="w-full">
{link.title &&
<h1 className="px-4 py-2 text-sm sm:text-sm text-slate-500 dark:text-white font-semibold uppercase mt-3 mb-1 border-b border-slate-800">{link.title}</h1>
}
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname)} >
<AsideLinkWithSubLinks name={link.name} icon={link.icon} isOpen={subLinkList.includes(pathname) || index==1} >
<>
{link.subLinks.map((subItem, index)=>{
let active = subItem.status == 1 ? true : false
@@ -105,7 +99,7 @@ export default function DashboardAside() {
</div>
<div className='py-2 mt-4 relative'>
<div className="w-full flex items-center gap-2">
<div className="group 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>
@@ -113,12 +107,10 @@ export default function DashboardAside() {
<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-slate-500 dark:text-white-body">
<button onClick={()=>handleActiveMenu('settings')} className="peer text-slate-500 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="hidden group-hover:block pop-modal-down absolute p-4 w-full bg-white 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">
@@ -137,7 +129,7 @@ export default function DashboardAside() {
</div>
</div>
</div>
}
</div>
</div>
</div>
)
src/components/layouts/rightaside/RightAsideBar.jsx
+4 -4
View File
@@ -8,7 +8,7 @@ export default function RightAsideBar() {
let [active, setActive] = useState('orders')
const handleActiveMenu = ({target:{name}}) => {
const handleActiveMenu = (name) => {
let lowerStr = name.toLowerCase()
setActive(lowerStr)
}
@@ -17,13 +17,13 @@ export default function RightAsideBar() {
<div className='w-full h-full flex flex-col gap-8'>
{/* Menu */}
<div className='grid grid-cols-3 gap-8'>
<button name='orders' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
<button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'orders' && 'scale-[1.2]'}`}>
<Icons name='dashboard' className='text-3xl' />
</button>
<button name='tickets' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
<button name='tickets' onClick={() => handleActiveMenu('tickets')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tickets' && 'scale-[1.2]'}`}>
<Icons name='settings' className='text-3xl' />
</button>
<button name='tasks' onClick={(e) => handleActiveMenu(e)} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
<button name='tasks' onClick={() => handleActiveMenu('tasks')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active == 'tasks' && 'scale-[1.2]'}`}>
<Icons name='dashboard' className='text-3xl' />
</button>
</div>