diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-10-07 14:20:59 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-10-08 20:08:47 +1100 |
| commit | f50ff6be403c19ce44632098104a775f4144ea66 (patch) | |
| tree | ffabe4a47067409e4d63802000d3a0b86ae6c778 /src/App.vue | |
| parent | 1c69c4abf6e54ccab886c23cd6e691179ce6f076 (diff) | |
Add title bar
Add IconButton.vue and components/*Icon.vue files
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 28 |
1 files changed, 24 insertions, 4 deletions
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> |