feat : concept grid view

app.vue

@@ -2,14 +2,17 @@
 import { useUserStore } from "~/store/user.store";
 import { useLobbyStore } from "./store/lobby.store";
 import { useConceptStore } from "./store/concepts.store";
+import PageHeader from "./components/pageHeader.vue";
 const userStore = useUserStore();
 const lobbyStore = useLobbyStore();
 const conceptStore = useConceptStore()
 
 void userStore.whoami();
 void conceptStore.fetchConceptTypes();
+void conceptStore.fetchConceptList()
 void lobbyStore.fetchGames();
 
+
 onBeforeMount(() => {
   lobbyStore.subscribe();
 });
@@ -20,16 +23,35 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtLayout>
-      <NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
-      <ConceptHeader />
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtRouteAnnouncer />
+  <NuxtLayout>
+    <NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
+    <PageHeader />
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 
 <style>
 @import "vue-multiselect/dist/vue-multiselect.css";
+
+html {
+  height: 100%;
+}
+
+body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+#__nuxt {
+  height: 100%;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "main";
+  grid-template-rows: min-content 1fr;
+}
 </style>