I'm looking to create a navigation system where clicking on a button scrolls to a specific section. However, I'm wondering how to deselect three inputs when one is selected in next.js using the code below. Do I need to modify each menu item individually or can I keep it as is?
Any help would be greatly appreciated :)
function NavMenu() {
function MenuItem(props) {
const [menuItemActive, setMenuItemActive] = useState(false);
const MenuItemToggle = ({onChange, value}) =>
<label className='navitem-container'>
<input checked={value} type="checkbox" onChange={onChange} className='menuiteminput' id={props.idinput}/>
<span className='navitem-slider' id={props.idspan}>
{props.children}
</span>
</label>
;
return (
<div>
<MenuItemToggle value={menuItemActive} onChange={(event) => setMenuItemActive(event.currentTarget.checked)}/>
</div>
)
}
return (
<div>
<div className='left-nav'>
<div className='left-navitem-container'>
<MenuItem idspan="services-span" idinput="services-input">
Services
</MenuItem>
<MenuItem idspan="portfolio-span" idinput="portfolio-input">
Portfolio
</MenuItem>
<MenuItem idspan="about-us-span" idinput="about-us-input">
About Us
</MenuItem>
<MenuItem idspan="contact-span" idinput="contact-input">
Contact
</MenuItem>
</div>
</div>
</div>
)
}
Below is the corresponding CSS:
.left-nav {
width: 250px;
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 3%;
position: fixed;
}
.menuiteminput {
position: absolute;
left: -9999px;
top: -9999px;
}
.menuiteminput:checked + #services-span:before,
.menuiteminput:checked + #portfolio-span:before,
.menuiteminput:checked + #about-us-span:before,
.menuiteminput:checked + #contact-span:before {
left: 72px;
content: url(../public/svgs/blank.svg);
transition-duration: 0.5s;
}
.menuiteminput:checked + .navitem-slider {
padding-left: 13px;
}
.navitem-container {
height: 30px;
display: flex;
align-items: center;
margin: 30px 0;
}
.navitem-slider {
margin: 20px 0;
height: 30px;
background-color: var(--accent-color);
width: 100px;
display: flex;
align-items: center;
font-size: 10pt;
border-radius: 100px;
position: relative;
padding-left: 33px;
cursor: pointer;
transition-duration: 0.5s;
}
.navitem-slider:before {
width: 16.5px;
height: 16.5px;
border-radius: 100px;
background-color: white;
left: 3px;
position: absolute;
top: 3px;
padding: 4px;
transition-duration: 0.5s;
}
#services-span:before {
content: url(../public/svgs/service.svg);
transition-duration: 0.5s;
}
#portfolio-span:before {
content: url(../public/svgs/portfolio.svg);
transition-duration: 0.5s;
}
#about-us-span:before {
content: url(../public/svgs/team.svg);
transition-duration: 0.5s;
}
#contact-span:before {
content: url(../public/svgs/contacts.svg);
transition-duration: 0.5s;
}
Thank you in advance for your assistance :D