From 5ad5e06a930378ef6e7ba090a58cd20edf7712b6 Mon Sep 17 00:00:00 2001
From: Hilton Meyer <development@hiltonmeyer.com>
Date: Mon, 1 Mar 2021 11:33:30 +0200
Subject: [PATCH] feat(timer): Place in header and make sticky top

---
 src/App.vue                       |  2 +-
 src/components/timer/TimerBar.vue | 28 +++++++++++++-------
 src/components/ui/TheHeader.vue   | 43 +++++++++++++++++++++----------
 src/main.js                       |  1 +
 src/views/Home.vue                |  4 +--
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b2d014c..e34d2dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <the-header />
+  <the-header/>
   <Panel class="m-auto ">
     <router-view />
   </Panel>
diff --git a/src/components/timer/TimerBar.vue b/src/components/timer/TimerBar.vue
index 0ce91f2..d7fa55d 100644
--- a/src/components/timer/TimerBar.vue
+++ b/src/components/timer/TimerBar.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="timer">
-    <div class="timer-display">{{ getCurrentTime }}</div>
-    <div class="pompoms">
-      <ul>
+    <div class="pompom-area">
+      <ul class="pompoms">
         <li v-for="pompom in numberOfPompoms" v-bind:key="pompom.id">🍅</li>
       </ul>
     </div>
@@ -10,6 +9,8 @@
       <Button @click="toggleTimer">{{ buttonText }}</Button>
       <Button @click="resetTimer">Reset</Button>
     </div>
+
+    <div class="timer-display">{{ getCurrentTime }}</div>
   </div>
 </template>
 
@@ -41,20 +42,27 @@ export default {
 
 <style scoped>
 .timer {
-  border: 1px solid blue;
-  border-radius: 10px;
-  padding: 1rem;
-  width: 50%;
-  margin: 0 auto;
+  /* border: 1px solid blue; */
+  /* border-radius: 10px; */
+  /* padding: 1rem; */
+  /* width: 50%; */
+  /* margin: 0 auto; */
+  display: flex;
+  align-items: center;
 }
 
 .timer-display {
-  text-align: center;
   font-size: 2rem;
+  margin: 0 1rem;
+}
+
+.pompom-area {
+  margin: 0 1rem;
 }
 
 .pompoms {
-  text-align: center;
+  display: flex;
+  font-size: 1.5rem;
 }
 
 .button-area {
diff --git a/src/components/ui/TheHeader.vue b/src/components/ui/TheHeader.vue
index 319eb60..cc5e043 100644
--- a/src/components/ui/TheHeader.vue
+++ b/src/components/ui/TheHeader.vue
@@ -5,20 +5,22 @@
       <!-- <img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2" /> -->
     </template>
     <template #end>
+      <timer-bar></timer-bar>
       <!-- <InputText placeholder="Search" type="text" /> -->
-      <Button
-        v-if="isLoggedIn"
-        label="Logout"
-        icon="pi pi-lock-open"
-        @click="logout"
-        class="p-mr-2"
-      />
-      <router-link to="login" v-if="!isLoggedIn">
-        <Button label="Login" icon="pi pi-lock" class="p-mr-2"></Button>
-      </router-link>
-      <router-link to="register" v-if="!isLoggedIn">
-        <Button label="Register" icon="pi pi-pencil" @click="register"
-      /></router-link>
+      <div>
+        <Button
+          v-if="isLoggedIn"
+          icon="pi pi-lock-open"
+          @click="logout"
+          class="p-mr-2 p-button-rounded"
+        />
+        <router-link to="login" v-if="!isLoggedIn">
+          <Button icon="pi pi-lock" class="p-mr-2 p-button-rounded"></Button>
+        </router-link>
+        <router-link to="register" v-if="!isLoggedIn">
+          <Button icon="pi pi-pencil" class="p-mr-2 p-button-rounded" @click="register"
+        /></router-link>
+      </div>
     </template>
   </Menubar>
 </template>
@@ -26,10 +28,11 @@
 <script>
 import firebase from '@/utilities/firebase';
 import { mapActions } from 'vuex';
+import TimerBar from '@/components/timer/TimerBar.vue';
 import Menubar from 'primevue/menubar';
 
 export default {
-  components: { Menubar },
+  components: { TimerBar, Menubar },
   emits: ['showLogin', 'showRegister'],
   data() {
     return {
@@ -58,3 +61,15 @@ export default {
   },
 };
 </script>
+
+<style>
+.p-menubar {
+  position: sticky;
+  top: 0;
+}
+
+.p-menubar-end {
+  display: flex;
+}
+
+</style>
diff --git a/src/main.js b/src/main.js
index 379c4c7..fda1f22 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import Password from 'primevue/password';
 import Panel from 'primevue/panel';
 
 import 'primevue/resources/themes/md-light-indigo/theme.css';
+// import 'primevue/resources/themes/md-dark-indigo/theme.css';
 import 'primevue/resources/primevue.min.css';
 import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9f8e428..67ff3ab 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,17 +1,15 @@
 <template>
   <div class="home">
-    <timer-bar></timer-bar>
     <task-list></task-list>
   </div>
 </template>
 
 <script>
 import TaskList from '@/components/tasks/TaskList.vue';
-import TimerBar from '@/components/timer/TimerBar.vue';
 
 export default {
   name: 'Home',
-  components: { TimerBar, TaskList },
+  components: { TaskList },
 };
 </script>