mirror of
https://github.com/ArthurDanjou/website-old.git
synced 2026-01-21 07:21:47 +01:00
Update project
This commit is contained in:
@@ -53,10 +53,14 @@ export default {
|
||||
const {$i18n} = useContext()
|
||||
const getBeginDate = computed(() => {
|
||||
const dateFormat = props.begin.split('-')
|
||||
console.log('1')
|
||||
console.log($i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1])
|
||||
return $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1]
|
||||
})
|
||||
const getEndDate = computed(() => {
|
||||
const dateFormat = props.end.split('-')
|
||||
console.log('2')
|
||||
console.log(props.end === 'Today' ? $i18n.t('date.today') : $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1])
|
||||
return props.end === 'Today' ? $i18n.t('date.today') : $i18n.t('month.' + dateFormat[0]) + " " + dateFormat[1]
|
||||
})
|
||||
|
||||
|
||||
@@ -1,96 +1,74 @@
|
||||
<template>
|
||||
<header class="dark:bg-dark-900 dark:text-white fixed z-50 top-0 left-0 bg-white header 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">
|
||||
<header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white header 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-32">
|
||||
<nuxt-link to="/">
|
||||
<div class="left text-2xl font-bold cursor-pointer border-b-2 border-opacity-0 dark:border-opacity-0 dark:hover:border-opacity-100 hover:border-opacity-100 border-black dark:border-white border-solid duration-500">
|
||||
{{ $t('header.title') }}
|
||||
</div>
|
||||
<img src="@/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
|
||||
</nuxt-link>
|
||||
<nav class="right">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<ul class="flex text-xl">
|
||||
<li class="mx-2 cursor-pointer">
|
||||
<div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
|
||||
🇫🇷
|
||||
</div>
|
||||
<div v-else @click="changeLanguage('en')">
|
||||
🇬🇧
|
||||
</div>
|
||||
</li>
|
||||
<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 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="/">
|
||||
<li class="hover:text-red-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
{{ $t('header.home') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="orange hidden md:inline-block" to="/about">
|
||||
<li class="hover:text-orange-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
<ul class="flex text-lg">
|
||||
<nuxt-link class="hidden md:inline-block" to="/about">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.about') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="green hidden md:inline-block" to="/blog">
|
||||
<li class="hover:text-green-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
<nuxt-link class="hidden md:inline-block" to="/blog">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.blog') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="blue hidden md:inline-block" to="/work">
|
||||
<li class="hover:text-blue-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
{{ $t('header.work') }}
|
||||
<nuxt-link class="hidden md:inline-block" to="/uses">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.uses') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="purple hidden md:inline-block" to="/contact">
|
||||
<li class="hover:text-purple-400 font-bold mx-2 cursor-pointer duration-300">
|
||||
<nuxt-link class="hidden md:inline-block" to="/projects">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.projects') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link class="hidden md:inline-block" to="/contact">
|
||||
<li class="nav-link">
|
||||
{{ $t('header.contact') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="dark:text-white dark:bg-dark-900 text-sm z-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 to="/" class="w-1/5 red">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<ul class="dark:text-white dark:bg-black text-sm z-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 to="/about" class="w-1/5 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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>
|
||||
{{ $t('header.home') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/about" class="w-1/5 orange">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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>
|
||||
{{ $t('header.about') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/blog" class="w-1/5 green">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<nuxt-link to="/blog" class="w-1/5 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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" />
|
||||
<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>
|
||||
{{ $t('header.blog') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/work" class="w-1/5 blue">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<nuxt-link to="/uses" class="w-1/5 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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>
|
||||
{{ $t('header.uses') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/projects" class="w-1/5 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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>
|
||||
{{ $t('header.work') }}
|
||||
{{ $t('header.projects') }}
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/contact" class="w-1/5 purple">
|
||||
<li class="font-bold flex flex-col items-center justify-center">
|
||||
<nuxt-link to="/contact" class="w-1/5 nav-link-mobile">
|
||||
<li class="font-medium flex flex-col items-center justify-center">
|
||||
<svg class="inline-block" height="20" width="20" 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" />
|
||||
@@ -100,18 +78,43 @@
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<ul class="flex items-center">
|
||||
<li class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-850">
|
||||
<div v-if="this.$i18n.locale === 'en'" @click="changeLanguage('fr')">
|
||||
:fr:
|
||||
</div>
|
||||
<div v-else @click="changeLanguage('en')">
|
||||
🇬🇧
|
||||
</div>
|
||||
</li>
|
||||
<li @click="changeColorMode()" class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-850 duration-200">
|
||||
<div v-if="this.$colorMode.preference === '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 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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {onMounted, onUnmounted, ref, useContext, useRouter} from "@nuxtjs/composition-api";
|
||||
import {onMounted, onUnmounted, ref, useAsync, useContext, useRouter} from "@nuxtjs/composition-api";
|
||||
|
||||
export default {
|
||||
name: "Header",
|
||||
setup() {
|
||||
const {$colorMode} = useContext()
|
||||
const changeColorMode = () => {
|
||||
console.log("changed !")
|
||||
$colorMode.preference = $colorMode.value === 'light' ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
@@ -130,12 +133,13 @@ export default {
|
||||
|
||||
const {app, $i18n} = useContext()
|
||||
const $router = useRouter()
|
||||
const changeLanguage = async (lang: 'fr' | 'en') => {
|
||||
await $i18n.setLocale(lang)
|
||||
const changeLanguage = (lang: 'fr' | 'en') => useAsync(() => {
|
||||
console.log("i18n changed")
|
||||
$i18n.setLocale(lang)
|
||||
if ($router.currentRoute.fullPath.includes('blog')) {
|
||||
await app.refresh()
|
||||
app.refresh()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
scrollPosition,
|
||||
@@ -152,31 +156,16 @@ export default {
|
||||
|
||||
.header-container {
|
||||
|
||||
.nuxt-link-active {
|
||||
&.green {
|
||||
@apply text-green-400;
|
||||
}
|
||||
&.blue {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
.nav-link {
|
||||
@apply text-gray-500 dark:text-gray-400 hover:dark:text-white font-medium hover:text-black mx-4 cursor-pointer duration-300
|
||||
}
|
||||
|
||||
.nuxt-link-exact-active {
|
||||
&.red {
|
||||
@apply text-red-400;
|
||||
}
|
||||
&.orange {
|
||||
@apply text-orange-400;
|
||||
}
|
||||
&.green {
|
||||
@apply text-green-400;
|
||||
}
|
||||
&.blue {
|
||||
@apply text-blue-400;
|
||||
}
|
||||
&.purple {
|
||||
@apply text-purple-400;
|
||||
}
|
||||
.nav-link-mobile {
|
||||
@apply text-gray-500 dark:text-gray-400 hover:dark:text-white hover:text-black duration-300
|
||||
}
|
||||
|
||||
nav .nuxt-link-exact-active {
|
||||
@apply text-black dark:text-white;
|
||||
}
|
||||
|
||||
.navbar-bottom-items li {
|
||||
|
||||
@@ -43,7 +43,7 @@ export default {
|
||||
type: String
|
||||
},
|
||||
color: {
|
||||
default: "red-100",
|
||||
default: "red",
|
||||
type: String
|
||||
},
|
||||
link: {
|
||||
@@ -52,10 +52,24 @@ export default {
|
||||
}
|
||||
},
|
||||
setup(props: HomeLinkProps) {
|
||||
const getColor = computed(() => `hover:bg-${props.color}-400 dark:hover:bg-${props.color}-600 active:bg-${props.color}-400 dark:active:bg-${props.color}-600`)
|
||||
/**const getColor = computed(() => {
|
||||
return 'hover:bg-color-400 dark:hover:bg-color-600 active:bg-color-400 dark:active:bg-color-600'.replaceAll('color', props.color)
|
||||
})*/
|
||||
const getColor = computed(() => {
|
||||
switch (props.color) {
|
||||
case 'orange':
|
||||
return 'hover:bg-orange-400 dark:hover:bg-orange-600 active:bg-orange-400 dark:active:bg-orange-600'
|
||||
case 'purple':
|
||||
return 'hover:bg-purple-400 dark:hover:bg-purple-600 active:bg-purple-400 dark:active:bg-purple-600'
|
||||
case 'blue':
|
||||
return 'hover:bg-blue-400 dark:hover:bg-blue-600 active:bg-blue-400 dark:active:bg-blue-600'
|
||||
case 'green':
|
||||
return 'hover:bg-green-400 dark:hover:bg-green-600 active:bg-green-400 dark:active:bg-green-600'
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
getColor
|
||||
getColor,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user