Add sidebar toggling

Flask/static/css/flask.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
 
+/* Colors */
 :root {
     --color-background0: #212121;
     --color-background1: #212121;
@@ -15,6 +16,13 @@
     --color-transparent: rgba(0, 0, 0, 0);
 }
 
+/* Sidebar size is the left panel size when opened */
+:root {
+    --sidebar-size: max(20vw, 160px);
+    --sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
+    --sidebar-sz-plus30: calc(var(--sidebar-size) + 30px);
+}
+
 html {
     text-align: center;
     font-family: Montserrat;
@@ -197,7 +205,6 @@ body {
     border: 1px solid var(--color-border0);
     border-radius: 5px;
     padding: 20px;
-    width: 80%;
     height: 80%;
     
 }
@@ -318,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 input[type="time"]::-webkit-calendar-picker-indicator:hover {
     opacity: 1;
 }
+
+
+/** Sidebar stuff */
+#slide-sidebar {
+    display: none;
+}
+
+label[for="slide-sidebar"] {
+    all: initial;
+    z-index: 1; /* Always on top */
+    position: absolute;
+    top: 20px;
+    left: var(--sidebar-sz-plus30);
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+    background: var(--color-transparent);
+}
+
+label[for="slide-sidebar"]:after {
+    all:unset;
+}
+
+input:checked + label[for="slide-sidebar"] {
+    background: var(--color-transparent);
+}
+
+#slide {
+    border-style: solid;
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: var(--color-border0);
+
+    color: var(--color-text);
+    background-color: var(--color-background0);
+    padding: 8px 8px 2px 8px;
+}
+
+/* When opened behaviour */
+.left-pannel {
+  width: var(--sidebar-size);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    left: var(--sidebar-sz-plus10);
+    right: 0;
+    bottom: 0;
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+
+    padding: 0 25px;
+    background-color: var(--color-background0); /* we need no transparency when switching */
+    overflow: hidden;
+}
+
+/* When closed behaviour */
+input:checked#slide-sidebar~label {
+    left: 20px;
+}
+
+input:checked#slide-sidebar~.left-pannel {
+    display: none;
+    transition: display 0s 0.5s;
+}
+
+input:checked#slide-sidebar~.content {
+    left: 0;
+}