arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-21 15:31:47 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Import SVG icon & Add dark mode

Browse Source
This commit is contained in:
Arthur Danjou
2020-11-21 11:13:03 +01:00
parent 19db34f3dd
commit aba835f122
42 changed files with 211 additions and 9334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Header.vue
View File

@@ -1,8 +1,8 @@
<template>
<header class="fixed top-0 left-0 bg-white dark:bg-black header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24">
<header class="dark:bg-dark-200 dark:text-white fixed z-index-50 top-0 left-0 bg-white header border-b border-gray-200 border-solid tracking-wider w-full h-16 lg:h-24 duration-500" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white' : ''">
<div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-64">
<nuxt-link to="/">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500 dark:text-white dark:bg-black">
<div class="left text-2xl font-bold cursor-pointer hover:underline duration-500">
Arthur Danjou
</div>
</nuxt-link>
@@ -12,12 +12,16 @@
<li class="mx-2 cursor-pointer">
<nuxt-link to="/dev"> FR </nuxt-link>
</li>
<li class="mx-2 cursor-pointer flex items-center">
<div @click="changeColorMode()" v-if="this.$colorMode.value === 'light'" class="">
<img alt="Moon Logo" src="@/assets/img/utilities/moon.svg" height="25" width="25"/>
<li @click="changeColorMode()" class="mx-2 cursor-pointer flex items-center">
<div v-if="this.$colorMode.value === 'light'">
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</div>
<div @click="changeColorMode()" v-else class="">
<img src="@/assets/img/utilities/sun.svg" alt="Sun Logo" height="25" width="25"/>
<div v-else>
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
</li>
<nuxt-link class="red hidden md:inline-block" to="/">
@@ -47,34 +51,45 @@
</nuxt-link>
</ul>
</div>
<ul class="z-index-50 bg-white md:hidden fixed bottom-0 left-0 z-index-20 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<ul class="dark:text-white dark:bg-dark-200 z-index-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link class="red" to="/">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/home.svg" alt="Home icon" height="15" width="15" />
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
Accueil
</li>
</nuxt-link>
<nuxt-link to="/about" class="orange">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/profile.svg" alt="About icon" height="15" width="15" />
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Moi
</li>
</nuxt-link>
<nuxt-link to="/blog" class="green">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/quill.svg" alt="Blog icon" height="15" width="15" />
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Blog
</li>
</nuxt-link>
<nuxt-link to="/work" class="blue">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/case.svg" alt="Work icon" height="15" width="15" />
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Travail
</li>
</nuxt-link>
<nuxt-link to="/contact" class="purple">
<li class="font-bold flex flex-col items-center justify-center">
<img class="inline-block" src="@/assets/img/sections/pin.svg" alt="Contact icon" height="15" width="15" />
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Contact
</li>
</nuxt-link>
@@ -87,10 +102,24 @@
<script>
export default {
name: "Header",
data () {
return {
scrollPosition: null
}
},
methods: {
changeColorMode() {
this.$colorMode.preference = this.$colorMode.value === 'light' ? 'dark' : 'light'
},
updateScroll() {
this.scrollPosition = window.scrollY
}
},
mounted() {
window.addEventListener('scroll', this.updateScroll);
},
destroy() {
window.removeEventListener('scroll', this.updateScroll)
}
}
</script>