Added expand/collapse sidebar to desktop network sites.

assets/components/networks/network.vue

@@ -12,6 +12,7 @@
             <div
                 v-show="sites.length > 0"
                 class="sidebar"
+                :class="{ expanded }"
             >
                 <a
                     v-tooltip.bottom="`Go to ${network.url}`"
@@ -34,9 +35,22 @@
                 <Sites
                     v-if="sites.length"
                     :sites="sites"
+                    :class="{ expanded }"
                 />
             </div>
 
+            <span
+                v-show="!expanded"
+                class="expand expand-sidebar noselect"
+                @click="expanded = true"
+            ><Icon icon="arrow-right3" /></span>
+
+            <span
+                v-show="expanded"
+                class="expand expand-sidebar noselect"
+                @click="expanded = false"
+            ><Icon icon="arrow-left3" /></span>
+
             <div
                 class="header"
                 :class="{ hideable: sites.length > 0 }"
@@ -53,15 +67,15 @@
                         class="logo"
                     >
                 </a>
+
+                <span
+                    v-show="expanded"
+                    class="expand collapse-header noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
             </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"
@@ -71,13 +85,13 @@
 
                 <span
                     v-show="!expanded"
-                    class="expand expand-sites noselect"
+                    class="expand expand-header noselect"
                     @click="expanded = true"
                 ><Icon icon="arrow-down3" /></span>
 
                 <span
                     v-show="expanded"
-                    class="expand expand-sites noselect"
+                    class="expand expand-header noselect"
                     @click="expanded = false"
                 ><Icon icon="arrow-up3" /></span>
 
@@ -170,10 +184,20 @@ export default {
     flex-shrink: 0;
     color: $text-contrast;
     overflow: hidden;
-}
 
-.sidebar .title {
-    border-bottom: solid 1px $highlight-hint;
+    .title {
+        display: flex;
+        justify-content: center;
+        border-bottom: solid 1px $highlight-hint;
+    }
+
+    &.expanded {
+        width: calc(100% - 25rem);
+
+        .logo {
+            max-width: 18rem;
+        }
+    }
 }
 
 .logo {
@@ -189,9 +213,9 @@ export default {
 
 .header {
     width: 100%;
-    height: 3rem;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     flex-shrink: 0;
     border-bottom: solid 1px $shadow-hint;
     background: $profile;
@@ -202,7 +226,7 @@ export default {
 
     .logo {
         max-width: 20rem;
-        height: 100%;
+        max-height: 3rem;
         padding: .5rem;
     }
 }
@@ -217,28 +241,23 @@ export default {
     cursor: pointer;
 
     .icon {
+        fill: $shadow;
         margin: 0 .5rem;
     }
+
+    &:hover .icon {
+        fill: $shadow-strong;
+    }
 }
 
-.expand-sites {
-    color: $shadow;
+.expand-sidebar {
+}
+
+.expand-header {
     display: none;
-
-    .icon {
-        fill: $shadow;
-    }
-
-    &:hover {
-        color: $shadow-strong;
-
-        .icon {
-            fill: $shadow-strong;
-        }
-    }
 }
 
-.collapse-sites {
+.collapse-header {
     background: $profile;
     color: $highlight;
 
@@ -275,10 +294,15 @@ export default {
         }
     }
 
-    .expand-sites {
+    .expand-header {
         display: flex;
     }
 
+    .expand-sidebar,
+    .collapse-sidebar {
+        display: none;
+    }
+
     .network {
         flex-direction: column;
     }