Move server list to its own component

src/components/Sidebar.vue

@@ -30,6 +30,7 @@
 <!--				<SvgIcon name="settings"></SvgIcon>-->
 <!--			</button>-->
 		</header>
+		<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
 		<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
 		<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
 		<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
@@ -40,6 +41,7 @@
 import {defineComponent, computed} from "@vue/runtime-core";
 import PlayerList from './sidebar/PlayerList.vue';
 import WorldList from './sidebar/WorldList.vue';
+import ServerList from "@/components/sidebar/ServerList.vue";
 import FollowTarget from './sidebar/FollowTarget.vue';
 import {useStore} from "@/store";
 import SvgIcon from "@/components/SvgIcon.vue";
@@ -50,6 +52,7 @@ import "@/assets/icons/maps.svg";
 
 export default defineComponent({
 	components: {
+		ServerList,
 		SvgIcon,
 		PlayerList,
 		FollowTarget,
@@ -62,6 +65,7 @@ export default defineComponent({
 			previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
 			smallScreen = computed(() => store.state.ui.smallScreen),
 			mapCount = computed(() => store.state.maps.size),
+			serverCount = computed(() => store.state.servers.size),
 			following = computed(() => store.state.followTarget),
 
 			toggleElement = (element: DynmapUIElement) => {
@@ -76,6 +80,7 @@ export default defineComponent({
 
 		return {
 			mapCount,
+			serverCount,
 			currentlyVisible,
 			previouslyVisible,
 			toggleElement,

src/components/sidebar/ServerList.vue

@@ -0,0 +1,52 @@
+<!--
+  - Copyright 2020 James Lyne
+  -
+  -    Licensed under the Apache License, Version 2.0 (the "License");
+  -    you may not use this file except in compliance with the License.
+  -    You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  -    Unless required by applicable law or agreed to in writing, software
+  -    distributed under the License is distributed on an "AS IS" BASIS,
+  -    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  -    See the License for the specific language governing permissions and
+  -    limitations under the License.
+  -->
+
+<template>
+	<section class="sidebar__section" v-if="servers.size > 1">
+		<span class="section__heading">Servers</span>
+		<ul class="section__content">
+			<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
+		</ul>
+	</section>
+</template>
+
+<script lang="ts">
+import ServerListItem from './ServerListItem.vue';
+import {defineComponent} from 'vue';
+import {useStore} from "@/store";
+
+export default defineComponent({
+	name: 'ServerList',
+	components: {
+		ServerListItem
+	},
+
+	computed: {
+		heading() {
+			return 'Servers';
+		},
+
+		servers() {
+			return useStore().state.servers;
+		}
+	},
+});
+
+</script>
+
+<style scoped>
+
+</style>

src/components/sidebar/WorldList.vue

@@ -15,12 +15,6 @@
   -->
 
 <template>
-	<section class="sidebar__section" v-if="servers.size > 1">
-		<span class="section__heading">Servers</span>
-		<ul class="section__content">
-			<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
-		</ul>
-	</section>
 	<section class="sidebar__section">
 		<span class="section__heading">{{ heading }}</span>
 		<ul class="section__content">
@@ -34,15 +28,13 @@
 
 <script lang="ts">
 import WorldListItem from './WorldListItem.vue';
-import ServerListItem from './ServerListItem.vue';
 import {defineComponent} from 'vue';
 import {useStore} from "@/store";
 
 export default defineComponent({
 	name: 'WorldList',
 	components: {
-		WorldListItem,
-		ServerListItem
+		WorldListItem
 	},
 
 	computed: {
@@ -52,10 +44,6 @@ export default defineComponent({
 
 		worlds() {
 			return useStore().state.worlds;
-		},
-
-		servers() {
-			return useStore().state.servers;
 		}
 	},
 });