From 2b4553648894a1753fc16bd83be6126ed996a8f5 Mon Sep 17 00:00:00 2001
From: keoinn <keoinn@gmail.com>
Date: Fri, 4 Oct 2024 21:41:04 +0800
Subject: [PATCH] Add Logo Component.

---
 src/assets/gaiaLogo.svg          |  3 ++
 src/components/AppHeaderLogo.vue | 52 +++++++++++++++++++++++++++++++-
 src/layouts/default.vue          |  1 +
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/gaiaLogo.svg

diff --git a/src/assets/gaiaLogo.svg b/src/assets/gaiaLogo.svg
new file mode 100644
index 0000000..a4980c6
--- /dev/null
+++ b/src/assets/gaiaLogo.svg
@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 28.4982C50 28.5982 50 28.7082 50 28.8082C50 28.9082 49.9396 29.2082 49.8994 29.4082C48.9777 34.5233 46.4757 39.2256 42.7413 42.8615C39.0068 46.4973 34.2256 48.8859 29.0624 49.695C23.8992 50.5042 18.6107 49.6937 13.9323 47.3763C9.25396 45.0589 5.4182 41.3498 2.95846 36.7647C0.498724 32.1796 -0.46273 26.9464 0.207797 21.7929C0.878323 16.6394 3.1475 11.8217 6.69979 8.00974C10.2521 4.19777 14.9109 1.58101 20.0284 0.523337C25.1459 -0.534335 30.4678 0.0196535 35.254 2.10827H35.3244C35.5758 2.21827 35.8273 2.32826 36.0788 2.45826C36.8043 2.87311 37.3704 3.51605 37.688 4.28586C38.0056 5.05567 38.0566 5.90863 37.8331 6.71046C37.6096 7.51228 37.1242 8.21743 36.4533 8.71489C35.7824 9.21235 34.9642 9.47386 34.1274 9.45826C33.6313 9.45449 33.1403 9.35957 32.6789 9.17826H32.5985C30.0104 7.98206 27.1685 7.42945 24.3179 7.56803C21.4672 7.70662 18.6931 8.53226 16.2348 9.97379C13.7764 11.4153 11.7076 13.4295 10.2064 15.8428C8.70525 18.2561 7.81686 20.996 7.6178 23.8266C7.41873 26.6571 7.91496 29.4933 9.06372 32.0908C10.2125 34.6882 11.9793 36.9691 14.212 38.7367C16.4446 40.5043 19.0761 41.7056 21.8797 42.2372C24.6832 42.7688 27.5748 42.6148 30.3051 41.7882C31.1617 41.5219 31.8939 40.9592 32.3688 40.2021C32.8438 39.445 33.03 38.5437 32.8937 37.6618C32.7574 36.7799 32.3077 35.9758 31.626 35.3953C30.9444 34.8149 30.076 34.4966 29.1785 34.4982C28.8694 34.4974 28.5615 34.5378 28.2632 34.6182C28.0117 34.6182 27.7703 34.7082 27.5188 34.7682C25.7261 35.1982 23.8489 35.1299 22.0925 34.5708C20.3362 34.0117 18.7682 32.9832 17.5601 31.598C16.352 30.2127 15.5502 28.5239 15.2424 26.7162C14.9346 24.9085 15.1326 23.0514 15.8148 21.348C16.497 19.6446 17.6371 18.1604 19.1105 17.0578C20.5839 15.9551 22.3339 15.2764 24.1691 15.0958C26.0043 14.9151 27.8542 15.2396 29.5165 16.0337C31.1787 16.8278 32.5894 18.0609 33.5943 19.5982C34.5575 21.1554 35.9005 22.4456 37.4988 23.3494C39.0971 24.2532 40.8991 24.7412 42.7376 24.7682H46.3185C47.3021 24.784 48.24 25.1843 48.929 25.8824C49.618 26.5805 50.0028 27.5202 50 28.4982Z" fill="white"/>
+</svg>
diff --git a/src/components/AppHeaderLogo.vue b/src/components/AppHeaderLogo.vue
index 4e3c59f..dd55c5f 100644
--- a/src/components/AppHeaderLogo.vue
+++ b/src/components/AppHeaderLogo.vue
@@ -1,2 +1,52 @@
+<script setup>
+import logo_img from '@/assets/gaiaLogo.svg'
+</script>
+
 <template>
-    </template>
\ No newline at end of file
+  <div class="nav-logo">
+    <div class="group">
+      <div class="text-wrapper">Gaia Room</div>
+      <img class="vector" alt="Vector" :src="logo_img" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nav-logo {
+//   box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
+  height: 50px;
+  width: 200px;
+  z-index: 200;
+
+  .group {
+    height: 54px;
+    position: relative;
+    top: 25px;
+    left: 50px;
+    width: 200px;
+    z-index: 200;
+
+    .text-wrapper {
+    color: #ffffff;
+    font-family: "Gilroy-ExtraBold", Helvetica;
+    font-size: 20px;
+    font-weight: 800;
+    left: 50px;
+    letter-spacing: 2px;
+    line-height: normal;
+    position: absolute;
+    top: 0;
+  }
+
+  .vector {
+    height: 50px;
+    left: 0;
+    position: absolute;
+    top: 4px;
+    width: 50px;
+  }
+  }
+
+
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 87a3563..dfd6bf9 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -4,6 +4,7 @@
 <template>
   <v-app>
     <v-main>
+      <AppHeaderLogo />
       <AppHeader />
       <!-- <AppNavigation /> -->
       <router-view />