JavaScript — Как закрыть полноэкранное меню при нажатии на ссылку

Как закрыть полноэкранное меню при нажатии на ссылку

Моя проблема в том, что когда я нажимаю на домашнюю ссылку, ничего не происходит, остается на этой панели навигации, все остальные ссылки работают нормально. Я хотел бы, чтобы меню закрывалось после каждого щелчка по ссылкам. У меня есть prop menuIsOpen, которое по умолчанию равно false. Вторая функция или я могу сделать это в CSS. Спасибо за помощь.x

 import styled from "styled-components"; import MobileMenuList from "./MobileMenuList"; import StyledButton from "../styles/Button"; import Link from "next/link"; const StyledNavbarMobile = styled.div` position: absolute; width: 100%; height: 100vh; background: ${props ={amp}gt; props.theme.veryDark}; visibility: hidden; opacity: 0; z-index: 2; overflow: hidden; text-align: center; transition: all 0.3s ease-in-out; transform: ${props ={amp}gt; props.menuIsOpen ? "translateX(0%)" : "translateX(100%)"}; .mobile-menu-list { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 8rem; visibility: hidden; opacity: 0; @media (max-width: 768px) { visibility: ${props ={amp}gt; (props.menuIsOpen ? "visible" : "hidden")}; opacity: ${props ={amp}gt; (props.menuIsOpen ? "1" : "0")}; } a { font-size: 4rem; font-family: "MaverickStandard"; color: ${props ={amp}gt; props.theme.white}; } } @media (max-width: 768px) { visibility: ${props ={amp}gt; (props.menuIsOpen ? "visible" : "hidden")}; opacity: ${props ={amp}gt; (props.menuIsOpen ? "1" : "0")}; a { font-family: "MaverickStandard"; } } `; const StyledLogin = styled(StyledButton)` padding: 1rem 8rem 1rem 8rem; margin-top: 8rem; visibility: 0; opacity: 0; vertical-align: middle; text-align: center; @media (max-width: 768px) { visibility: ${props ={amp}gt; (props.menuIsOpen ? "visible" : "hidden")}; opacity: ${props ={amp}gt; (props.menuIsOpen ? "1" : "0")}; } `; const NavbarMobile = props ={amp}gt; ( {amp}lt;StyledNavbarMobile menuIsOpen={props.menuIsOpen}{amp}gt; {amp}lt;MobileMenuList /{amp}gt; {amp}lt;StyledLogin size="4rem" color="#ffffff" borderSize="3px" menuIsOpen={props.menuIsOpen} {amp}gt; {amp}lt;Link href="/login"{amp}gt; {amp}lt;a{amp}gt;LOGIN{amp}lt;/a{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/StyledLogin{amp}gt; {amp}lt;/StyledNavbarMobile{amp}gt; ); export default NavbarMobile; 

И это ссылка с моего navbar.

 import Link from "next/link"; const ManuList = props ={amp}gt; { return ( {amp}lt;ul className="mobile-menu-list"{amp}gt; {amp}lt;li{amp}gt; {amp}lt;Link href="/"{amp}gt; {amp}lt;a{amp}gt;Home{amp}lt;/a{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;Link href="/gallery"{amp}gt; {amp}lt;a{amp}gt;Gallery{amp}lt;/a{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;Link href="/articles"{amp}gt; {amp}lt;a{amp}gt;Articles{amp}lt;/a{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;Link href="/contact"{amp}gt; {amp}lt;a{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/Link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; ); }; export default ManuList; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector