Added expand/collapse to compact network sites.

assets/components/networks/network.vue

@@ -56,6 +56,12 @@
             </div>
 
             <div class="content-inner">
+                <span
+                    v-show="expanded"
+                    class="expand collapse-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
@@ -63,6 +69,18 @@
                     :class="{ expanded }"
                 />
 
+                <span
+                    v-show="!expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = true"
+                ><Icon icon="arrow-down3" /></span>
+
+                <span
+                    v-show="expanded"
+                    class="expand expand-sites noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Releases :releases="releases" />
             </div>
         </div>
@@ -189,23 +207,60 @@ export default {
     }
 }
 
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem 0 0 0;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        margin: 0 .5rem;
+    }
+}
+
+.expand-sites {
+    color: $shadow;
+    display: none;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        color: $shadow-strong;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.collapse-sites {
+    background: $profile;
+    color: $highlight;
+
+    .icon {
+        fill: $highlight;
+    }
+
+    &:hover {
+        color: $text-contrast;
+
+        .icon {
+            fill: $text-contrast;
+        }
+    }
+}
+
 .sites.compact {
     display: none;
     background: $profile;
     grid-row: 1;
 }
 
-.expand {
-    display: none;
-    color: $text-contrast;
-    background: $profile;
-    padding: .5rem;
-    text-align: center;
-    cursor: pointer;
-    font-size: .9rem;
-    font-weight: bold;
-}
-
 @media(max-width: $breakpoint3) {
     .header,
     .header.hideable {
@@ -220,8 +275,8 @@ export default {
         }
     }
 
-    .expand {
-        display: block;
+    .expand-sites {
+        display: flex;
     }
 
     .network {