[New navigation] Create Colony page navigation UI updates

Description

The sidebar design is also updated for the Create your new Colony page.

How to get to this page

Run the following code on your terminal

node scripts/create-colony-url.js

It should generate a URL so just visit that URL

Acceptance Criteria

[ ] The sidebar follows the Figma designs

Code Suggestions

The Sidebar itself

You can make use of the new <Sidebar /> component as it comes with the basic stuff that you need.

Inspect the <BasicPageSidebar /> and <ColonyPageSidebar /> components for example usage.

Layering

We have a <WizardSidebar /> component that conditionally renders Mobile, Tablet & Desktop versions. On tablet view, it doesn't really function as a sidebar as it shifts to the top, thus making it a header.

In the <WizardTemplate.tsx /> component, this Component is being passed as a sidebar component, regardless of its variation. It used to work with the previous layout because of some magic tricks.

Our <PageLayout /> component is now much more straightforward and streamlined and this will not be handled properly if you pass it as a sidebar. I suggest that you conditionally pass it as a sidebar or as a header.

// WizardTemplate.tsx

const isTablet = useTablet();

<MainLayout
  sidebar={!isTablet && <WizardSidebar />}
  header={isTablet && <WizardSidebar />}
/>

In my example, the reason why WizardSidebar is being passed in both instances is because the <WizardSidebar /> component dynamically handles all breakpoint variations. And it also hosts the <UserNavigationWrapper /> which is conditionally rendered on Tablet view and below.

Please feel free to break this component into two i.e. <DesktopWizard /> & <TabletWizard />.

Ideally, it should look something like this:

// WizardTemplate.tsx

const isTablet = useTablet();

<MainLayout
  sidebar={!isTablet && <DesktopWizard />}
  header={isTablet && <TabletWizard />}
/>

JoinColony / colonyCDapp