<script setup>
//import { onMounted, onUnmounted } from 'vue';
import Burger from '@/components/Burger.vue'
import { useBurgerStore } from './stores/burger';

import Name from '@/components/Name.vue';
import Footer from './components/Footer.vue';


import Menu from '@/components/Menu.vue';

const burger = useBurgerStore();
//clé du site : 6LemkQ8mAAAAAL-l-wG8W9VV73xrL5VeUO1FiAeW
// clé secrete: 6LemkQ8mAAAAAGKikUbV_rKv7O4hCp_gx1f5pULu


</script>

<template>
<div>


  <Burger/>
    <div v-bind:class="burger.checked ? 'page' : 'index'" >
      <router-view v-slot="{ Component }">
        <!-- <Transition name="fade"> -->
        <!-- <div> -->
          <Name v-if="burger.checked"/>
          <Menu class="menu" v-if="burger.checked"/>
          <Transition name="fade">
            <component :is="Component" v-if="burger.checked"/>
          </Transition>
          <component :is="Component" v-if="!burger.checked"/>
        <!-- </div> -->
        <!-- </Transition> -->
        </router-view>
      <Footer/>
    </div>
</div>
</template>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Courier+Prime&display=swap');
@import "@/style/widths.scss";
@import "@/style/colors.scss";
html {
  font-size: 16px;
}

body{
  background-color: $body-bg
}
p, li, label{
  font-size: 1.25rem;
  color:$main-normal;
  font-family: Arial, Helvetica, sans-serif;
}

p{
  text-indent: 2em;
}

.menu{
  position: sticky;
  top: 0em;
}

.content{
  background-color: $page-bg;
  padding: 0.5em 0 3em 0;
  margin: 0em auto 1em auto;
  width: 90%;
  border-radius: 20px;
  box-shadow:0px 0px 30px #ffffff;
  & > .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin : 0.5em;
    padding: 0.5em 0.5em 0 0.5em;
    overflow: hidden;
    & .logo{
      background-position: center;
      background-repeat: no-repeat;
      width: 3em;
      aspect-ratio:  1;
      border-radius: 50%;
      border : $title-normal solid 3px;
    }
    & > h3 {
      //display: inline;
      font-family: 'acme', Arial, Helvetica, sans-serif;
      color:$title-normal;
      opacity: 1;
      font-size: 3rem;
      text-align: right;
      font-weight: 300;
      text-transform: uppercase;
      //filter:drop-shadow(2px 2px 3px $action-normal);
      //transform: translateY(0em);
      animation: title 0.45s cubic-bezier(0,.37,.27,.94);
    }
  }
}
.grecaptcha-badge{
  opacity : 0;
  width: 0;
  height:0;
}
@media (width < 420px){
  .title{
    flex-direction : column;
    gap:0.5em;
  }
}
@keyframes title{
  0%{
    opacity: 0;
    transform: translateY(3em);
  }
  50%{
    opacity: 0;
    transform: translateY(3em);
  }
  75%{
    opacity: 0;
  }
  100%{
    opacity:1;
    transform: translateY(0em);
  }
}
.index, .page{
  //position : relative;
  margin: 0 auto;
  //border : 2px solid white;
  box-shadow: 0px 0px 20px 20px #363636;
  max-width: $maxWidth;
  padding-bottom: 2em;
  min-height: 100vh;
}

nav.menu-container{
  z-index: 99;
}
.index{
  background-color: rgb(182, 182, 182);
}

.page {
  background-color: $page-bg;
  background-image: url('../src/assets/points.svg');
}

h1, h2 {
  font-family: 'Courier Prime', monospace;
}

/* we will explain what these classes do next! */
.fade-leave-active {
  transition: opacity 0.150s ease-out;
}
.fade-enter-active{
  transition: opacity 0.35s ease-out;
  transition-delay: 0.25s;
  
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media (width > 600px){
  html{
    font-size:18px;
  }
  .content{
    width: 80%;
  }
}
</style>
