i am facing issue in my aside menu of metronic theme which is, i have menu which contains sub menu options like dropdown when i click arrow button open the dropdown it stucks and not open until i refresh the page, give me the solution of this issue
code:
import React, {useState} from 'react'
import clsx from 'clsx'
import {useLocation} from 'react-router'
import {checkIsActive, KTIcon, WithChildren} from '../../../helpers'
import {toAbsoluteUrl} from '../../../helpers'
import {Link} from 'react-router-dom'
import {boolean} from 'yup'
import {useDispatch, useSelector} from 'react-redux'
import './menu.css'
import {setRightBarItem} from '../../../../store/slices/RightToolBarSlice'
import { RootState } from '../../../../store'
type Props = {
to: string
path: string
title: string
icon?: string
fontIcon?: string
hasBullet?: boolean
}
const AsideMenuItemWithSub: React.FC<Props & WithChildren> = ({
children,
to,
path,
title,
icon,
fontIcon,
hasBullet,
}) => {
const [isArrowDown, setIsArrowDown] = useState(false)
const handleArrowClick = () => {
setIsArrowDown(!isArrowDown) // Toggle the arrow direction
}
const dispatch = useDispatch()
const {pathname} = useLocation()
const isActive = checkIsActive(pathname, to)
console.log(pathname + ' ' + to)
/* let TopRoutes=[
"/schedule"
] */
// const showAsideDropdown = localStorage.getItem('showAsideDropdown')
const showAsideDropdown = useSelector((state:RootState)=>{
return state.UserSubscriptionDetail.showAsideDropdown
})
console.log("showAsideDropdown=",showAsideDropdown);
/* console.log("yes" +to + " "+ isUshare ) */
const TopMenu = () => {
console.log('top menu')
}
const setToolBarItem = (value: string) => {
dispatch(setRightBarItem(value))
}
return (
<div
className={clsx('menu-item', {'here show':showAsideDropdown }, 'menu-accordion')}
data-kt-menu-trigger='click'
>
{/* <Link to={to}> */}
<span className=' menu-link'>
{hasBullet && (
<span className='menu-bullet'>
<span className='bullet bullet-dot'></span>
</span>
)}
{icon && (
<span className='menu-icon'>
<img src={toAbsoluteUrl(path)} className='img-fluid' alt='' />
</span>
)}
{fontIcon && <i className={clsx('bi fs-3', fontIcon)}></i>}
<span
className='menu-title text-white'
style={{fontSize: '16px', fontWeight: '400'}}
onClick={handleArrowClick}
>
{title}
</span>
{/* <span className='menu-arrow' style={{color:"white"}}></span>
*/}
<span className={` ${isArrowDown ? 'down' : ''}`} onClick={handleArrowClick}>
{/* Render your arrow here */}
{isArrowDown ? (
<img
src={toAbsoluteUrl('/media/event/bottom_arrow.png')}
className='img-fluid'
alt=''
/>
) : (
<img src={toAbsoluteUrl('/media/event/left_arrow1.png')} className='img-fluid' alt='' />
)}
</span>
</span>
<div className={clsx('menu-sub menu-sub-accordion ', {'menu-active-bg': isActive})}>
{children}
</div>
</div>
)
}
export {AsideMenuItemWithSub}
Hi,
Thank you for reaching out to us.
Unfortunately, we were not able to reproduce this error in the latest Metronic version
Could you please specify which Metronic version you are using?
Do you experience the same problem on Metronic React preview page?
https://preview.keenthemes.com/metronic8/react/demo1/dashboard
Regards,
Lauris Stepanovs,
Keenthemes Support Team