Skip to content
This repository has been archived by the owner on Nov 19, 2022. It is now read-only.

[#114] Implement the home page #152

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
[#114] Set up a basic structure for the pages and the layout as well …
…as implement the light and dark themes
  • Loading branch information
davorminchorov committed Dec 23, 2021
commit 37e8a209c5e281bab3cbc619efbd628b28f1bb48
17 changes: 15 additions & 2 deletions app.vue
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions components/TheFooter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<template>
<div class="flex justify-center">
The Footer goes here.
</div>
</template>

<script lang="ts">

</script>
44 changes: 44 additions & 0 deletions components/TheNavigationBar.vue
Original file line number Diff line number Diff line change
@@ -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>

43 changes: 43 additions & 0 deletions composables/useTheme.ts
Original file line number Diff line number Diff line change
@@ -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
}
}
5 changes: 3 additions & 2 deletions layouts/default.vue
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -10,5 +10,5 @@ export default defineNuxtConfig({
}
}
},
}
},
});
Loading