Feature/95 entity settings flex box mock up

src/assets/scss/_variables.scss

@@ -2,6 +2,6 @@
 $app-fontsize: 16px;
 
 // Room colours
-$room-background: #6d8398;
-$room-navbar: #364246;
+$room-background: #f1f2f2;
+$room-navbar: #255bd6;
 $room-navbar-text: white;

src/components/TheEntityPanel.vue

@@ -1,27 +1,171 @@
 <template>
-  <v-sheet
-    class="the-entity-panel-sheet"
+  <v-card
+    :class="`custom-card-minimised ${show ? 'custom-card-expanded' : ''}`"
     :elevation="5"
   >
-    Entity Settings go here!
-  </v-sheet>
+    <v-row>
+      <v-card
+        tile
+        flat
+      >
+        <div>
+          Content
+        </div>
+      </v-card>
+      <v-navigation-drawer
+        class="custom-navigation-drawer"
+        mini-variant
+        mini-variant-width="56"
+        permanent
+      >
+        <div>
+          <v-list-item class="px-2">
+            <v-list-item-avatar>
+              <v-img :src="images[roomState.game]"></v-img>
+            </v-list-item-avatar>
+          </v-list-item>
+
+          <v-divider></v-divider>
+          <div>
+            <v-list
+              dense
+              nav
+            >
+              <v-list-item
+                v-for="item in items"
+                class="custom-list-item-center"
+                :key="item.title"
+                :title="item.title"
+                @click="onItemClickHandler"
+              >
+                <v-list-item-action>
+                  <v-icon :color="item.color">{{ item.icon }}</v-icon>
+                </v-list-item-action>
+
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+            <v-btn
+              small
+              icon
+              tile
+              @click="show = !show"
+            >
+              <v-icon>{{ show ? 'fa-chevron-right' : 'fa-chevron-left' }}</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </v-navigation-drawer>
+    </v-row>
+  </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { RoomGetters, RoomState } from '@/store/modules/room'
+import { Getter } from 'vuex-class'
 
 @Component({
   name: 'TheEntityPanel'
 })
 export default class MapButtons extends Vue {
   @Prop() private id!: string;
+  @Getter(`room/${RoomGetters.ROOM_STATE}`) roomState!: RoomState
+
+  show = false
+
+  items = [
+    { title: 'Add', icon: 'fa-plus' },
+    { title: 'Team 1', icon: 'fa-users', color: 'green' },
+    { title: 'Team 2', icon: 'fa-users', color: 'red' }
+  ]
+
+  images = {
+    wows: require('@/assets/wows-icon.png'),
+    wot: require('@/assets/wot-icon.png')
+  }
+
+  onItemClickHandler () {
+    this.show = true
+  }
 }
 </script>
 <style scoped lang="scss">
-.the-entity-panel-sheet {
-  right: 0.25rem;
-  margin: 0.25rem;
-  height: 75%;
+.custom-card-minimised {
+  right: 0;
+  height: 500px;
+  margin-top: 0.25rem;
   position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: width 1s;
+
+  >div {
+    margin: 0;
+
+    >div {
+      display: none;
+      margin: 0;
+      flex-grow: 1;
+      flex-direction: column;
+
+      >div:first-child {
+        flex-grow: 1;
+        margin: 0.5rem;
+      }
+
+      >div {
+        margin: 0;
+      }
+    }
+  }
+
+  button {
+    color: $room-navbar-text !important;
+    margin: 0.5rem;
+  }
+}
+
+.custom-card-expanded > div > div {
+  display: flex;
+  max-width: 300px;
+}
+
+.custom-navigation-drawer {
+  background-color: $room-navbar;
+
+  i {
+    color: $room-navbar-text;
+  }
+
+  >div >div {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    >div:first-child {
+      flex: 1 1 30px;
+    }
+
+    >div:last-child {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 80%;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
+.custom-list-item-center {
+  padding: 0px;
+  justify-content: center;
+
+  &:hover::before {
+    background-color: white;
+  }
 }
 </style>

src/components/TheToolPanel.vue

@@ -28,7 +28,7 @@ export default class TheToolPanel extends Vue {
 </script>
 <style scoped lang="scss">
 .btn-toggle-box{
-  margin: 0.25rem;
+  margin-top: 0.25rem;
   position: fixed;
 }
 </style>

src/plugins/vuetify.ts

@@ -3,6 +3,8 @@ import '@fortawesome/fontawesome-free/css/all.css'
 import Vuetify, {
   VApp,
   VRow,
+  VImg,
+  VDivider,
   VToolbar,
   VSpacer,
   VBtn,
@@ -11,18 +13,26 @@ import Vuetify, {
   VBtnToggle,
   VMenu,
   VList,
+  VListItem,
+  VListItemAction,
+  VListItemAvatar,
+  VListItemContent,
+  VListItemTitle,
   VContent,
   VCard,
+  VCardActions,
   VSheet,
   VColorPicker,
-  VSlider
+  VSlider,
+  VNavigationDrawer
 } from 'vuetify/lib'
-// import { Ripple } from 'vuetify/lib/directives'
 
 Vue.use(Vuetify, {
   components: {
     VApp,
     VRow,
+    VImg,
+    VDivider,
     VToolbar,
     VSpacer,
     VBtn,
@@ -31,11 +41,18 @@ Vue.use(Vuetify, {
     VBtnToggle,
     VMenu,
     VList,
+    VListItem,
+    VListItemAction,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemTitle,
     VContent,
     VCard,
+    VCardActions,
     VSheet,
     VColorPicker,
-    VSlider
+    VSlider,
+    VNavigationDrawer
   },
   directives: { }
 })