Fix up layout in preparation for complex nav

web/src/components/header.rs

@@ -17,8 +17,12 @@ use sycamore::prelude::*;
 #[component]
 pub fn Header<G: Html>(cx: Scope) -> View<G> {
     view! {cx,
-        div(class="menu no-print") {
-            h1 { "Meal Plan" }
+        nav(class="no-print") {
+            h1(class="title") { "Meal Plan" }
+            ul {
+                li { a(href="/ui/login") { "Login" } }
+                li { a(href="https://github.com/zaphar/kitchen") { "Github" } }
+            }
         }
     }
 }

web/src/components/tabs.rs

@@ -52,10 +52,6 @@ pub fn TabbedView<G: Html>(cx: Scope, state: TabState<G>) -> View<G> {
                     }
                 )
             }
-            ul {
-                li { a(href="/ui/login") { "Login" } " | " }
-                li { a(href="https://github.com/zaphar/kitchen") { "Github" } }
-            }
         }
         main(class=".conatiner-fluid") {
             (inner)

web/static/app.css

@@ -13,6 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+:root {
+    --tab-border-color: black;
+    --tab-border-width: 3px;
+    --tab-border-style: solid;
+    --tab-border-radius: 15px;
+}
+
 @media print {
 
     .no-print,
@@ -31,27 +38,17 @@
     }
 }
 
-.destructive {
-    background-color: firebrick !important;
-}
-
-body {
-    padding: 8px;
-}
-
-:root {
-    --tab-border-color: black;
-    --tab-border-width: 3px;
-    --tab-border-style: solid;
-    --tab-border-radius: 15px;
-}
-
 @media (prefers-color-scheme: dark) {
     :root {
         --tab-border-color: lightgrey;
     }
 }
 
+body {
+    padding: 10px;
+    margin: 10px;
+}
+
 nav>ul.tabs>li {
     border-style: none;
     border-bottom-style: var(--tab-border-style);
@@ -67,3 +64,16 @@ nav>ul.tabs>li.selected {
     border-top-right-radius: var(--tab-border-radius);
     border-bottom-style: none;
 }
+
+nav>h1 {
+    margin: 0px;
+    margin-left: 3px;
+    margin-right: 3px;
+    display: inline;
+    vertical-align: middle;
+    text-align: left;
+}
+
+.destructive {
+    background-color: firebrick !important;
+}