Create left navigation bar

[rnair-tw]

User Story

As a user,
I want to have a left navigation bar,
So that I can easily access different sections of the system.

Business Context:

A left navigation bar improves the usability and accessibility of the system by providing a consistent and intuitive way to navigate through different sections. This enhances the user experience and helps users efficiently find and access the features they need.

In Scope

1. Development of a left navigation bar with links to key sections (currently should only say "Cases" at root level, "Admin Settings" as a header, and "Admin Portal" as a root link under that header), future will add more sections
2. Responsive design to ensure the navigation bar is usable on different devices and screen sizes.
3. Highlighting the current section to indicate the user’s location within the system.
4. The components should be created in Storybook.

Out of Scope

1. Nested nav structure (only one level for now)

Mockups

https://www.figma.com/design/Qpewv3nKANuv7qm4oJd2Xy/Hi-Fi_Mockups?node-id=242-85295&t=09HmZfEP1fzQhgln-0

Checklist

• Make React component Component.tsx using TDD Component.test.tsx based on mock
• Once finished, add to Storybook as Component.stories.ts
• Implement the component in the application homepage using TDD

Resources

Use react-drawer (temporary drawer) as a template to do this
https://mui.com/material-ui/react-drawer/

Acceptance Criteria

1. Scenario: Navigation Bar Display
   Given a user is logged-in,
   When they are in the all cases page
   Then they should see a left navigation bar with links to key sections.

2. Scenario: Responsive Design
   Given a user is logged-in,
   When the screen size changes,
   Then the navigation bar should adjust its layout to remain usable (e.g., collapse into a hamburger menu on mobile devices).

Open Questions

1. How the component interacts - does it collapse when navigating around the app? Does it move? @rowsnr @sbhamani
   • Yes, but keep default functionality that comes with the default sidebar from MUI
2. What is the nested structure supposed to be? @sbhamani

{
   "Cases": {
      "link": "/",
      "icon": "note-stack"
   }
}

[mariliasoaresTW]

@justin-c-anthony @rowsnr please list out the components that should be created in Storybook.

[paul-thompson1]

Ran into some trouble with Jest. Specifically the error: Property 'toBeInTheDocument' does not exist on type Assertion. Resolved the error by modifying jest.config.ts and jest.setup.ts. Have to import expect into the test: import { expect } from "@jest/globals"; Followed the recommendations outlined in this issue: testing-library/jest-dom

[paul-thompson1]

Created the basic component and component tests. Will refine the design. Can't seem to find the icons defined in the mockup at MUI's Icon library. Looked for about an hour for the icons associated with cases and Admin Portal. They do not exist under material-icons library. Will ask during standup which library the icons come from.

[paul-thompson1]

We were able to change the color when hovering over the Icon and ListItem by modifying theme.ts. Currently working on the storybook story. We were able to make a basic Storybook story without any props. We were not sure what props were needed for the Storybook story. Will ask Shak what props are needed.

Some screenshots of the basic Storybook story:

[paul-thompson1]

I was able to get the icons to change in storybook. The only problem I have is the amount of time to run local dev. Takes over 10 seconds to compile local developer environment. This is due to importing all the icons so they can be changed in storybook.

[rd-huerta]

• Added eslint-plugin-storybook with recommended configuration to eslintrc.json
  • Supported Rules and Configurations
• Added interaction test for NavigationBar Story
  • Play function for interaction testing
  • How does component testing in Storybook work?

[paul-thompson1]

Found out it is not possible to dynamic import with a variable. For now, I think it would be best to just include the required import statements in a function with lazy loading. Basically a switch statement for possible icons. Which will be faster than importing all the required icons at once.