merge(timer): Place in header and make sticky top

Place in header and make sticky top

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <the-header />
+  <the-header/>
   <Panel class="m-auto ">
     <router-view />
   </Panel>

src/components/timer/TimerBar.vue

@@ -1,15 +1,16 @@
 <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>
     <div class="button-area">
       <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 {

src/components/ui/TheHeader.vue

@@ -5,31 +5,34 @@
       <!-- <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>
 
 <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>

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';

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>