[#114] Implement the home page

app.vue

@@ -1,9 +1,22 @@
 <template>
-  <main class="font-roboto">
+  <div>
     <NuxtPage />
-  </main>
+  </div>
 </template>
 
+<script setup lang="ts">
+import { useMeta } from "#meta";
+
+useMeta({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+  ],
+  bodyAttrs: {
+    class: 'h-screen-full bg-emerald-500 dark:bg-gray-900 mt-10'
+  }
+});
+</script>
+
 <style lang="scss">
 @import './assets/scss/app.scss';
 </style>

components/TheFooter.vue

@@ -0,0 +1,20 @@
+<template>
+  <footer class="flex items-center justify-center w-full text-gray-50 text-md lg:py-10 py-6">
+    <a href="https://www.linkedin.com/in/davorminchorov" target="_blank" rel="noreferrer" class="pl-4">
+      <linkedin-icon :size="32" />
+    </a>
+    <a href="https://github.com/davorminchorov" target="_blank" rel="noreferrer" class="pl-4">
+      <github-icon :size="32" />
+    </a>
+    <a href="https://twitter.com/davorminchorov" target="_blank" rel="noreferrer" class="pl-4">
+      <twitter-icon :size="32" />
+    </a>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import GithubIcon from 'vue-material-design-icons/Github.vue';
+import TwitterIcon from 'vue-material-design-icons/Twitter.vue';
+import LinkedinIcon from 'vue-material-design-icons/Linkedin.vue';
+
+</script>

components/TheNavigationBar.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-row justify-around">
+    <div>
+      <NuxtLink to="/" class="uppercase text-2xl text-gray-50 hover:text-gray-200 dark:text-emerald-500 dark:hover:text-emerald-600 font-bold tracking-wider mr-10">
+        Davor Minchorov
+      </NuxtLink>
+    </div>
+    <nav>
+      <ul class="flex flex-row justify-between space-x-4">
+        <button type="button" role="button" v-if="isDarkTheme" @click="setLightTheme">
+          <SunIcon class="h-6 w-6 text-gray-50 dark:text-emerald-500 dark:hover:text-emerald-600"/>
+        </button>
+        <button type="button" role="button" v-if="isLightTheme" @click="setDarkTheme">
+          <MoonIcon class="h-6 w-6 text-gray-50 dark:text-emerald-500 dark:hover:text-emerald-600"/>
+        </button>
+        <NuxtLink to="about" class="hover:text-gray-200 text-gray-50 dark:text-emerald-500 dark:hover:text-emerald-600 text-xl font-semibold tracking-wide">
+          About
+        </NuxtLink>
+        <NuxtLink to="blog" class="hover:text-gray-200 text-gray-50 dark:text-emerald-500 dark:hover:text-emerald-600 text-xl font-semibold tracking-wide">
+          Blog
+        </NuxtLink>
+        <NuxtLink to="contact" class="hover:text-gray-200 text-gray-50 dark:text-emerald-500 dark:hover:text-emerald-600 text-xl font-semibold tracking-wide">
+          Contact
+        </NuxtLink>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SunIcon, MoonIcon } from '@heroicons/vue/solid';
+import {useMeta} from "#meta";
+import useTheme from "~/composables/useTheme";
+
+const { theme,  isLightTheme, isDarkTheme, setLightTheme, setDarkTheme } = useTheme();
+
+useMeta({
+  htmlAttrs: {
+    class: theme.value === 'light' ? '' : 'dark'
+  }
+});
+
+</script>
+

composables/useTheme.ts

@@ -0,0 +1,43 @@
+import {useStorage} from "@vueuse/core";
+import {computed} from "@vue/reactivity";
+import {useMeta} from "#meta";
+
+export default function useTheme() {
+  const theme = useStorage('theme', 'light');
+
+  const isLightTheme = computed(() => {
+    return theme.value === 'light';
+  });
+
+  const isDarkTheme = computed(() => {
+    return theme.value === 'dark';
+  });
+
+  const setLightTheme = () => {
+    theme.value = 'light';
+    useStorage('theme', 'light');
+    useMeta({
+      htmlAttrs: {
+        class: '',
+      }
+    });
+  }
+
+  const setDarkTheme = () => {
+    theme.value = 'dark';
+    useStorage('theme', 'dark');
+    useMeta({
+      htmlAttrs: {
+        class: 'dark',
+      }
+    });
+  }
+
+  return {
+    theme,
+    isLightTheme,
+    isDarkTheme,
+    setLightTheme,
+    setDarkTheme
+  }
+}

layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="bg-emerald-500 h-screen flex items-center justify-center">
-    Navigation Goes here.
+  <div>
+    <TheNavigationBar />
     <slot />
+    <TheFooter />
   </div>
 </template>

nuxt.config.ts

@@ -10,5 +10,5 @@ export default defineNuxtConfig({
         }
       }
     },
-  }
+  },
 });