Home Page Layout (frontend)

[owenchen04]

Branch: home-page-layout

Hi Alisha and Phoebe! For this week's sprint, we're going to have you work on developing a homepage template/layout following the Figma design.

You'll notice when we run the app currently that we have a navbar with some testing links (these test links will eventually get removed, but do not edit the navbar for now). Your template will eventually go under this navbar.

Task:

• Create a file app/components/templates/HomePageLayout.tsx
• Inside the file, create divs to contain the sidebar and the primary calendar dashboard. Remember, these have not yet been fully implemented, so all we're doing at this stage is allocating some space for them to go.
• The sidebar width should be constant, while the dashboard width should be flexible so that it fills in the remaining width of the page toward the right.
• Keep in mind that eventually, the sidebar will be dynamically rendered depending on whether a user wants to use the filters, create a meeting, view a meeting, or edit a meeting. Similar, the dashboard will be dynamically rendered depending on the selected date and view (weekly, daily, monthly).
• Since the sidebar and dashboard have not yet been implemented, for now just create some dummy components as placeholders to show that the layout works as expected.
• Once finished, replace the <div>Welcome</div> inside of app/page.tsx with this new layout.

Testing:

• Take a screenshot of the layout with the dummy components and attach it to your PR.