Add table navigation bar

2 files changed, 25 insertions, 7 deletions

diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index 403ee8d..bd49b10 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -87,12 +87,18 @@ impl OnlineTableInner {
         html! {
             <>
                 <div class="game-layout">
+                <div class="navbar">
+                  <ul>
+                  <li>{format!("This is table {}", ctx.props().table.id)}</li>
+                  <li>
+                    <button onclick={leave_table}>
+                        { "Leave table" }
+                    </button>
+                  </li>
+                  </ul>
+                </div>
                 {center}
                 </div>
-                <p>{format!("This is table {}", ctx.props().table.id)}</p>
-                <button onclick={leave_table}>
-                    { "Leave table" }
-                </button>
             </>
         }
     }
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 6240fa8..acb8356 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -22,15 +22,27 @@ body {
 
 .game-layout {
     display: grid;
-    grid-template-areas: "north north north sidebar"
+    grid-template-areas:
+                         "navbar navbar navbar navbar"
+                         "north north north sidebar"
                          "west center east sidebar"
                          "south south south sidebar";
-    grid-template-rows: 10vw minmax(200px, 1fr) 10vw;
+    grid-template-rows: 5vw 10vw minmax(200px, 1fr) 10vw;
     grid-template-columns: 10vw 1fr 10vw 20vw;
-    width: 100vw;
+    width: 100%;
     height: 100vh;
 }
 
+.navbar {
+    grid-area: navbar;
+    background: #eef;
+}
+
+.navbar li {
+    display: inline;
+    padding-right: 0.5em;
+}
+
 .playing-center-layout {
     display: grid;
     grid-template-areas: "current-trick";