Web UI navigation bar (#3637)

mercedes-benz · Nov 22, 2024 · 847255d · 847255d
1 parent b0992bd
commit 847255d
Show file tree

Hide file tree

Showing 10 changed files with 551 additions and 93 deletions.
diff --git a/sechub-web-ui/index.html b/sechub-web-ui/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Welcome to Vuetify 3</title>
+    <title>SecHub</title>
 </head>
 
 <body>

diff --git a/sechub-web-ui/src/assets/logo.png b/sechub-web-ui/src/assets/logo.png
diff --git a/sechub-web-ui/src/assets/logo.svg b/sechub-web-ui/src/assets/logo.svg
diff --git a/sechub-web-ui/src/assets/sechub-logo.svg b/sechub-web-ui/src/assets/sechub-logo.svg
diff --git a/sechub-web-ui/src/components.d.ts b/sechub-web-ui/src/components.d.ts
@@ -8,7 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
+    AppHeader: typeof import('./components/AppHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SecHubDefault: typeof import('./components/SecHubDefault.vue')['default']

diff --git a/sechub-web-ui/src/components/AppFooter.vue b/sechub-web-ui/src/components/AppFooter.vue
diff --git a/sechub-web-ui/src/components/AppHeader.vue b/sechub-web-ui/src/components/AppHeader.vue
@@ -0,0 +1,52 @@
+<!-- SPDX-License-Identifier: MIT -->
+<template>
+    <v-app-bar>
+
+        <img
+        class="ma-2 pa-1"
+        src="@/assets/sechub-logo.svg"
+        contain
+        height="100%"
+        ></img>
+
+        <v-container fill-height fluid>
+            <v-row align:center
+                justify="center">
+                <v-col class="pa-0">
+                    <div>Welcome</div>
+                </v-col>
+            </v-row>
+            <v-row align:center
+                justify="center">
+                <v-col class="pa-0">               
+                     <v-app-bar-title> {{ username }}</v-app-bar-title>
+                </v-col>
+            </v-row>
+        </v-container>
+
+        <!-- Search Bar
+        <v-spacer></v-spacer>
+
+        <v-responsive
+        class="mx-auto">
+            <v-text-field hide-details solo single-line class="ml-5" 
+            rounded
+            light variant="outlined" 
+            label="search"
+            prepend-inner-icon="mdi-magnify" />
+        </v-responsive>
+        -->
+
+        <template v-slot:append>
+            <v-btn icon="mdi-account"></v-btn>
+
+            <v-btn icon="mdi-logout-variant"></v-btn>
+
+            <v-btn icon="mdi-forum-outline"></v-btn>
+        </template>
+    </v-app-bar>
+</template>
+
+<script setup lang="ts">
+    const username="Erika Mustermann"
+</script>
diff --git a/sechub-web-ui/src/layouts/default.vue b/sechub-web-ui/src/layouts/default.vue
@@ -1,11 +1,10 @@
 <!-- SPDX-License-Identifier: MIT -->
 <template>
   <v-app>
+    <AppHeader />
     <v-main>
       <router-view />
     </v-main>
-
-    <AppFooter />
   </v-app>
 </template>
 

diff --git a/sechub-web-ui/src/pages/index.vue b/sechub-web-ui/src/pages/index.vue
@@ -4,6 +4,5 @@
 </template>
 
 <script lang="ts" setup>
-  //
-import SecHubDefault from "@/components/SecHubDefault.vue";
+  import SecHubDefault from "@/components/SecHubDefault.vue";
 </script>
diff --git a/sechub-web-ui/src/plugins/vuetify.ts b/sechub-web-ui/src/plugins/vuetify.ts
@@ -15,6 +15,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
   },
 })