CODEWITHSUNDEEP
reactjs
LK10
LK10

Reputation: 157

Open NavBar on button click

I've built a simple Navbar with a button inside the Navbar which makes the Navbar close on click - Now, I'd like to get the Navbar to re-open when I click on another button (note: this is not the same button as the one I close it with.

Here's my Navbar:

import React, { useState } from 'react';

export default function Navbar() {
    const [showNav, setShowNav] = useState(true)


  return (
    <>
    {showNav && <div className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
    }
    </>
  )
}

Here's my App.js

import './App.css';
import Navbar from './components/Navbar';
import { useState } from 'react';

function App() {
  const [showNav, setShowNav] = useState(true)

  return (
    <>
      <div className="flex">
        {showNav && <Navbar />}
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(true)}>Open Navbar</button>
      </div>
    </>
  );
}

export default App;

Upvotes: 2

Views: 1126

Answers (2)

pablo henrique
pablo henrique

Reputation: 342

Create a button to open, outside the if.

Codesandbox

Heres the code


import React, { useState } from "react";

export default function Navbar() {
  const [showNav, setShowNav] = useState(true);

  return (
    <>
      {!showNav && (
        <button
          className="bg-primary w-32 h-12 rounded-lg text-white"
          onClick={() => setShowNav(true)}
        >
          Open Navbar
        </button>
      )}
      {showNav && (
        <div className="w-48 bg-gray-200 h-screen py-10">
          <button
            className="bg-primary w-32 h-12 rounded-lg text-white"
            onClick={() => setShowNav(false)}
          >
            Close Navbar
          </button>
          <h1>Dashboard</h1>
          <h2>Menu item</h2>
          <h2>Menu item</h2>
          <h2>Menu item</h2>
        </div>
      )}
    </>
  );
}

If you want you can make it one button only as well, just add some styling or a container wrapping everything up.

  return (
    <>
      <button
        className="bg-primary w-32 h-12 rounded-lg text-white"
        onClick={() => setShowNav(showNav)}
      >
        {showNav ? "Close Navbar": "OpenNavbar"}
      </button>
      {showNav && (
        <div className="w-48 bg-gray-200 h-screen py-10">
          <h1>Dashboard</h1>
          <h2>Menu item</h2>
          <h2>Menu item</h2>
          <h2>Menu item</h2>
        </div>
      )}
    </>
  );

Upvotes: 1

Benni
Benni

Reputation: 664

Just use one state for opening and closing the navbar and pass it down from App.js to your Navbar.

Navbar:

import React, { useState } from 'react';

export default function Navbar({showNav, setShowNav}) {

  return (
    <>
    {showNav && <div className="w-48 bg-gray-200 h-screen py-10">
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(false)}>Close Navbar</button>       
        <h1>Dashboard</h1>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
        <h2>Menu item</h2>
    </div>
    }
    </>
  )
}

App.js

import './App.css';
import Navbar from './components/Navbar';
import { useState } from 'react';

function App() {
  const [showNav, setShowNav] = useState(true)

  return (
    <>
      <div className="flex">
        <Navbar showNav={showNav} setShowNav={setShowNav} />
        <button className="bg-primary w-32 h-12 rounded-lg text-white" onClick={() => setShowNav(true)}>Open Navbar</button>
      </div>
    </>
  );
}

export default App;

Upvotes: 2

Related Questions