Move Chevron Icon to the Right in SidebarNavigationDisclosure

[Clinton-dev]

Hello,

I'm working with the SidebarNavigationDisclosure component in Twilio Paste and would like to move the chevron icon from the left side to the right side of the disclosure heading.

By default, the chevron appears on the left side, but for my design, I need it to be positioned on the right side.

Screenshot:

---

Current Code:

<SidebarNavigationDisclosure>
  <SidebarNavigationDisclosureHeadingWrapper>
    <SidebarNavigationDisclosureHeading icon={<ProductContactCenterTeamsIcon decorative />} selected>
      Drivers
    </SidebarNavigationDisclosureHeading>
  </SidebarNavigationDisclosureHeadingWrapper>
  <SidebarNavigationDisclosureContent>
    <SidebarNavigationItem
      href="/drivers/applications"
      onClick={(e) => { e.preventDefault(); navigate('/drivers/applications'); }}
      selected={window.location.pathname === '/drivers/applications'}
    >
      Driver Applications
    </SidebarNavigationItem>
  </SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>

---

What I Tried:

I attempted to manually place the chevron on the right side using Box and ChevronDownIcon, but I encountered the following issues:

• The chevron displays but does not have the default animation.
• The chevron does not toggle the menu open/close.
• The chevron does not inherit the default white color.

Attempted Code:

const [isOpen, setIsOpen] = useState(false);

const handleToggle = () => {
  setIsOpen(prevState => !prevState);
};

<SidebarNavigationDisclosure>
  <SidebarNavigationDisclosureHeadingWrapper>
    <Box display="flex" justifyContent="space-between" alignItems="center">
      <SidebarNavigationDisclosureHeading icon={<ProductContactCenterTeamsIcon decorative />} selected>
        Drivers
      </SidebarNavigationDisclosureHeading>
      <ChevronDownIcon
        decorative={false}
        title="Toggle"
        onClick={handleToggle}
        style={{
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
          transition: 'transform 0.3s ease',
          color: 'white',
        }}
      />
    </Box>
  </SidebarNavigationDisclosureHeadingWrapper>
  <SidebarNavigationDisclosureContent isOpen={isOpen}>
    <SidebarNavigationItem href="/drivers/applications" selected={window.location.pathname === '/drivers/applications'}>
      Driver Applications
    </SidebarNavigationItem>
  </SidebarNavigationDisclosureContent>
</SidebarNavigationDisclosure>

---

Question:

Is there a built-in way in SidebarNavigationDisclosure to position the chevron on the right while retaining its default animation, color, and functionality?
Or is there a recommended approach to achieve this?

Any guidance would be greatly appreciated. Thanks!

[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.

---

Sorry, I don't know how to help with that.

I did do a search though, 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:

• No prop to change Nav Item icon to ChevronDisclosureIcon - Answer (updated: 11/03/2020, similarity score: 88%)
• Disclosure width issues when placed in Flex (updated: 07/07/2022, similarity score: 86%)
• No prop to change Nav Item icon to ChevronDisclosureIcon (updated: 11/03/2020, similarity score: 85%)

[dosubot[bot]]

The SidebarNavigationDisclosure component in Paste does not provide a built-in property to directly move the chevron icon to the right side of the heading. However, you can achieve this by customizing the component's layout while retaining the default animation, color, and functionality.

Here's a recommended approach:

1. Use Flexbox for Layout: You can use a Box with display="flex" to arrange the heading and chevron icon. Set justifyContent="space-between" to position the chevron on the right.

2. Retain Default Functionality: Use the useSidebarNavigationDisclosureState hook to manage the open/close state and toggle functionality.

3. Customize the Chevron: Use the ChevronDisclosureIcon from Paste to ensure you retain the default styles and animations.

Here's an example implementation:

import { useSidebarNavigationDisclosureState } from '@twilio-paste/core/sidebar';
import { ChevronDisclosureIcon } from '@twilio-paste/icons/esm/ChevronDisclosureIcon';

const SidebarNavigationDisclosureExample = () => {
  const disclosure = useSidebarNavigationDisclosureState();

  return (
    <SidebarNavigationDisclosure state={disclosure}>
      <SidebarNavigationDisclosureHeadingWrapper>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <SidebarNavigationDisclosureHeading icon={<ProductContactCenterTeamsIcon decorative />} selected>
            Drivers
          </SidebarNavigationDisclosureHeading>
          <Box
            as="span"
            display="flex"
            color="colorTextIconInverse"
            height="sizeIcon20"
            width="sizeIcon20"
            transition="transform 150ms ease"
            transform={disclosure.visible ? 'rotate(90deg)' : 'rotate(0deg)'}
            onClick={disclosure.toggle}
          >
            <ChevronDisclosureIcon color="inherit" decorative size="sizeIcon20" />
          </Box>
        </Box>
      </SidebarNavigationDisclosureHeadingWrapper>
      <SidebarNavigationDisclosureContent>
        <SidebarNavigationItem
          href="/drivers/applications"
          selected={window.location.pathname === '/drivers/applications'}
        >
          Driver Applications
        </SidebarNavigationItem>
      </SidebarNavigationDisclosureContent>
    </SidebarNavigationDisclosure>
  );
};

This approach uses the ChevronDisclosureIcon to maintain the default appearance and behavior, while the Box component is used to position the icon on the right. The disclosure.toggle function is used to handle the toggle functionality, ensuring the chevron icon's rotation and the menu's open/close state are synchronized.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[krisantrobus]

Hi @Clinton-dev 👋 this is not currently supported for the component. Is this a product of Twilio?

You can achieve something similar though by using our CustomizationProvider to target the specific header elements. Here is a CodeSandbox for how this works and code snippet below. The issue with this is it would also change the decorative icon and text positions. If you removed icons you could get it to look good if you added justifyContent: "space-between" to the customization. provider.

<CustomizationProvider
          elements={{
            SIDEBAR_NAVIGATION_DISCLOSURE_HEADING: {
              direction: "rtl",
            },
          }}
        >

[krisantrobus]

Marking as answered due to inactivity. Happy to revisit this again if you need a follow up.