added vertical mode and optimised layout for mobile

src/ui/Root/Root.css

@@ -13,19 +13,32 @@
 }
 
 .root {
+    position: relative;
     overflow: hidden;
     color: var(--color-p-light);
     background-color: var(--color-bg-dark);
     height: 100vh;
-    display: flex;
     align-content: center;
 }
 
-.root-settings {
-    background-color: var(--color-bg-light);
-    height: 100%;
+.root-sidebar {
+    position: absolute;
+    left: -28em;
     width: 30em;
-    padding: 0 2em 0 2em;
+    height: 100vh;
+    display: flex;
+    transition: left 400ms;
+}
+
+.sidebar-visible .root-sidebar {
+    left: 0;
+}
+
+.root-settings {
+    z-index: 1;
+    width: 28em;
+    padding: 0 0 0 2em;
+    background-color: var(--color-bg-light);
     overflow: scroll;
     display: inline-block;
 }
@@ -35,19 +48,86 @@
     text-align: center;
 }
 
+.root-sidebar-toggle {
+    z-index: 1;
+    height: 100vh;
+    min-width: 2em;
+    background-color: var(--color-bg-light);
+    left: 0;
+}
+
+.root-hamburger {
+    right: 0;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    mask-image: url(./drawing.svg);
+    mask-size: 2em;
+    background-color: var(--color-ui-neutral-dark);
+}
+
+.root-switch-mode {
+    right: 0;
+    width: 2em;
+    height: 2em;
+    cursor: pointer;
+    mask-image: url(./rotate.svg);
+    mask-size: 2em;
+    background-color: var(--color-ui-neutral-dark);
+}
+
 .root-beat-stage-container {
-    flex: 1;
+    position: absolute;
     height: 100%;
-    width: calc(100vw - 30em);
+    left: 0;
+    width: 100vw;
     display: flex;
-    justify-content: center;
     flex-direction: column;
+    transition: left 400ms, width 400ms;
+}
+
+.sidebar-visible .root-beat-stage-container {
+    left: 30em;
+    width: calc(100vw - 30em);
 }
 
 .root-beat-stage {
-    max-width: calc(100vw - 30em);
-    overflow: hidden;
+    padding: 2em;
+    max-height: 100vh;
     margin: auto;
+    max-width: 100vw;
+    transition: max-width 400ms;
+}
+
+.vertical-mode .root-beat-stage {
+    height: 100vh;
+}
+
+.sidebar-visible .root-beat-stage {
+    max-width: calc(100vw - 30em);
+}
+
+@media screen and (max-width: 900px) {
+    .sidebar-visible .root-sidebar {
+        left: 0;
+        width: 100vw;
+    }
+    .root-sidebar {
+        left: calc(-100vw + 2em);
+        width: 100vw;
+    }
+    .root-settings {
+        width: calc(100vw - 2em);
+    }
+    .sidebar-visible .root-beat-stage-container {
+        left: 100vw;
+    }
+    .root-beat-stage-container {
+        left: 0;
+    }
+    .sidebar-visible .root-beat-stage {
+        max-width: 100vw;
+    }
 }
 
 * {