Skip to content

Commit 04b051a

Browse files
mathhetrumathhetru
committed
feat: implemente drawer for header on mobile and tablet screens
1 parent 37ac9a2 commit 04b051a

7 files changed

Lines changed: 89 additions & 11 deletions

File tree

‎app/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<UApp :locale="fr">
3-
<div class="flex flex-col min-h-screen">
3+
<div class="flex flex-col min-h-screen img-background bg-default" data-vaul-drawer-wrapper>
44
<HeaderItem />
55
<NuxtLayout>
66
<div class="pt-28 px-4 flex-1">

‎app/assets/css/main.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,20 @@ body {
55
font-family: var(--font-main);
66
background-color: var(--depth);
77
scroll-behavior: smooth;
8+
background-image: url('https://res.cloudinary.com/dbihnwsar/image/upload/f_auto,q_auto/v1772911031/EgNIdozXsAEzP9m-protected-intensity-LOW-V2_q1xony.jpg');
9+
background-size: cover;
10+
background-position: center;
11+
background-attachment: fixed;
12+
background-color: #f5f0eb;
13+
}
14+
15+
body::before {
16+
content: '';
17+
position: fixed;
18+
inset: 0;
19+
background: rgba(255, 255, 255, 0.92);
20+
z-index: 0;
21+
pointer-events: none;
822
}
923

1024
.font-heading {

‎app/components/EntitesItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
v-for="entite in props.entites"
44
:key="entite.id"
55
:to="formateLink(entite.id)"
6-
class="border rounded-lg p-4 hover:shadow-lg hover:bg-white transition flex gap-2"
6+
class="border rounded-lg p-4 backdrop-blur-xs hover:shadow-lg hover:bg-white transition flex gap-2"
77
>
88
<div v-if="entite.image_url" class="w-20 h-20 rounded-full overflow-hidden shrink-0">
99
<NuxtImg

‎app/components/HeaderItem.vue‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,104 @@
11
<template>
22
<header
33
v-if="data"
4-
class="fixed inset-x-0 w-[90vw] mx-auto bg-white/30 rounded-full mt-4 backdrop-blur-sm z-50 shadow-lg"
4+
class="fixed inset-x-0 w-[90vw] mx-auto bg-white/70 md:bg-white/50 rounded-full mt-4 backdrop-blur-xs z-50 shadow-lg"
55
>
66
<nav class="flex items-center justify-between p-4">
77
<NuxtLink
88
:to="data.title.link"
99
:aria-label="data.title.ariaLabel"
10-
class="font-heading text-2xl flex items-center gap-2"
10+
class="font-heading text-xl lg:text-2xl flex items-center gap-2"
1111
>
1212
<UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
1313
{{ data.title.text }}
1414
</NuxtLink>
15-
<div class="flex items-center gap-6">
15+
<div class="hidden md:flex items-center text-sm lg:text-base gap-6 lg:gap-9">
1616
<NuxtLink
1717
v-for="page in data.pages"
1818
:key="page.text"
1919
:to="page.link"
2020
:aria-label="page.text"
21-
class=""
2221
>
2322
{{ page.text }}
2423
</NuxtLink>
2524
</div>
2625
<NuxtLink
2726
:to="data.contact.link"
2827
:aria-label="data.contact.ariaLabel"
29-
class="flex items-center gap-1 rounded-full px-8 py-2 bg-black text-white"
28+
class="hidden md:flex items-center text-xs rounded-full px-4 py-1 bg-black text-white lg:text-sm lg:px-6 hover:bg-gray-600 transition-colors"
3029
>
31-
<!-- <UIcon name="line-md:chat-round-dots-filled" /> -->
3230
{{ data.contact.text }}
3331
</NuxtLink>
32+
33+
<UDrawer
34+
v-model:open="isOpen"
35+
direction="right"
36+
:handle="false"
37+
should-scale-background
38+
set-background-color-on-scale
39+
>
40+
<UButton
41+
color="neutral"
42+
variant="ghost"
43+
size="xl"
44+
trailing-icon="line-md:align-justify"
45+
class="mr-2 md:hidden h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
46+
/>
47+
48+
<template #content>
49+
<div class="min-w-75 min-h-96 size-full m-4">
50+
<UButton
51+
color="neutral"
52+
variant="ghost"
53+
size="xl"
54+
trailing-icon="line-md:close"
55+
class="pt-4 h-10 w-10 hover:bg-black/10 hover:text-black transition-colors"
56+
@click="closeDrawer"
57+
/>
58+
<div class="flex flex-col items-center text-l gap-12 pt-12">
59+
<NuxtLink
60+
:to="data.title.link"
61+
:aria-label="data.title.ariaLabel"
62+
class="font-heading text-2xl flex items-center gap-2"
63+
@click="closeDrawer"
64+
>
65+
<UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
66+
{{ data.title.text }}
67+
</NuxtLink>
68+
<NuxtLink
69+
v-for="page in data.pages"
70+
:key="page.text"
71+
:to="page.link"
72+
:aria-label="page.text"
73+
class="w-full text-center text-l"
74+
@click="closeDrawer"
75+
>
76+
{{ page.text }}
77+
</NuxtLink>
78+
<NuxtLink
79+
:to="data.contact.link"
80+
:aria-label="data.contact.ariaLabel"
81+
class="flex items-center w-full rounded-full bg-black hover:bg-gray-600 transition-colors"
82+
@click="closeDrawer"
83+
>
84+
<p class="text-white text-l mx-6 my-2 w-full text-center">
85+
{{ data.contact.text }}
86+
</p>
87+
</NuxtLink>
88+
</div>
89+
</div>
90+
</template>
91+
</UDrawer>
3492
</nav>
3593
</header>
3694
</template>
3795

3896
<script setup lang="ts">
3997
const { data } = await useAsyncData('header', () => queryCollection('header').first())
98+
99+
const isOpen = ref(false)
100+
101+
const closeDrawer = () => {
102+
isOpen.value = false
103+
}
40104
</script>

‎app/components/HeroItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
v-if="data"
4-
class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
4+
class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 backdrop-blur-xs rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
55
>
66
<div class="w-[30%] h-full flex flex-col gap-4 text-center justify-center mx-12">
77
<h1 class="text-4xl font-heading">{{ data?.hero?.heading }}</h1>

‎app/components/SearchItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
placeholder="Rechercher..."
1010
class="border px-4 py-2 rounded w-full"
1111
/>
12-
<div class="flex gap-2">
12+
<div class="flex flex-wrap gap-2">
1313
<UButton
1414
:color="typeFilter === 'tous' ? 'primary' : 'secondary'"
1515
class="text-white px-4 py-2 rounded"

‎content/header/navigation.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": {
33
"img": "/images/test.png",
44
"ariaLabel": "Logo de Weena et la légende de Noor",
5-
"text": "Wiki Weëna et la Légende de Noor",
5+
"text": "Weëna et la Légende de Noor",
66
"link": "/"
77
},
88
"contact": {

0 commit comments

Comments
 (0)