Working on case cards.

src/layouts/components/Navigation.vue

@@ -14,7 +14,7 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{path: '/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
+          <router-link :to="{path: '/state/cases'}" class="text-base rounded-lg flex items-center p-2 mr-3 hover:bg-violet-100 group" active-class="bg-violet-800 text-white hover:bg-violet-800">
             <icon-mdi-virus-outline class="mr-2"></icon-mdi-virus-outline> cases?
           </router-link>
         </li>

src/layouts/components/Wrapper.vue

@@ -0,0 +1,40 @@
+<template>
+  <nav class="bg-white fixed w-full z-30 shadow-md lg:shadow-none">
+    <div class="px-3 py-3 lg:px-5 lg:pl-3 h-16">
+      <div class="flex items-center h-full">
+        <a class="flex h-full pr-5 font-bold text-violet-900 items-center" href="/">
+          <img src="@/assets/ga-state-flag.svg" class="block h-full object-contain py-2 mr-2"/>
+          TheDerf's Georgia COVID-19 Charts
+        </a>
+        <div class="flex-1"></div>
+        <button @click="toggleSidebar()" aria-expanded="true" aria-controls="sidebar" class="lg:hidden ml-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 rounded">
+          <svg :class="['w-6 h-6', isOpen ? 'hidden' : '']" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+          </svg>
+          <svg :class="['w-6 h-6', isOpen ? '' : 'hidden']" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          </svg>
+        </button>
+        <div class="flex-1 hidden lg:-block"></div>
+      </div>
+    </div>
+  </nav>
+  <aside ref="sidebar" :class="[
+    'fixed z-20 min-h-full max-h-screen lg:max-h-full pt-16 left-0 flex lg:flex flex-shrink-0 flex-col w-full lg:w-96 transition-transform origin-top duration-75 lg:relative lg:scale-y-100',
+    isOpen ? 'scale-y-100' : 'scale-y-0'
+    ]" aria-label="Sidebar">
+    <div class="flex-1 flex flex-col overflow-y-auto px-3 bg-white space-y-4">
+      <slot></slot>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+
+function toggleSidebar() {
+  isOpen.value = !isOpen.value
+}
+</script>