From 9401528fbaed63be20a9fcda7de75ea84b0972ba Mon Sep 17 00:00:00 2001
From: samuel_bryan <bryan.samuel1@hotmail.co.uk>
Date: Sun, 29 Mar 2020 21:00:17 +0100
Subject: [PATCH 1/3] 134 - Top Right Nav

---
 .../navigation/TheNavExtraLarge.vue           | 103 ------------------
 .../{TheNavExtraSmall.vue => TheNavLarge.vue} |  49 +++++----
 src/components/navigation/TheNavSmall.vue     |  11 +-
 src/components/navigation/TheRoomMenu.vue     |  59 ++++++++++
 src/components/navigation/TheUserMenu.vue     |  56 ++++++++++
 src/views/Room.vue                            |  21 +---
 6 files changed, 158 insertions(+), 141 deletions(-)
 delete mode 100644 src/components/navigation/TheNavExtraLarge.vue
 rename src/components/navigation/{TheNavExtraSmall.vue => TheNavLarge.vue} (63%)
 create mode 100644 src/components/navigation/TheRoomMenu.vue
 create mode 100644 src/components/navigation/TheUserMenu.vue

diff --git a/src/components/navigation/TheNavExtraLarge.vue b/src/components/navigation/TheNavExtraLarge.vue
deleted file mode 100644
index 0557477..0000000
--- a/src/components/navigation/TheNavExtraLarge.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <v-row class="navbar-row">
-    <v-col xl="2" lg="2" md="3" sm="6" cols="12" order-md="1" order="1">
-      <v-toolbar dense class="navbar-toolbar-left">
-        <v-icon color="#FFFFFF">fa-anchor</v-icon>
-        <h2>GameTactic</h2>
-        <v-spacer />
-      </v-toolbar>
-    </v-col>
-    <v-col xl="8" lg="7" md="5" sm="12" cols="12" order-md="2" order="3">
-      <v-toolbar dense flat class="navbar-toolbar-center justify-center">
-        <v-spacer />
-        <div>Tactic editing tools</div>
-        <v-spacer />
-      </v-toolbar>
-     </v-col>
-     <v-col xl="2" lg="3" md="4" sm="6" cols="12" order-md="3" order="2">
-      <v-toolbar dense class="navbar-toolbar-right">
-        <v-btn dark icon title="Save your room">
-          <v-icon>fa-save</v-icon>
-        </v-btn>
-        More buttons inc Sign In / Out
-        <v-spacer />
-      </v-toolbar>
-    </v-col>
-  </v-row>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-@Component({
-  name: 'TheNavExtraLarge'
-})
-export default class TheNavExtraLarge extends Vue {
-  @Prop() private id!: string;
-}
-
-</script>
-<style scoped lang="scss">
-.navbar-row {
-  margin: 0px;
-   div {
-    padding: 0px;
-  }
-}
-
-header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
-  background-color: $room-navbar;
-  color: $room-navbar-text;
-  position: relative;
-  flex: 0 1 100px;
-  z-index: 100;
-  h2 {
-    white-space: nowrap;
-    margin: 0.25rem;
-  }
-  &:after {
-    content: '';
-    position: absolute;
-    right: -96px;
-    top: 0px;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 0 48px 48px;
-    border-color: transparent transparent transparent $room-navbar;
-  }
-}
-
-.navbar-toolbar-center {
-  color: black;
-}
-
-.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
-  background-color: $room-navbar;
-  color: $room-navbar-text;
-  position: relative;
-  flex: 0 1 250px;
-  z-index: 100;
-  &:after {
-    content: '';
-    position: absolute;
-    left: -48px;
-    top: 0;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width:  48px 0px 0px 48px;
-    border-color: $room-navbar transparent;
-  }
-}
-
-@media screen and (max-width: 960px) {
-  .navbar-toolbar-left, .navbar-toolbar-right  {
-    flex: 1 1 auto;
-    &:after {
-      display: none;
-    }
-  }
-}
-
-</style>
diff --git a/src/components/navigation/TheNavExtraSmall.vue b/src/components/navigation/TheNavLarge.vue
similarity index 63%
rename from src/components/navigation/TheNavExtraSmall.vue
rename to src/components/navigation/TheNavLarge.vue
index 7d2fa29..ce435dc 100644
--- a/src/components/navigation/TheNavExtraSmall.vue
+++ b/src/components/navigation/TheNavLarge.vue
@@ -1,35 +1,41 @@
 <template>
   <v-row class="navbar-row">
