🐾 Minor Update: Close Sidebar on Outside Click + Refactor

[EDWIN1669086]

Right now, the sidebar only closes when the user clicks the "X" button. This works, but most people expect to close the sidebar when they click on the outside the sidebar. Therefore, this task is to implement that functionality. After finishing this, refactor Header.tsx.

Sidebar (visual)

Proposed Solution

This link explains the way to use useRef and eventListeners for this task (very specific):
https://stackoverflow.com/questions/66626487/hiding-sidebar-component-on-outside-click

How to Start

(First, check out the Contribution Workflow in this Github README.md: https://github.com/uclaacm/recursion-lab)

The sidebar code can be found in src > components > shared > AppWrapper > Header.tsx This code here combines both the actual header (ie. the blue header with the menu icon + page title) and the Sidebar data (ie. everything within the nav tag).

After you finish the outside click feature, you'll want to refactor the Header.tsx code into two files: Header.tsx and a new file, Sidebar.tsx . The path of Sidebar.tsx should be src > components > shared > Sidebar.tsx. This is because right now, Header.tsx contains both the actual header and the sidebar code, and we want to isolate them. Header.tsx will use Sidebar (found in Sidebar.tsx) as a functional component.

The usage of Sidebar as a functional component will look something like this within Header.tsx:

<Sidebar sidebar={sidebar} setSidebar={setSidebar}>

where the sidebar and setSidebar within the brackets are the state in the Header.tsx .

Steps to Complete

1. Follow the stack overflow guide (or other helpful resources) to implement the 'close on outside click'
2. Refactor the Header.tsx into two files: Header.tsx and Sidebar.tsx
3. Have Header.tsx use Sidebar as a functional component.
4. Update Sidebar titles in SidebarData to actual titles
   Problem 1 --> Mario Stairs
   Problem 2 --> Dining Out
   Problem 3 --> Rabbit Growth
   Problem 4 --> Word Search
5. Additional Request below

Header (code)

Additional Request

If possible, please have the "X" positioned leftward instead of where it currently is (center). It will require some HTML/CSS reconfiguring, but this would be great.