New sidebar

[ryaplots]

Summary

This PR adds a new sidebar to the console

Changes

• Introduce context
• Add new components (footer, header, switcher, entity, side navigation, sidemenu link, button, search button)
• Add sidebar and all the logic behind it

Screen.Recording.2023-12-12.at.10.28.23.mov

Testing

1. You can check the individual elements on storybook
2. To test the sidebar working with the console add this diff to console/views/app/index.js:

diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js
index 9bb28200a..f59f9f2bf 100644
--- a/pkg/webui/console/views/app/index.js
+++ b/pkg/webui/console/views/app/index.js
@@ -27,7 +27,7 @@ import classnames from 'classnames'
 import { ToastContainer } from '@ttn-lw/components/toast'
 import sidebarStyle from '@ttn-lw/components/navigation/side/side.styl'
 
-import Footer from '@ttn-lw/containers/footer'
+import SideBar from '@ttn-lw/containers/side-bar'
 
 import GenericNotFound from '@ttn-lw/lib/components/full-view-error/not-found'
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
@@ -88,33 +88,34 @@ const Layout = () => {
     <>
       <ScrollRestoration getKey={getScrollRestorationKey} />
       <ErrorView errorRender={errorRender}>
-        <div className="w-full h-full">
+        <div>
           <IntlHelmet
             titleTemplate={`%s - ${siteTitle ? `${siteTitle} - ` : ''}${siteName}`}
             defaultTitle={siteName}
           />
           <div id="modal-container" />
-          <Header />
-          <main className={style.main}>
-            <WithAuth
-              user={user}
-              fetching={fetching}
-              error={error}
-              errorComponent={FullViewErrorInner}
-              rights={rights}
-              isAdmin={isAdmin}
-            >
-              <div className={classnames('breadcrumbs', style.mobileBreadcrumbs)} />
-              <div id="sidebar" className={sidebarStyle.container} />
-              <div className={style.content}>
-                <div className={classnames('breadcrumbs', style.desktopBreadcrumbs)} />
-                <div className={style.stage} id="stage">
-                  <Outlet />
+          <div className="grid">
+            <SideBar />
+            <main className={classnames(style.main, 'w-full', 'h-full', 'item-8', 'item-start-4')}>
+              <WithAuth
+                user={user}
+                fetching={fetching}
+                error={error}
+                errorComponent={FullViewErrorInner}
+                rights={rights}
+                isAdmin={isAdmin}
+              >
+                <div className={classnames('breadcrumbs', style.mobileBreadcrumbs)} />
+                <div id="sidebar" className={sidebarStyle.container} />
+                <div className={style.content}>
+                  <div className={classnames('breadcrumbs', style.desktopBreadcrumbs)} />
+                  <div className={style.stage} id="stage">
+                    <Outlet />
+                  </div>
                 </div>
-              </div>
-            </WithAuth>
-          </main>
-          <Footer className={style.footer} />
+              </WithAuth>
+            </main>
+          </div>
         </div>
       </ErrorView>
     </>

Notes for Reviewers

TODO:

• Mobile view drawer sidebar
• Add figma designs to stories

Checklist

• Scope: The referenced issue is addressed, there are no unrelated changes.
• Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
• Documentation: Relevant documentation is added or updated.
• The steps/process to test this feature are clearly explained including testing for regressions.
• Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
• Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

[kschiffer]

@PavelJankoski please also do a review before we merge this.