feat: implement the drawer component of the new navigation

[mkarajohn]

Resolves DSTRBTN-540

Generated summary (powered by Graphite)

TL;DR

This pull request introduces a new Drawer component in the Navigation section of the UI. The Drawer component is a sidebar navigation menu that can be expanded or collapsed. It includes a client selector for switching between different organizations and a navigation header.

What changed

Three new files were created: Drawer.styles.ts, Drawer.tsx, and index.ts in the src/ui/Navigation/components/Drawer/ directory.

In Drawer.styles.ts, various styled components were created for the Drawer component, including the main container, organization switcher wrapper, navigation header, extras container, and navigation elements container.

In Drawer.tsx, the Drawer component was defined with props for expanded state, menu items, organization switching, selected organization, navigation header, extras, and desktop view. The component includes a client selector for switching organizations and a navigation header.

In index.ts, the Drawer component was exported.

How to test

To test the changes, follow these steps:

1. Pull the changes from this PR to your local environment.
2. Navigate to the src/ui/Navigation/components/Drawer/ directory.
3. Open the Drawer.tsx file and check the Drawer component.
4. You can import the Drawer component in another file and use it with different props to see how it behaves.
5. Check the styled components in Drawer.styles.ts and see how they are used in the Drawer component.

Why make this change

This change was made to provide a sidebar navigation menu for the application. The Drawer component improves the user experience by allowing users to easily navigate between different sections of the application and switch between different organizations. The expandable and collapsible feature of the Drawer makes it adaptable to different screen sizes, enhancing its usability.

[mkarajohn]

Current dependencies on/for this PR:

• master
  • PR chore: fix eslint and ts errors in dev and introduce tsconfig.prod.ts file #74
    • PR feat: add custom Menu component #100
    • PR feat: add custom Menu component #75
      • PR chore: add new svgs, update package.json and move some components around #76
        • PR feat: Update ocntext and useProducts hook #77
          • PR feat: Implement a flippable arrow ui component #78
            • PR feat: Implement a navigational menu item #79
              • PR feat: implement a navigational menu wrapper component #80
                • PR feat: implement the drawer component of the new navigation #81 👈
                  • PR feat: Implement the exported navigation component #82
                  • PR feat: Implement the new top bar component #83
                  • PR feat: reimplement changes from revert #84 #85
                  • PR feat: Implement documentation, part 1 #86
                  • PR feat: implement documentation part 2 #87
                  • PR chore: explicitly pass theme prop to styled components #88
                  • PR feat: optimisation improvements #89
                  • PR feat: implement a new utility component #90
                  • PR chore: update documentation #91
                  • PR feat: rework epxorted providers and hooks and update docs #92
                  • PR feat: add extra hook for controlling the TopBar utility section #93
                  • PR chore: Rename the exported Authentication component to Toolbox #94
                  • PR feat: implement extra utility components #95
                  • PR feat: add currency related utility functions and update docs #96
                  • PR feat: update docs and upgrade docusaurus dependencies #97
                  • PR feat: major improvements, add search, streamline project structure #98
                  • PR feat: branded documentation #99

This comment was auto-generated by Graphite.

[mkarajohn]

Merge activity

• Oct 24, 10:43 AM: @mkarajohn started a stack merge that includes this pull request via Graphite.
• Oct 24, 10:48 AM: @mkarajohn merged this pull request with Graphite.