-    <v-col cols="12">
-      <v-toolbar dense class="navbar-toolbar-left">
-        <v-icon color="#FFFFFF">fa-anchor</v-icon>
-        <h2>GameTactic</h2>
-        <v-spacer />
-        <v-btn dark icon title="Save your room">
-          <v-icon>fa-save</v-icon>
-        </v-btn>
-        More buttons inc Sign In / Out
-      </v-toolbar>
-    </v-col>
-    <v-col cols="12">
-      <v-toolbar dense flat class="navbar-toolbar-center justify-center">
-        <v-spacer />
-        <div>Tactic editing tools</div>
-        <v-spacer />
-      </v-toolbar>
-     </v-col>
+    <v-toolbar dense class="navbar-toolbar-left">
+      <v-icon color="#FFFFFF">fa-anchor</v-icon>
+      <h2>GameTactic</h2>
+      <v-spacer />
+    </v-toolbar>
+    <v-toolbar dense flat class="navbar-toolbar-center justify-center">
+      <v-spacer />
+      <div>Tactic editing tools</div>
+      <v-spacer />
+    </v-toolbar>
+    <v-toolbar dense class="navbar-toolbar-right">
+      <v-btn dark icon title="Save your room">
+        <v-icon>fa-save</v-icon>
+      </v-btn>
+      <the-room-menu />
+      <the-user-menu />
+    </v-toolbar>
   </v-row>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import TheRoomMenu from './TheRoomMenu.vue'
+import TheUserMenu from './TheUserMenu.vue'
 
 @Component({
-  name: 'TheNavExtraSmall'
+  name: 'TheNavLarge',
+  components: {
+    TheRoomMenu,
+    TheUserMenu
+  }
 })
