<template>
	<div ref="container" aria-expanded="false" class="group flex h-screen overflow-hidden">
        <div class="z-50 sm:hidden inline-block w-full h-auto border-b border-light-35 dark:border-dark-35">
            <div class="p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25">
                <Icon icon="radix-icons:hamburger-menu" />
            </div>
        </div>
        <div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
            <div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
                <div class="flex justify-between items-center">
                    <NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"></NuxtLink>
                    <div class="flex gap-4 items-center">
                        <Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
                        <Tooltip message="Se connecter" side="right">
                            <NuxtLink class="" :to="{ path: '/user/profile', force: true }">
                                <div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
                                    <Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
                                </div>
                            </NuxtLink>
                        </Tooltip>
                    </div>
                </div>
                <div class="flex"></div>
                <slot></slot>
            </div>
            <div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-6">
                <NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
                <p>Copyright Peaceultime - 2024</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
</script>