refactor(web/ui): Move project selector into masthead

This change moves the project selector into the masthead since it
affects the whole application. This follows the PatternFly guidelines.

1 files changed, 33 insertions, 13 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index fd54b3ad..54f3bbf3 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -20,24 +20,44 @@
  * SOFTWARE.
  */
 
-import { PageHeader } from '@patternfly/react-core'
 import React from 'react'
+import {
+    Masthead,
+    MastheadMain,
+    MastheadBrand,
+    MastheadContent,
+    Toolbar,
+    ToolbarContent,
+    ToolbarItem,
+} from '@patternfly/react-core'
+import Link from "next/link";
 import AppHeaderTools from './AppHeaderTools'
-import { AppNavigation } from './AppNavigation'
-import AppLogo from './AppLogo'
+import AppHeaderUser from './AppHeaderUser'
+import ProjectSelector from './context/ProjectSelector'
 
-export function AppHeader() {
-    // eslint-disable-next-line @next/next/no-img-element
-    const logo = <img src="/img/logo.png" width={30} height={30} alt="OpenDC" />
+import styles from './AppHeader.module.scss'
 
+export function AppHeader() {
     return (
-        <PageHeader
-            logo={logo}
-            logoProps={{ href: '/' }}
-            logoComponent={AppLogo}
-            headerTools={<AppHeaderTools />}
-            topNav={<AppNavigation />}
-        />
+        <Masthead id="app-header">
+            <MastheadMain>
+                <MastheadBrand className={styles.logo} component={props => <Link href="/projects"><a {...props} /></Link>}>
+                    <img src="/img/logo.svg" alt="OpenDC logo" width={30} height={30} />
+                    <span>OpenDC</span>
+                </MastheadBrand>
+            </MastheadMain>
+            <MastheadContent>
+                <Toolbar id="toolbar" isFullHeight isStatic>
+                    <ToolbarContent>
+                        <ToolbarItem>
+                            <ProjectSelector />
+                        </ToolbarItem>
+                        <AppHeaderTools />
+                        <AppHeaderUser />
+                    </ToolbarContent>
+                </Toolbar>
+            </MastheadContent>
+        </Masthead>
     )
 }