NextJS: sidebar routing - currently clicked link

Question

I recently asked this question, and found help to make my sidebar links respond by displaying a component in the main div of my page.

Now I want to figure out how to use this where I have more than one option in my sidebar. I added library and tasks, but when I click library - it reveals the library component in the main div (I want this), but when I then click tasks, it reveals both library and tasks components. I only want the tasks component to show in that event.

What is the js command to setState to false if the link is not the most recently clicked link?

function Sidebar({ toggleLibrary, toggleTasks }) {
  // const { me, loading } = useMe()
  

  return (
    
            <Stack spacing="1" >
              
              <NavButton label="Tasks"  fontWeight="normal" onClick={toggleTasks} />
              
              <NavButton label="Deals"  fontWeight="normal" onClick={toggleLibrary}/>
            </Stack>
  
  )
}
const DashBase = () => {
    const isDesktop = useBreakpointValue({ base: false, lg: true })
    //  the menu component should initially be hidden
    const [showLibrary, setShowLibrary] = React.useState(false)
    const [showTask, setShowTask] = React.useState(false)

  // state setter to switch between our `true` and `false` states
    const toggleLibrary = () => setShowLibrary(!showLibrary)
    const toggleTasks = () => setShowTask(!showTask)
    const router = useRouter()
    return (
      <Flex
      >

        {isDesktop ? <Sidebar toggleLibrary={toggleLibrary} toggleTasks={toggleTasks} /> : <Navbar />}
  
        <Container py="8" flex="none">
          
          {showLibrary ? <Library /> : '' }
          {showTask ? <Tasks /> : '' }

Do you only ever want one shown at a time? Is that the idea? — Drew Reese, Sep 17 '22 at 00:00

Drew Reese · Accepted Answer · 2022-09-17T00:13:42.150

Currently the code has an independent state for each item you want to toggle. While you could enqueue state updates to toggle all other states false when a new item is toggled true, this is rather unmaintainable code.

If the goal is to only ever render a single active item then I'd suggest just using a single active state and set the value in a single callback passed to the Sidebar component.

Example:

const DashBase = () => {
  const isDesktop = useBreakpointValue({ base: false, lg: true });
  //  nothing initially is active
  const [showActive, setShowActive] = React.useState(null);

  // state setter to switch between our `null` and "active" id states
  const toggleActive = (key) => setShowActive(
    active => active === key ? null : key
  );
  const router = useRouter()
  return (
    <Flex>
      {isDesktop ? <Sidebar toggleActive={toggleActive} /> : <Navbar />}

      <Container py="8" flex="none">
        {showActive === 'library' && <Library />}
        {showActive === 'tasks' && <Tasks />}
        ...

...

function Sidebar({ toggleActive }) {
  return (
    <Stack spacing="1" >
      <NavButton
        label="Tasks"
        fontWeight="normal"
        onClick={() => toggleActive("tasks")}
      />
      <NavButton
        label="Deals"
        fontWeight="normal"
        onClick={() => toggleActive("library")}
      />
    </Stack>
  );
}

NextJS: sidebar routing - currently clicked link

1 Answers1