Side Navigation (Shopify Polaris Library) active item selection

Question

I'm trying to show the active side navigation items in Shopify Polaris Navigation components.

Here I have tried in few ways, problem is when I'm clicking nav items 2 times then showing the currently active nav link!

Can you suggest me better efficient code to solve this problem? If any more dynamic solutions available please suggest!

import React, { Fragment, useState } from "react";
import { Frame, Navigation, Page } from "@shopify/polaris";
import { GiftCardMinor } from "@shopify/polaris-icons";
import { useNavigate } from "react-router-dom";

const LeftNavigation = ({ pageTitle, loading, children }: any) => {
  const [selected, setSelected] = useState([false, false]);
  const navigate = useNavigate();

  const handleSelect = (index) => {
    // const newFilter = [...selected];
    // newFilter.fill(false, 0, newFilter.length);
    // newFilter[index] = true;
    // setSelected(newFilter);
    const newArray = selected.map((item, itemIndex) => {
      return itemIndex === index
        ? (selected[index] = true)
        : (selected[itemIndex] = false);
    });
    setSelected(newArray);
  };

  return (
    <Fragment>
      <Frame
        navigation={
          <div style={{ marginTop: "4rem" }}>
            <Navigation location="/">
              <Navigation.Section
                title="nav items"
                items={[
                  {
                    label: "one",
                    icon: icon1,
                    selected: selected[0],
                    onClick: () => {
                      handleSelect(0);
                      navigate("/one");
                    },
                  },
                  {
                    label: "two",
                    icon: icon2,
                    selected: selected[1],
                    onClick: () => {
                      handleSelect(1);
                      navigate("/two");
                    },
                  },
                ]}
              />
            </Navigation>
          </div>
        }
      ></Frame>
    </Fragment>
  );
};

export default LeftNavigation;

Answer 1

In order to make the "active" state more dynamic it should probably only store the id of the active menu item. When mapping/rendering the menu items check explicitly against the current state value. The onClick handler should pass the currently clicked-on item's "id" value to the callback handler.

Example using the "target path" as the id value*:

const LeftNavigation = ({ pageTitle, loading, children }: any) => {
  const [selected, setSelected] = useState<string | null>(null);
  const navigate = useNavigate();

  const handleSelect = (selectedId) => {
    setSelected(selected => selected === selectedId ? null : selectedId);
  };

  return (
    <Fragment>
      <Frame
        navigation={
          <div style={{ marginTop: "4rem" }}>
            <Navigation location="/">
              <Navigation.Section
                title="nav items"
                items={[
                  {
                    label: "one",
                    icon: icon1,
                    selected: selected === "/one",
                    onClick: () => {
                      handleSelect("/one");
                      navigate("/one");
                    },
                  },
                  {
                    label: "two",
                    icon: icon2,
                    selected: selected === "/two",
                    onClick: () => {
                      handleSelect("/two");
                      navigate("/two");
                    },
                  },
                ]}
              />
            </Navigation>
          </div>
        }
      ></Frame>
    </Fragment>
  );
};

*Note: the id value can be anything, but you should ensure it's unique per menu item if you want up to only one active at-a-time.