Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Aside Sub Menu stuck issue.


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}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(