Navigation looks a little better

webapp/src/app/app.scss

@@ -1,4 +1,5 @@
 :host {
     display: grid;
     grid-template-columns: min-content auto;
+    min-height: 100vh;
 }

webapp/src/app/components/nav-rail/nav-rail.html

@@ -1,16 +1,16 @@
 <nav>
-    <ul>
-        <li>
+    <ul class="nav-list">
+        <li class="nav-list__item">
             <img src="icons/calendar-dates.svg" alt="Meal Plan">
-            <span>Meal Plan</span>
+            <span class="nav-list__item-label">Plan</span>
         </li>
-        <li>
+        <li class="nav-list__item">
             <img src="icons/shopping-cart.svg" alt="Grocery List">
-            <span>Grocery List</span>
+            <span class="nav-list__item-label">Groceries</span>
         </li>
-        <li>
+        <li class="nav-list__item">
             <img src="icons/search.svg" alt="Search">
-            <span>Search</span>
+            <span class="nav-list__item-label">Search</span>
         </li>
     </ul>
 </nav>

webapp/src/app/components/nav-rail/nav-rail.scss

@@ -1,15 +1,29 @@
 nav {
-    ul {
+    background-color: var(--color-surface-container);
+    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+    font-size: 1.6em;
+    height: 100%;
+
+    .nav-list {
         align-items: center;
         display: flex;
         flex-direction: column;
         list-style: none;
-        padding-left: 0;
+        padding: 1.2em;
 
-        li {
+        .nav-list__item {
             align-items: center;
             display: flex;
             flex-direction: column;
+            inline-size: min-content;
+
+            &:not(:last-of-type) {
+                margin-bottom: 1.2em;
+            }
+
+            .nav-list__item-label {
+                white-space: pre;
+            }
         }
     }
 }

webapp/src/styles.scss

@@ -32,5 +32,6 @@
 }
 
 body {
+    font-size: 62.5%;
     margin: 0;
 }