134 - Top Right Nav

src/components/navigation/TheNavExtraSmall.vue → 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: '';

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;

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) {
+    // do stuff
+  }
+}
+
+</script>
+<style scoped lang="scss">
+
+</style>

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) {
+    // do stuff
+  }
+}
+
+</script>
+<style scoped lang="scss">
+
+</style>

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