You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
170 lines
8.8 KiB
170 lines
8.8 KiB
<script setup> |
|
import { Link, usePage } from '@inertiajs/vue3'; |
|
import NavLink from '@/Components/NavLink.vue'; |
|
import Dropdown from '@/Components/Dropdown.vue'; |
|
import DropdownLink from '@/Components/DropdownLink.vue'; |
|
import { useSlots } from 'vue'; |
|
import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'; |
|
|
|
const props = defineProps({ |
|
footer: { |
|
type: Boolean, |
|
default: true, |
|
} |
|
}) |
|
|
|
|
|
const slots = useSlots(); |
|
const pic = usePage().props.user ? usePage().props.user.pic : ""; |
|
usePage().props.user, usePage().props; |
|
const user = usePage().props.auth.user; |
|
|
|
const toggleMenu = () => { |
|
document.querySelector("#menu-content").classList.toggle("hidden"); |
|
} |
|
</script> |
|
|
|
<template> |
|
<nav class="sticky z-20 w-full top-0 right-0 left-0"> |
|
<div class="w-full h-16 z-40 flex desktop:px-[12.5%] laptop:px-[7.5%] px-2 justify-between border-b border-gray-300 bg-gray-50 text-gray-900"> |
|
<div :class="{ 'w-full': !user }" class="flex h-full justify-between"> |
|
<Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'"> |
|
<img src="/img/logo.png" class="h-full laptop:py-1.5 py-3"> |
|
</Link> |
|
<div class="laptop:flex hidden text-black/80"> |
|
<NavLink v-if="!user" :href="route('home')" :active="route().current('home')"> |
|
Home |
|
</NavLink> |
|
<!-- <NavLink v-if="!user" :href="'#'" :active="false"> |
|
Posts |
|
</NavLink> |
|
<NavLink v-if="!user" :href="route('info')" :active="route().current('info')"> |
|
Infos |
|
</NavLink> |
|
<NavLink v-if="!user" :href="'#'" :active="false"> |
|
News letter |
|
</NavLink> --> |
|
<NavLink v-if="user" :href="route('photo.index')" :active="route().current('photo.*')"> |
|
Photothèque |
|
</NavLink> |
|
<NavLink v-if="user" :href="route('album.index')" :active="route().current('album.*')"> |
|
Albums |
|
</NavLink> |
|
<NavLink v-if="user" :href="route('admin.user.index')" :active="route().current('admin.*')"> |
|
Admin |
|
</NavLink> |
|
<NavLink :href="'/editeur'" :active="route().current('info')"> |
|
Demo editeur |
|
</NavLink> |
|
<NavLink v-if="!user" :href="route('login')" :active="route().current('login')"> |
|
Log in |
|
</NavLink> |
|
</div> |
|
</div> |
|
<div v-if="user" class="laptop:flex hidden relative items-center z-40"> |
|
<Dropdown align="right" width="48"> |
|
<template #trigger> |
|
<span class="flex rounded-md hover:cursor-pointer focus:cursor-pointer"> |
|
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 |
|
font-medium rounded-md text-black/80 hover:text-gray-700 |
|
dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"> |
|
<p class="mr-2">{{ user.name }}</p> |
|
|
|
<div class="w-10 overflow-hidden rounded-full bg-black/80 flex justify-center items-center"> |
|
<img :src="pic" class="h-10" :class="{ 'invert': user.path === 'profiles/none.svg' }"> |
|
</div> |
|
</button> |
|
</span> |
|
</template> |
|
<template #content> |
|
<DropdownLink :href="route('profile.edit')" :active="route().current('profile.edit')">Profile</DropdownLink> |
|
<DropdownLink :href="route('logout')">Log Out</DropdownLink> |
|
</template> |
|
</Dropdown> |
|
</div> |
|
<div class="laptop:hidden h-full z-40 flex items-center"> |
|
<button @click="toggleMenu"><img src="/icons/menu.svg" class="h-10"></button> |
|
</div> |
|
</div> |
|
<div v-if="slots.header" class="w-full z-20 max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%] py-auto bg-gray-50 border-b border-gray-300 text-gray-900"> |
|
<slot name="header"/> |
|
</div> |
|
</nav> |
|
<div id="menu-content" class="laptop:hidden hidden fixed z-30 top-0 bottom-0 right-0 left-0 bg-gray-100 mt-[64px] overflow-y-auto"> |
|
<div class="z-10 flex flex-col border-b border-gray-200"> |
|
<ResponsiveNavLink v-if="!user" :href="route('home')" :active="route().current('home')"> |
|
Home |
|
</ResponsiveNavLink> |
|
<!-- <NavLink v-if="!user" :href="'#'" :active="false"> |
|
Posts |
|
</NavLink> |
|
<NavLink v-if="!user" :href="route('info')" :active="route().current('info')"> |
|
Infos |
|
</NavLink> |
|
<NavLink v-if="!user" :href="'#'" :active="false"> |
|
News letter |
|
</NavLink> --> |
|
<ResponsiveNavLink v-if="user" :href="route('photo.index')" :active="route().current('photo.*')"> |
|
Photothèque |
|
</ResponsiveNavLink> |
|
<ResponsiveNavLink v-if="user" :href="route('album.index')" :active="route().current('album.*')"> |
|
Albums |
|
</ResponsiveNavLink> |
|
<ResponsiveNavLink v-if="user" :href="route('admin.user.index')" :active="route().current('admin.*')"> |
|
Admin |
|
</ResponsiveNavLink> |
|
<ResponsiveNavLink :href="'/editeur'" :active="route().current('info')"> |
|
Demo editeur |
|
</ResponsiveNavLink> |
|
<ResponsiveNavLink v-if="!user" :href="route('login')" :active="route().current('login')"> |
|
Log in |
|
</ResponsiveNavLink> |
|
</div> |
|
<div v-if="user" class="z-10 flex flex-col border-b border-gray-200"> |
|
<span class="w-full flex rounded-md hover:cursor-pointer focus:cursor-pointer"> |
|
<button type="button" class="w-full flex items-center justify-between px-3 py-2 border border-transparent text-sm leading-4 |
|
font-medium rounded-md text-black/80 hover:text-gray-700 |
|
dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"> |
|
<p class="mr-2">{{ user.name }}</p> |
|
|
|
<div class="w-10 overflow-hidden rounded-full bg-black/80 flex justify-center items-center"> |
|
<img :src="pic" class="h-10" :class="{ 'invert': user.path === 'profiles/none.svg' }"> |
|
</div> |
|
</button> |
|
</span> |
|
<ResponsiveNavLink v-if="user" :href="route('profile.edit')" :active="route().current('profile.edit')"> |
|
Profile |
|
</ResponsiveNavLink> |
|
<ResponsiveNavLink v-if="user" :href="route('logout')"> |
|
Log Out |
|
</ResponsiveNavLink> |
|
</div> |
|
</div> |
|
<slot name="content"/> |
|
<footer v-if="footer" class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2 bg-gray-50 text-gray-900 flex items-center justify-between"> |
|
<p class="italic text-gray-600 laptop:text-lg text-xs">© 2024 Propriété de l'association Scout Bas-Lac</p> |
|
<div class="flex my-8"> |
|
<div class="group laptop:mx-2 mx-1"> |
|
<a target="_blank" href="https://www.facebook.com/people/Groupe-Scout-Baslac/61571687535396/"> |
|
<div class="group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg"> |
|
<img src="/icons/facebook.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert"> |
|
</div> |
|
</a> |
|
</div> |
|
<div class="group laptop:mx-2 mx-1"> |
|
<a target="_blank" href="https://www.instagram.com/groupe_scouts_baslac/?igsh=MWx1OXE0aWcyZzZubA%3D%3D"> |
|
<div class="group group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg"> |
|
<img src="/icons/instagram.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert"> |
|
</div> |
|
</a> |
|
</div> |
|
<div class="group laptop:mx-2 mx-1"> |
|
<a target="_blank" href="mailto:groupebaslac@gmail.com"> |
|
<div class="group group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg"> |
|
<img src="/icons/mail.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert"> |
|
</div> |
|
</a> |
|
</div> |
|
</div> |
|
</footer> |
|
</template> |