<template>
  <div dir="rtl" class="text-xs min-h-screen dark:bg-zinc-950">
    <div class="max-w-[1300px] relative mx-auto">
      <MaghaleNavbar />
      <div class="py-16 pl-2 pr-2 sm:pl-[352px] sm:pr-8 lg:px-[352px]">
        <NuxtPage class="  container max-w-[550px] mx-auto" @click="store.setHidden()" />
      </div>
      <MaghaleSidebar />
      <Navigation />
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { onBeforeMount } from 'vue'
import { useMaghaleStore } from '~/store'

useHead({
  link: [
    {
      rel: 'manifest',
      href: '/manifest.webmanifest'
    }
  ]
})

const store = useMaghaleStore()

onBeforeMount(() => {
  if (localStorage.getItem('token')) {
    axios.defaults.headers.common.Authorization = localStorage.getItem('token')
    if (!store.token) {
      store.setToken(localStorage.getItem('token'))
      store.setMe({
        id: localStorage.getItem('id'),
        get_image: localStorage.getItem('get_image'),
        get_title: localStorage.getItem('get_title'),
        abstract: localStorage.getItem('abstract'),
        title_check: localStorage.getItem('title_check'),
      })
    }
  }
})
</script>
