Example of Sidebar, where the selected item/section remains expanded and marked

[evanTheTerribleWarrior]

Hello all,

I have gone through the docs and put together a Sidebar in my nextjs app.
Generally works fine and I can navigate between sections.

The way I have it, is basically a list of the nav items in its own file, for example

export const navigationItems = [
    {
      id: 'item1',
      label: 'item1',
      href: null,
      icon: Icon,
      children: [
        {
          id: 'overview',
          label: 'Overview',
          href: '/item1/overview',
          icon: null
        },

And then in the component I render them recursively as shown below. If the item has children, we use .map and add the same Component, until there are no more children. When we reach a leaf, we use Paste's SidebarNavigationItem

const SidebarNavItem = ({ item, setActiveItemId, currentActiveItemId }) => {
    const hasChildren = item.children && item.children.length > 0;
    const iconProps = item.icon ? <item.icon decorative={true}/> : null;

    const disclosure = useSidebarNavigationDisclosureState();
  
    if (hasChildren) {
      return (
        <SidebarNavigationDisclosure >
            <SidebarNavigationDisclosureHeadingWrapper>
                <SidebarNavigationDisclosureHeading icon={iconProps}>
                    
                    {item.label}
                </SidebarNavigationDisclosureHeading>
          </SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureContent>
            {item.children.map((childItem) => (
              <SidebarNavItem
                key={childItem.id}
                item={childItem}
                setActiveItemId={setActiveItemId}
              />
            ))}
          </SidebarNavigationDisclosureContent>
        </SidebarNavigationDisclosure>
      );
    }
  
    return (
      <SidebarNavigationItem
        href={item.href}
        onClick={() => {disclosure.toggle();setActiveItemId(item.id)}}
        icon={iconProps}
        selected = { currentActiveItemId === item.id ? true : false}
      >
        
        {item.label}
      </SidebarNavigationItem>
    );
  };

  export default SidebarNavItem

The behaviour i see is that I can open and reach any node just fine, but when clicked the nav bar completely resets.

I am trying to achieve what I see in Paste's site, where when expanded and clicked, it stays there (and the rest of the bar is reset, but not the current path)

I have tried to follow examples but I am not sure I have found something that focuses on that behaviour.

Sorry - very new to Paste

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello!

To achieve the behavior you're describing, where the sidebar maintains its expanded state for the current path while collapsing others, you need to manage the state of each SidebarNavigationDisclosure component to ensure it remains open if it or any of its children are the current active item. This involves a bit more state management than what's shown in your current implementation.

Based on the Paste documentation and your description, here's an approach you can take:

1. Maintain State for Active Item: You're already passing setActiveItemId and currentActiveItemId to track the active item. This is good!

2. Expand Parents of the Active Item: Modify your SidebarNavItem component to automatically expand its parents if it or any of its children is the active item. This involves checking if the currentActiveItemId is within its children and setting the disclosure state accordingly.

3. Pass Down Active Item ID for Checks: Ensure that each recursive call to SidebarNavItem for children passes down the currentActiveItemId so each component can check if it should be expanded.

Here's a modified version of your SidebarNavItem component that includes a basic example of how you might implement this logic:

const SidebarNavItem = ({ item, setActiveItemId, currentActiveItemId }) => {
  const hasChildren = item.children && item.children.length > 0;
  const iconProps = item.icon ? <item.icon decorative={true} /> : null;

  // Determine if the current item or any of its children is the active item
  const isActiveOrParentOfActiveItem = useMemo(() => {
    const isActiveItem = item.id === currentActiveItemId;
    const isParentOfActiveItem = item.children?.some(child => child.id === currentActiveItemId);
    return isActiveItem || isParentOfActiveItem;
  }, [item, currentActiveItemId]);

  // Use the state to control the disclosure based on the active item
  const disclosure = useSidebarNavigationDisclosureState({visible: isActiveOrParentOfActiveItem});

  if (hasChildren) {
    return (
      <SidebarNavigationDisclosure state={disclosure}>
        <SidebarNavigationDisclosureHeadingWrapper>
          <SidebarNavigationDisclosureHeading icon={iconProps}>
            {item.label}
          </SidebarNavigationDisclosureHeading>
        </SidebarNavigationDisclosureHeadingWrapper>
        <SidebarNavigationDisclosureContent>
          {item.children.map((childItem) => (
            <SidebarNavItem
              key={childItem.id}
              item={childItem}
              setActiveItemId={setActiveItemId}
              currentActiveItemId={currentActiveItemId}
            />
          ))}
        </SidebarNavigationDisclosureContent>
      </SidebarNavigationDisclosure>
    );
  }

  return (
    <SidebarNavigationItem
      href={item.href}
      onClick={() => {disclosure.toggle(); setActiveItemId(item.id);}}
      icon={iconProps}
      selected={currentActiveItemId === item.id}
    >
      {item.label}
    </SidebarNavigationItem>
  );
};

export default SidebarNavItem;

This example uses useMemo to determine if the current item or any of its children is the active item and sets the disclosure state accordingly. Note that this is a simplified example and might need adjustments based on your full application context.

For more details on implementing the SidebarNavigation components and managing their state, you can refer to the Paste documentation:

• Sidebar Navigation: https://paste.twilio.design/components/sidebar-navigation
• Disclosure: https://paste.twilio.design/components/disclosure

Remember, the key to achieving the desired behavior is correctly managing the state of each disclosure to ensure it remains open when it or its children are the active item.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Sidebar Bug (updated: 08/10/2023, similarity score: 86%)
• Icon based on Disclosure state (updated: 10/27/2023, similarity score: 85%)
• Sidebar mobile view (updated: 08/30/2023, similarity score: 85%)

[evanTheTerribleWarrior]

still same behaviour

[roxanagomez]

 Hi @evanTheTerribleWarrior Our engineering team will take a look at this and get back to you in a bit. Thanks for trying out the bot recommendation!

[roxanagomez]

Also, in the meantime please take a look at our code for the website sidebar it might help you too.

[nkrantz]

Hey @evanTheTerribleWarrior - did following the Paste website's Sidebar code help?

[evanTheTerribleWarrior]

Hello! I have looked the overall code but I havent had a chance to try and integrate just yet - it is a bit extensive so need some time to wrap my head around it. If you have any pointers i.e. which specific part would be relevant to the "stay expanded" behaviour, happy to review it

[evanTheTerribleWarrior]

Ok figured it out. the culprit was here
https://github.com/twilio-labs/paste/blob/main/packages/paste-website/src/components/site-wrapper/sidebar/SidebarAnchor.tsx
I needed to wrap the SidebarNavigationItem with "Link", and now seems to work.
Without Link, it seems that every time i clicked a page, it was basically doing a full refresh and therefore this caused the whole thing to reset.

Unless there is anything else you want to point out to me to be aware of, we can close this