From f50ff6be403c19ce44632098104a775f4144ea66 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 7 Oct 2022 14:20:59 +1100
Subject: Add title bar

Add IconButton.vue and components/*Icon.vue files
---
 src/App.vue | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index f88c1a0..f30339e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,30 @@
 <template>
-	<div class="text-stone-100 bg-yellow-700">
-		Hello World
+<div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col" style="bg-stone-800" >
+	<!-- Title bar -->
+	<div class="flex shadow gap-2 p-2 bg-stone-900 text-yellow-500">
+		<h1 class="my-auto ml-2 text-4xl">Histplorer</h1>
+		<div class="mx-auto"/> <!-- Spacer -->
+		<!-- Icons -->
+		<icon-button :size="45" class="text-stone-50 bg-yellow-600">
+			<help-icon/>
+		</icon-button>
+		<icon-button :size="45" class="text-stone-50 bg-yellow-600">
+			<settings-icon/>
+		</icon-button>
 	</div>
-	<test-component/>
+	<!-- Content area -->
+	<div class="grow min-h-0 relative bg-stone-800">
+		<div class="text-stone-50 p-4">Content</div>
+	</div>
+</div>
 </template>
 
 <script setup lang="ts">
-import TestComponent from './components/TestComponent.vue';
+import {ref, computed, watch, onMounted, onUnmounted, nextTick} from 'vue';
+// Components
+import IconButton from './components/IconButton.vue';
+// Icons
+import SettingsIcon from './components/icon/SettingsIcon.vue';
+import HelpIcon from './components/icon/HelpIcon.vue';
+
 </script>
-- 
cgit v1.2.3