Add git sha1 to footer

2 files changed, 51 insertions, 4 deletions

diff --git a/components/editor/EditorSidebar.vue b/components/editor/EditorSidebar.vue
index 48e187f..7ac4996 100644
--- a/components/editor/EditorSidebar.vue
+++ b/components/editor/EditorSidebar.vue
@@ -52,8 +52,8 @@ const setSelectedType = (type: 'quests' | 'items') => {
 #sidebar-container {
   width: 20rem;
   border-right: 1px solid var(--color-border);
-  height: calc(100vh - 73px);
-  max-height: calc(100vh - 73px);
+  height: 100%;
+  max-height: 100%;
   background-color: var(--color-background);
   user-select: none;
   position: relative;
@@ -94,8 +94,9 @@ const setSelectedType = (type: 'quests' | 'items') => {
     }
   }
 
-  #quests {
-    max-height: calc(100vh - 73px - 46px - 30px);
+  #quests,
+  #items {
+    max-height: calc(100% - 46px - 30px);
     overflow-y: auto;
   }
 
diff --git a/components/footer/SiteFooter.vue b/components/footer/SiteFooter.vue
new file mode 100644
index 0000000..4204fab
--- /dev/null
+++ b/components/footer/SiteFooter.vue
@@ -0,0 +1,46 @@
+<script setup land="ts">
+const config = useAppConfig();
+const runtimeConfig = useRuntimeConfig();
+</script>
+
+<template>
+  <footer id="footer">
+    <p id="copyright-license">
+
+    </p>
+    <p id="git-commit-hash">
+      <font-awesome-icon :icon="['fas', 'code-branch']" />
+      <NuxtLink to="https://github.com/LMBishop/quests-web-editor/">quests-web-editor</NuxtLink>
+      <span>@</span>
+      <NuxtLink :to="`https://github.com/LMBishop/quests-web-editor/commit/${runtimeConfig.public.gitCommitHash}`">
+        {{ runtimeConfig.public.gitCommitHashShort }}
+      </NuxtLink>
+      <span>
+        ({{ runtimeConfig.public.gitBranch }})
+      </span>
+    </p>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+#footer {
+  max-height: 40px;
+  padding: 0.5rem;
+  border-top: 1px solid var(--color-border-soft);
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+#git-commit-hash {
+  display: flex;
+  color: var(--color-text-mute);
+  align-items: center;
+  gap: 0.3rem;
+  align-self: flex-end;
+
+  a {
+    text-decoration: none;
+  }
+}
+</style>
\ No newline at end of file