From 9dd75a9a40f7f2aebbc617980c99085f9dc688f8 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Sep 2022 23:02:46 +0200
Subject: 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.
---
 .../opendc-web-ui/src/components/AppHeader.js      | 46 ++++++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/AppHeader.js')

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>
     )
 }
 
-- 
cgit v1.2.3