Added parent-child relations to network, showing parent network in sidebar. Added Burning Angel using Gamma API.

assets/components/networks/network.vue

@@ -7,10 +7,10 @@
 
         <div
             class="network"
-            :class="{ nosites: sites.length === 0 }"
+            :class="{ nosites: sites.length === 0 && networks.length === 0 }"
         >
             <div
-                v-show="sites.length > 0"
+                v-show="sites.length > 0 || networks.length > 0"
                 class="sidebar"
                 :class="{ expanded }"
             >
@@ -37,9 +37,21 @@
                     :sites="sites"
                     :class="{ expanded }"
                 />
+
+                <Network
+                    v-for="childNetwork in networks"
+                    :key="`network-${childNetwork.id}`"
+                    :network="childNetwork"
+                />
+
+                <Network
+                    v-if="network.parent"
+                    :network="network.parent"
+                    class="parent"
+                />
             </div>
 
-            <template v-if="sites.length > 0">
+            <template v-if="sites.length > 0 || networks.length > 0">
                 <span
                     v-show="!expanded"
                     class="expand expand-sidebar noselect"
@@ -55,7 +67,7 @@
 
             <div
                 class="header"
-                :class="{ hideable: sites.length > 0 }"
+                :class="{ hideable: sites.length > 0 || networks.length > 0 }"
             >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
@@ -72,7 +84,7 @@
             </div>
 
             <div class="content-inner">
-                <template v-if="sites.length > 0">
+                <template v-if="sites.length > 0 || networks.length > 0">
                     <span
                         v-show="expanded"
                         class="expand collapse-header noselect"
@@ -108,6 +120,7 @@
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Sites from '../sites/sites.vue';
+import Network from '../tile/network.vue';
 
 async function fetchNetwork() {
     this.network = await this.$store.dispatch('fetchNetworks', this.$route.params.networkSlug);
@@ -119,6 +132,7 @@ async function fetchNetwork() {
         }));
     }
 
+    this.networks = this.network.networks;
     this.sites = this.network.sites
         .filter(site => !site.independent);
 
@@ -135,11 +149,13 @@ export default {
         FilterBar,
         Releases,
         Sites,
+        Network,
     },
     data() {
         return {
             network: null,
             sites: [],
+            networks: [],
             studios: [],
             releases: [],
             pageTitle: null,
@@ -212,6 +228,15 @@ export default {
     filter: $logo-highlight;
 }
 
+.parent {
+    display: inline-block;
+    height: 3rem;
+
+    :before {
+        content: 'Part of';
+    }
+}
+
 .header {
     width: 100%;
     display: flex;