Fixes #3 allow the menu to be resizable

Refs #5 style of class container

public/stylesheets/main.css

@@ -25,6 +25,10 @@ a {
     border: 1px solid var(--bs-border-color);
     border-radius: calc(var(--bs-border-radius) - 1px);
 }
+
+.page-index {
+    display: flex;
+}
 .button-wrapper {
     display: inline-flex;
     justify-content: end;
@@ -32,14 +36,12 @@ a {
 
 #menuBar {
     display: inline-block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    max-width: 250px;
-    width: 100%;
+    min-width: 200px;
+    width: min(100%, 350px);
+    height: 100vh;
     border-right: 1px solid gray;
     overflow: auto;
+    resize: horizontal;
 }
 #menuBar > div {
     margin: 2em;
@@ -48,16 +50,13 @@ a {
     padding: 0 1.5em;
 }
 iframe#page {
-    display: inline-block;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    max-width: calc(100% - 250px);
-    height: 100%;
-    width: 100%;
+    display: inline-flex;
+    flex: 1;
     border: none;
 }
+#entity-page {
+    background: url("/img/OIG3.png") no-repeat center 22vh /44vh;
+}
 div.page {
     margin: 0 1em;
 }

views/index.pug

@@ -5,6 +5,7 @@ block append scripts
   script(src='/javascripts/tree.js', language='javascript')
 
 block content
+  div(class='page-index')
     div(id="menuBar")
       div
         +treeroot(tree)