Added expand/collapse sidebar to desktop network sites.

public/css/style.css

@@ -392,10 +392,12 @@
   margin: 0 auto;
   box-sizing: border-box;
 }
-.info.column[data-v-d4b03dc2] {
+.info[data-v-d4b03dc2] {
   padding: 1rem;
   border-left: solid 1px rgba(0, 0, 0, 0.1);
   border-right: solid 1px rgba(0, 0, 0, 0.1);
+  -webkit-box-flex: 1;
+          flex-grow: 1;
 }
 .row[data-v-d4b03dc2] {
   display: -webkit-box;
@@ -722,7 +724,17 @@
   overflow: hidden;
 }
 .sidebar .title[data-v-e2e12602] {
-  border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+            justify-content: center;
+    border-bottom: solid 1px rgba(255, 255, 255, 0.075);
+}
+.sidebar.expanded[data-v-e2e12602] {
+    width: calc(100% - 25rem);
+}
+.sidebar.expanded .logo[data-v-e2e12602] {
+      max-width: 18rem;
 }
 .logo[data-v-e2e12602] {
   width: 100%;
@@ -740,11 +752,13 @@
 }
 .header[data-v-e2e12602] {
   width: 100%;
-  height: 3rem;
   display: -webkit-box;
   display: flex;
-  -webkit-box-pack: center;
-          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+          flex-direction: column;
+  -webkit-box-align: center;
+          align-items: center;
   flex-shrink: 0;
   border-bottom: solid 1px rgba(0, 0, 0, 0.1);
   background: #222;
@@ -754,7 +768,7 @@
 }
 .header .logo[data-v-e2e12602] {
     max-width: 20rem;
-    height: 100%;
+    max-height: 3rem;
     padding: .5rem;
 }
 .expand[data-v-e2e12602] {
@@ -770,32 +784,26 @@
   cursor: pointer;
 }
 .expand .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.5);
     margin: 0 .5rem;
 }
-.expand-sites[data-v-e2e12602] {
-  color: rgba(0, 0, 0, 0.5);
+.expand:hover .icon[data-v-e2e12602] {
+    fill: rgba(0, 0, 0, 0.7);
+}
+.expand-header[data-v-e2e12602] {
   display: none;
 }
-.expand-sites .icon[data-v-e2e12602] {
-    fill: rgba(0, 0, 0, 0.5);
-}
-.expand-sites[data-v-e2e12602]:hover {
-    color: rgba(0, 0, 0, 0.7);
-}
-.expand-sites:hover .icon[data-v-e2e12602] {
-      fill: rgba(0, 0, 0, 0.7);
-}
-.collapse-sites[data-v-e2e12602] {
+.collapse-header[data-v-e2e12602] {
   background: #222;
   color: rgba(255, 255, 255, 0.5);
 }
-.collapse-sites .icon[data-v-e2e12602] {
+.collapse-header .icon[data-v-e2e12602] {
     fill: rgba(255, 255, 255, 0.5);
 }
-.collapse-sites[data-v-e2e12602]:hover {
+.collapse-header[data-v-e2e12602]:hover {
     color: #fff;
 }
-.collapse-sites:hover .icon[data-v-e2e12602] {
+.collapse-header:hover .icon[data-v-e2e12602] {
       fill: #fff;
 }
 .sites.compact[data-v-e2e12602] {
@@ -816,10 +824,14 @@
 .sites.compact.expanded[data-v-e2e12602] {
       display: grid;
 }
-.expand-sites[data-v-e2e12602] {
+.expand-header[data-v-e2e12602] {
     display: -webkit-box;
     display: flex;
 }
+.expand-sidebar[data-v-e2e12602],
+  .collapse-sidebar[data-v-e2e12602] {
+    display: none;
+}
 .network[data-v-e2e12602] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;