ReactJS - Navbar Logic Issue

Question

I am currently working on my first project. I have been facing it for a few days and couldnt solve on my own. SO here I am looking for help - below there is an issue described.

I am trying to make simple Navbar (Home, About, Contact, Log In).

1. Panel is OFF: When the user clicks Home, the panel slides in. When the user clicks Home again the panel slides out. It doesnt matter which link will be clicked. If the panel is off, any of the Links Home, About, Contact, Log In) should cause panel slides in.

2. Panel is ON. Eg: The user turned on the panel with Home button. Another home button press will close the panel, but if user clicks other link then current one (About, Contact, Log In), panel's content is being switched to a different one instead of closing the panel. If the same link will be clicked again THAT's causing panel slides out.

Any instruction would be more then appreciated

Answer 1

Consider this sketch, hope it helps:

let panelState, lastClicked;

function homeClick(){
  panelState = !panelState;
  displayPanel(panelState);
}

function linkClick(linkname){
  if(lastClicked === linkname) return homeClick();
  lastClicked = linkname;
}

function displayPanel(position){
  if(position){
    // position is true -> show the panel
  }
  else {
    // position is false -> hide the panel
  }
}