Problems with menu links

manuwweb · 7 June 2021 10:54

Good morning again community,

Yesterday I asked a couple of questions and in the end I decided to build my portfolio with frontity. (Bear in mind that I am a true newbie in programming and have not yet landed my first job in the tech world), I say this because my questions may be newbie.

When creating the menu I have encountered a problem. The problem is exactly the same as Frontity’s own website, and it is that when displaying the menu and clicking on any link, it works correctly, but of course the drop-down menu remains open and the only way to close it is by clicking again on the icon, I would like it to close when I click on any of the links.

How could I solve this? Since I can’t pass another onClick to the Link component, right?

Thanks!

codemonkeynorth · 7 June 2021 16:24

There is a solution to this in mars-theme which checks the onClick and closes the menu

github.com

frontity/frontity/blob/0da8e39de9c27890ffab3bb93c8eda7097615755/packages/mars-theme/src/components/link.js#L25

    
      
          * ```
          *
          * @returns A {@link Link} component, which returns an HTML anchor element.
          */
          const MarsLink = ({ children, ...props }) => {
           const { state, actions } = useConnect();
          
          
 /**
            * A handler that closes the mobile menu when a link is clicked.
            */
           const onClick = () => {
             if (state.theme.isMobileMenuOpen) {
               actions.theme.closeMobileMenu();
             }
           };
          
          
 return (
             <Link {...props} onClick={onClick}>
               {children}
             </Link>
           );