+layout pages generally are used to hold global menus and dashboards that will always be wrapped around the +page content. In this example we have root page and profile page wrapped in a dashboard menu located in +layout. Your job is to make the +layout functional by breaking the page into small, easy to use parts.
You can find a working example here: https://profound-belekoy-e96398.netlify.app/
You can find the code for that example here: https://github.com/HyperAlch/week-5-assignment-done
The goal is to have your code match the example code, but do NOT copy any files or code from the example repository directly. It is important that you learn to do this on your own. Create the files your self and type or transfer the code in your own project.
The code and file structure should match the example, and the following should be functional:
-
The "Dashboard" menu item should take you to the root route (aka "/") on both desktop and mobile.
-
The mobile menu should become available to the user when their browser gets small enough via "Hamburger Icon" in the top left of the screen.
-
The mobile menu should close when pressing the white "x" to the right of the menu
-
Clicking the user profile icon (image of a random dude) in the top right should bring up a small white menu. To see how the menu works, look at the example code.
If you are unsure about any of these behaviors, check the working example to see how it's suppose to work. However, as long as you follow along with the example code, it should work correctly.