CODEWITHSUNDEEP
reactjs
Josh
Josh

Reputation: 75

Unable to toggle expanded nav menu

I want to create an expandable side menu which is toggled by clicking the hamburger menu inside "MobileNav". I'm having issues selecting the elements since they're inside seperate documents. How would I go about doing this?

The idea is to add and remove the "hidden" class to hide and show the expanded menu.

App

import React from "react";
import ExpandedNav from "./components/ExpandedNav";
import MobileNav from "./components/MobileNav";
import Navbar from "./components/Navbar";
import "./styles/styles.css";

function App() {
  return (
    <div className="app-wrapper">
      {/* Mobile Nav */}
      <MobileNav />
      <ExpandedNav />
      {/* Main Nav */}
      <Navbar />

      {/* Routing */}
    </div>
  );
}

export default App;

Expanded Nav

import React from "react";

function ExpandedNav() {
  return <div className="expanded-nav" id="expanded-nav"></div>;
}

export default ExpandedNav;

Mobile Nav

import React from "react";
import { AiOutlineMenu } from "react-icons/ai";

function MobileNav() {
  return (
    <div className="app-mobile-nav">
      <div className="mobile-nav-brand">
        <span>Chicken</span>
        <div className="mobile-nav-divider" />
        <span>Little</span>
      </div>
      <AiOutlineMenu className="nav-icon" id="mobile-hb-nav" />
    </div>
  );
}

export default MobileNav;

Expanded Nav SCSS

.expanded-nav {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 15px 20px 15px 0px;
  width: 300px;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  border: $thin-light-border;
  background-color: $block-color;
}

.hidden {
  display: none; /* responds to click event */
}

Upvotes: 0

Views: 27

Answers (1)

Deki Mioc
Deki Mioc

Reputation: 11

There is a better way then toggling CSS classes. Add state in the App file and then forward function for changing state via props to the MobileNav component. Based on the state show or hide expanded component. Something like this:

import React from "react";
import ExpandedNav from "./components/ExpandedNav";
import MobileNav from "./components/MobileNav";
import Navbar from "./components/Navbar";
import "./styles/styles.css";

function App() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <div className="app-wrapper">
     {/* Mobile Nav */}
     <MobileNav toggleNav={() => setIsVisible(!visible)}/>
     {isVisible && <ExpandedNav />}
     {/* Main Nav */}
     <Navbar />
     {/* Routing */}
   </div>
 );
}

export default App;

import React from "react";
import { AiOutlineMenu } from "react-icons/ai";

function MobileNav({toggleNav}) {
    return (
      // Add onClick function to the element that you need, this is only 
      //  for example
      <div className="app-mobile-nav" onClick={toggleNav}>
         <div className="mobile-nav-brand">
         <span>Chicken</span>
         <div className="mobile-nav-divider" />
         <span>Little</span>
       </div>
      <AiOutlineMenu className="nav-icon" id="mobile-hb-nav" />
    </div>
  );
}

export default MobileNav;

Upvotes: 1

Related Questions