I want to create a side menu for my application and while the menu is presented normally, when i click on an item it rearranges the items on the sub-list. You can see the behaviour below:
The menu is loaded as an array of objects, like shown below:
export const menu = [
{name: 'Encoders', type: 'title'},
{name: 'Web', type: 'link', options: [
{title: 'URL Encode', url: '/url-encode'},
{title: 'URL Decode', url: '/url-decode'},
{title: 'HTML Encode', url: '/html-encode'},
{title: 'HTML Decode', url: '/html-decode'}
]},
{name: 'Base', type: 'link', options: [
{title: 'Base64 Encode', url: '/base64-encode'},
{title: 'Base64 Decode', url: '/base64-decode'},
{title: 'Base32 Encode', url: '/base32-encode'},
{title: 'Base32 Decode', url: '/base32-decode'},
]},
{name: 'Hashing', type: 'title'},
{name: 'SHA', type: 'link', options: [
{title: 'SHA1', url: '/sha1'},
{title: 'SHA224', url: '/sha224'},
{title: 'SHA256', url: '/sha256'},
{title: 'SHA384', url: '/sha384'},
{title: 'SHA512', url: '/sha512'},
{title: 'SHA3-224', url: '/sha3-224'},
{title: 'SHA3-256', url: '/sha3-256'},
{title: 'SHA3-384', url: '/sha3-384'},
{title: 'SHA3-512', url: '/sha3-512'},
{title: 'Keccak-224', url: '/keccak224'},
{title: 'Keccak-256', url: '/keccak256'},
{title: 'Keccak-384', url: '/keccak384'},
{title: 'Keccak-512', url: '/keccak512'},
{title: 'RIPEMD-160', url: '/ripemd160'},
]}
]
And this is the SideNavigation.js file, which loads the menu file and presents it:
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { menu } from './Menu'
const SideNavigation = () => {
const [selectedMenu, setSelectedMenu] = useState('')
const menuSelectHandler = event => {
if (event.target.getAttribute('data-key')) {
const selElemenet = event.target.getAttribute('data-key');
const elem = selElemenet === selectedMenu ? '' : selElemenet;
setSelectedMenu(elem);
localStorage.setItem('menu', elem);
}
}
return (
<div className='sidebar show-sidebar'>
{
menu.map(item => {
if (item.type === 'title') {
return <div key={'menu-title'+item.name} className='sidebar-menu-item'><span className='sidebar-group-title'>{item.name}</span></div>
} else {
return (
<div key={'menu-item'+item.name}>
<div data-key={item.name} className={ selectedMenu === item.name ? 'sidebar-menu-item sidebar-menu-item-selected' : 'sidebar-menu-item' } onClick={menuSelectHandler} >
<div data-key={item.name} className='sidebar-group-item'>
<span data-key={item.name} className='sidemenu-item-title'>{item.name}</span>
<span data-key={item.name} className='sidemenu-item-count'>{item.options.length}</span>
</div>
</div>
<div className={ selectedMenu === item.name ? 'sidebar-submenu-visible' : 'sidebar-submenu' }>
<SubSideNavigation options={item.options} />
</div>
</div>
)
}
})
}
</div>
)
}
const SubSideNavigation = props => {
return props.options.map(option => (
<div className='sidebar-menu-subitem' key={option.title} >
<Link className='sidebar-group-item' to={option.url}><span className='sidemenu-subitem-title'>{option.title}</span></Link>
</div>
))
}
export default SideNavigationAny suggestions or guidance what could cause this behavior?
Edit: https://codesandbox.io/s/dank-bash-tjx7zs
Unluckily the behaviour was not reproduced when I added my code to the codesandbox.