button for fetch servers from user, and saves it in store. option list has all servers listed and saves the selected servers clientIdentifier as id

src/components/layout/Header.vue

@@ -18,15 +18,21 @@
 
              <div class="container is-vcentered is-pulled-right">
                 <div class="select is-dark is-pulled-right">
-                <select>
-                    <option>Select dropdown</option>
-                    <option>With options</option>
-                    <option>Loooooooong server name</option>
-
-                </select>
+                <b-select placeholder="Select Server"
+                @input="assignTag">
+                <option
+                    v-for="option in pserver"
+                    :value="option.clientIdentifier"
+                    :key="option.clientIdentifier"
+                    v-on:change="onchange()"
+                    >
+                    {{ option.name }}
+                </option>
+            </b-select>
                 </div>
                  
-                <b-button  id="sync-button" @click="clickMe" type="is-warning" icon-left="fas fa-sync" icon-pack="fas" class="is-pulled-right" >
+                <b-button  id="sync-button" @click="fetchServers" type="is-warning" 
+                icon-left="fas fa-sync" icon-pack="fas" class="is-pulled-right" >
                 </b-button>
 
                 </div>
@@ -38,7 +44,34 @@
 <script>
 
 
+
+
 export default {
+    methods: {
+        fetchServers(){
+            console.log("fetching servers")
+            this.$store.dispatch('getPlexServers');
+        },
+        assignTag: function (selected) {
+            this.selected = selected;
+            this.$store.commit("UPDATE_SELECTED_SERVER", selected);
+
+            
+        },
+        onChange(event) {
+              console.log(event.target.selected);
+              console.log("hello")
+          }
+    },
+    created(){
+        console.log("menu created")
+        this.$store.dispatch('getPlexServers');
+    },
+    computed: {
+        pserver(){
+        return this.$store.getters.plexServers
+        }
+    }
 
 }
 </script>

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist';
+import servers from './modules/servers/index'
 
 Vue.use(Vuex)
 
@@ -23,10 +24,15 @@ export default new Vuex.Store({
     }
   },
   getters: {
+    getAuthToken: state => {
+      return state.authToken
+    }
   },
   actions: {
   },
   modules: {
+    servers
+
   },
   plugins: [vuexLocal.plugin]
 })

src/store/modules/servers/index.js

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import mstore from '../../index';
+
+
+const state = {
+  plexServers: [],
+  selectedServerId: ''
+};
+
+const mutations = {
+  UPDATE_PLEX_SERVERS(state, payload) {
+    state.plexServers = payload;
+  },
+  UPDATE_SELECTED_SERVER(state, value) {
+      state.selectedServerId = value
+  }
+};
+
+const actions = {
+  getPlexServers({ commit }) {
+      axios({
+          method: 'get',
+          url: 'https://plex.tv/api/v2/resources',
+          headers: 
+          {
+            'includeHttps' : '1',
+            'includeRelay' : '1',
+            'X-Plex-Client-Identifier' : 'WebTools-NG',
+            'X-Plex-Token': mstore.getters.getAuthToken
+          },
+        })
+          .then((response) => {
+            commit('UPDATE_PLEX_SERVERS', response.data)
+          });
+
+  }
+};
+
+const getters = {
+    plexServers: state => state.plexServers
+};
+
+const serverModule = {
+  state,
+  mutations,
+  actions,
+  getters
+}
+
+export default serverModule;