title bar basic layout

ui/.gitignore

@@ -15,7 +15,7 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
+# .vscode
 *.suo
 *.ntvs*
 *.njsproj

ui/.vscode/tasks.json

@@ -9,6 +9,15 @@
 				"ui"
 			],
 			"problemMatcher": []
+		},
+		{
+			"label": "Vue Serve",
+			"type": "shell",
+			"command": "vue",
+			"args": [
+				"serve"
+			],
+			"problemMatcher": []
 		}
 	]
 }

ui/src/components/Clock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>{{ formatted }}</div>
+  <span>{{ formatted }}</span>
 </template>
 
 <script lang="ts">

ui/src/components/TitleBar.vue

@@ -1,11 +1,30 @@
 <template>
   <v-toolbar color="primary" prominent dark>
-    <v-spacer />
+    <v-row class="d-flex">
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-start text-left"
+      >
+        LOGO
+      </v-col>
 
-    <v-col>
-      <Clock format="DDD" />
-      <Clock format="T" />
-    </v-col>
+      <v-col
+        cols="6"
+        class="d-flex flex-grow-0 flex-shrink-1 justify-center text-center"
+      >
+        TITLE
+      </v-col>
+
+      <v-col
+        cols="3"
+        class="d-flex flex-grow-1 flex-shrink-1 justify-end text-right"
+      >
+        <div class="flex-column">
+          <Clock class="d-flex justify-end" format="DDD" />
+          <Clock class="d-flex justify-end" format="T" />
+        </div>
+      </v-col>
+    </v-row>
   </v-toolbar>
 </template>