-export default class TheNavExtraSmall extends Vue {
+export default class TheNavLarge extends Vue {
   @Prop() private id!: string;
 }
+
 </script>
 <style scoped lang="scss">
 .navbar-row {
@@ -67,10 +73,11 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
 }
 
 .navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
+  justify-content: flex-end;
   background-color: $room-navbar;
   color: $room-navbar-text;
   position: relative;
-  flex: 0 1 250px;
+  flex: 0 1;
   z-index: 100;
   &:after {
     content: '';
diff --git a/src/components/navigation/TheNavSmall.vue b/src/components/navigation/TheNavSmall.vue
index 0fff317..18f642a 100644
--- a/src/components/navigation/TheNavSmall.vue
+++ b/src/components/navigation/TheNavSmall.vue
@@ -8,7 +8,8 @@
         <v-btn dark icon title="Save your room">
           <v-icon>fa-save</v-icon>
         </v-btn>
-        More buttons inc Sign In / Out
+        <the-room-menu />
+        <the-user-menu />
       </v-toolbar>
     </v-col>
     <v-col cols="12">
@@ -23,9 +24,15 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import TheRoomMenu from './TheRoomMenu.vue'
+import TheUserMenu from './TheUserMenu.vue'
 
 @Component({
-  name: 'TheNavSmall'
+  name: 'TheNavSmall',
+  components: {
+    TheRoomMenu,
+    TheUserMenu
+  }
 })
 export default class TheNavSmall extends Vue {
   @Prop() private id!: string;
diff --git a/src/components/navigation/TheRoomMenu.vue b/src/components/navigation/TheRoomMenu.vue
new file mode 100644
index 0000000..4ed8b13
--- /dev/null
+++ b/src/components/navigation/TheRoomMenu.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on }">
+      <v-btn
+        title="Room and tactic settings"
+        dark
+        icon
+        v-on="on"
+      >
+        <v-icon>fa-cogs</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(roomMenuItem, index) in roomMenuItems"
+        :key="index"
+        :title="roomMenuItem.title"
+        @click="roomMenuItemsClickHandler(roomMenuItem)"
+      >
+        <v-list-item-title>{{ roomMenuItem.text }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+interface RoomMenuItem {
+  text: string;
+  title: string;
+}
+
+@Component({
+  name: 'TheRoomMenu'
+})
+export default class TheRoomMenu extends Vue {
+  @Prop() private id!: string;
+
+  roomMenuItems: RoomMenuItem[] = [{
+    text: 'New Tactic',
+    title: 'Create a new tactic within your room'
+  }, {
+    text: 'Manage Tactics',
+    title: 'Manage your existing tactics within your room'
+  }, {
+    text: 'Manage Room',
+    title: 'Manage the rooms settings'
+  }]
+
+  roomMenuItemsClickHandler (item: RoomMenuItem) {
+    console.log('CLICKED', item)
+  }
+}
+
+</script>
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
new file mode 100644
index 0000000..02e24dc
--- /dev/null
+++ b/src/components/navigation/TheUserMenu.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-menu offset-y>
+    <template v-slot:activator="{ on }">
+      <v-btn
+        title="Login or Logout of your account"
+        dark
+        icon
+        v-on="on"
+      >
+        <v-icon>fa-user-circle</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(userMenuItem, index) in userMenuItems"
+        :key="index"
+        :title="userMenuItem.title"
+        @click="userMenuItemsClickHandler(userMenuItem)"
+      >
+        <v-list-item-title>{{ userMenuItem.text }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+interface UserMenuItem {
+  text: string;
+  title: string;
+}
+
+@Component({
+  name: 'TheUserMenu'
+})
+export default class TheUserMenu extends Vue {
+  @Prop() private id!: string;
+
+  userMenuItems: UserMenuItem[] = [{
+    text: 'Login',
+    title: 'Login to save your progress'
+  }, {
+    text: 'Logout',
+    title: 'Logout of your logged in account'
+  }]
+
+  userMenuItemsClickHandler (item: UserMenuItem) {
+    console.log('CLICKED', item)
+  }
+}
+
+</script>
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/Room.vue b/src/views/Room.vue
index 6aa521d..8b35167 100644
--- a/src/views/Room.vue
+++ b/src/views/Room.vue
@@ -1,18 +1,16 @@
 <template>
   <div class="full-width-height">
     <the-canvas :id="id"/>
-    <the-nav-extra-large class="the-nav-extra-large" :id="id"/>
+    <the-nav-large class="the-nav-large" :id="id"/>
     <the-nav-small class="the-nav-small" :id="id"/>
-    <the-nav-extra-small class="the-nav-extra-small" :id="id"/>
     <the-tool-panel :id="id"/>
     <the-entity-panel :id="id"/>
   </div>
 </template>
 
 <script lang="ts">
-import TheNavExtraLarge from '@/components/navigation/TheNavExtraLarge.vue'
+import TheNavLarge from '@/components/navigation/TheNavLarge.vue'
 import TheNavSmall from '@/components/navigation/TheNavSmall.vue'
-import TheNavExtraSmall from '@/components/navigation/TheNavExtraSmall.vue'
 import TheToolPanel from '@/components/TheToolPanel.vue'
 import TheCanvas from '@/components/TheCanvas.vue'
 import TheEntityPanel from '@/components/TheEntityPanel.vue'
@@ -27,9 +25,8 @@ const Socket = namespace(Namespaces.SOCKET)
   @Component({
     name: 'Room',
     components: {
-      TheNavExtraLarge,
+      TheNavLarge,
       TheNavSmall,
-      TheNavExtraSmall,
       TheToolPanel,
       TheCanvas,
       TheEntityPanel
@@ -54,20 +51,14 @@ export default class extends Vue {
     overflow-x: hidden;
   }
 
-  @media (max-width: 575px) {
-    .the-nav-extra-large, .the-nav-small {
-      display: none;
-    }
-  }
-
-  @media (min-width: 576px) and (max-width: 1199px) {
-    .the-nav-extra-large, .the-nav-extra-small {
+  @media (max-width: 1199px) {
+    .the-nav-large {
       display: none;
     }
   }
 
   @media (min-width: 1200px) {
-    .the-nav-small, .the-nav-extra-small {
+    .the-nav-small {
       display: none;
     }
   }

From cf195cd88c00f4219b794d37ea26ce7d8e753dd5 Mon Sep 17 00:00:00 2001
From: samuel_bryan <bryan.samuel1@hotmail.co.uk>
Date: Sun, 29 Mar 2020 21:06:12 +0100
Subject: [PATCH 2/3] Fix build

---
 src/components/navigation/TheRoomMenu.vue | 4 +---
 src/components/navigation/TheUserMenu.vue | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/navigation/TheRoomMenu.vue b/src/components/navigation/TheRoomMenu.vue
index 4ed8b13..977443b 100644
--- a/src/components/navigation/TheRoomMenu.vue
+++ b/src/components/navigation/TheRoomMenu.vue
@@ -48,9 +48,7 @@ export default class TheRoomMenu extends Vue {
     title: 'Manage the rooms settings'
   }]
 
-  roomMenuItemsClickHandler (item: RoomMenuItem) {
-    console.log('CLICKED', item)
-  }
+  roomMenuItemsClickHandler (item: RoomMenuItem) { }
 }
 
 </script>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 02e24dc..5f8b7b8 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -45,9 +45,7 @@ export default class TheUserMenu extends Vue {
     title: 'Logout of your logged in account'
   }]
 
-  userMenuItemsClickHandler (item: UserMenuItem) {
-    console.log('CLICKED', item)
-  }
+  userMenuItemsClickHandler (item: UserMenuItem) { }
 }
 
 </script>

From 0af2ef0c994752066d880bcff8ce1db603fed006 Mon Sep 17 00:00:00 2001
From: samuel_bryan <bryan.samuel1@hotmail.co.uk>
Date: Sun, 29 Mar 2020 21:14:27 +0100
Subject: [PATCH 3/3] Fix build #2

---
 src/components/navigation/TheRoomMenu.vue | 4 +++-
 src/components/navigation/TheUserMenu.vue | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/navigation/TheRoomMenu.vue b/src/components/navigation/TheRoomMenu.vue
index 977443b..a667af0 100644
--- a/src/components/navigation/TheRoomMenu.vue
+++ b/src/components/navigation/TheRoomMenu.vue
@@ -48,7 +48,9 @@ export default class TheRoomMenu extends Vue {
     title: 'Manage the rooms settings'
   }]
 
-  roomMenuItemsClickHandler (item: RoomMenuItem) { }
+  roomMenuItemsClickHandler (item: RoomMenuItem) {
+    // do stuff
+  }
 }
 
 </script>
diff --git a/src/components/navigation/TheUserMenu.vue b/src/components/navigation/TheUserMenu.vue
index 5f8b7b8..61b054e 100644
--- a/src/components/navigation/TheUserMenu.vue
+++ b/src/components/navigation/TheUserMenu.vue
@@ -45,7 +45,9 @@ export default class TheUserMenu extends Vue {
     title: 'Logout of your logged in account'
   }]
 
-  userMenuItemsClickHandler (item: UserMenuItem) { }
+  userMenuItemsClickHandler (item: UserMenuItem) {
+    // do stuff
+  }
 }
 
 </script>