Fix(frontend): Nav and Page Spacing

[jenny-s51]

Description

To achieve proper page alignment, the Page component requires the sidebar prop to render the PageSidebar component. The sidebar component is added to App.tsx and is closed by default.

Before:

After:

How Has This Been Tested?

Simulate Integrated mode by commenting out instances of isStandalone() in App.tsx.

Merge criteria:

• All the commits have been signed-off (To pass the DCO check)

• The commits have meaningful messages; the author will squash them after approval or in case of manual merges will ask to merge with squash.
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has manually tested the changes and verified that the changes work.
• Code changes follow the kubeflow contribution guidelines.

If you have UI changes

• The developer has added tests or explained why testing cannot be added.
• Included any necessary screenshots or gifs if it was a UI change.
• Verify that UI/UX changes conform the UX guidelines for Kubeflow.

[Griffin-Sullivan]

Looks great! There is a slight extra margin the right of the sidebar in standalone mode, but for now I think we are good with how it looks for Kubeflow.

[google-oss-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: ederign, Griffin-Sullivan

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• clients/ui/OWNERS [Griffin-Sullivan,ederign]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ederign]

/lgtm