<template>
  <main>
    <!-- The client only is used to show the loading picture (@see https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component) -->
    <client-only placeholder=" " />

    <v-app dark>
      <LayoutMenu v-if="displayedMenu" :menu="menu" :mini-variant="properties.miniVariant" />

      <LayoutHeader @handle-open-menu-click="handleOpenMenu" />

      <v-main class="ot_content_color">
        <LayoutSubheader />

        <LayoutAlertbar class="mt-1"></LayoutAlertbar>

        <!-- Page will be rendered here-->
        <nuxt />
      </v-main>

      <lazy-LayoutAlertContainer />
    </v-app>
  </main>
</template>

<script lang="ts">
import { computed, ComputedRef, defineComponent, reactive, useContext } from '@nuxtjs/composition-api'
import { $useMenu } from '@/composables/layout/menu'

export default defineComponent({
  name: 'DefaultLayout',

  middleware: ['auth'],
  setup () {
    const { store } = useContext()
    const menu = $useMenu.setupContext().useLateralMenuConstruct()

    const properties = reactive({
      clipped: false,
      miniVariant: false
    })

    const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)

    const handleOpenMenu = (miniVariant: boolean) => {
      properties.miniVariant = miniVariant
    }

    return {
      properties,
      menu,
      displayedMenu,
      handleOpenMenu
    }
  }
})
</script>

<style scoped>
  .client-only-placeholder {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
    background-color: #2c3a48;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAABkCAMAAACYXt08AAAC/VBMVEUAAADr7e339/j09PPp6ejh4eHy8vLc3N3u7u/q6ur29vbp6erx8fHx8fH39/f5+fn7/Pz4+Pjz8vHw8fD7+/vf4OHo1c/x8vL9/f309PT39/fs7O38/Pz////7+/v09PTs7Oz+/v709PT+/v78/P3Y6Oj6+vrz8/L5+fny8vLs7Ozy8vL5+fnz8fH8+/z4+Pj39/f6+vr19fbz8vPx8fH29vb8/Pv4+Pjx8PH09fX3+Pf39vf7+/vv7+/4+Pj19fb4+Pjr6ur29vbu7u719PXx8e41n7/8/f3w8PDu7e7x8fGVzdr6+vr7+/v19fX7+/uHydX6+vrt7e0flbr7+/rnNjf4+PiMydjwnJ75+fl4wNIxmrzrY2To6OjW1Nb53L/1xbEGfa71oRbynjRmt8v9/f3qYWHvj4/61pv3xYLvfn6XzdvysbHgFhdku8silLg1oL/kKirz8/NdtMl7xtL0rEDj4+P3w3NZq8j1unb7xQPjFBVYscXjIiNPpcVetMvoS030q0HoYF16wdDmREVRrMfuhYbqdHt9wNTlMTH2zqK03uj1t1v3xoDykhhHqMPuhj/4xlZjtMz0tWDuf3/6xDX2w3fnTEv63rL0nCHrdHPwgoL1uB/zmCD/5y7gJSU5ocHlREPhIC2Oytj3yXQxmr7vjyb74IL0rkTrgYCq297kPkDyyFjtgB7qVSjx56KLz9X2v2/Y2Nj41IvwmTf////+/v78/P3kGhrlGxvgAABgtcrjFBP0nw9qvM7jGRn5/v9ht8tUr8b1ohBlt832phJetMnjBwb4ogT5+ftZssjjDg7nAQFBpsP2qAL8tQFmuc5HqsPykAbxigb1mgLzlQE+o8BOrcX+0Rf5uBX4qxHueQj8vAPwgQPbAAN2w88Wkbj8wxfzmA/tbAEKibNmuswrm7304KZjtcjv48DwzVfyyD7tPj3pWgb07Mb12pP12oPwUVLuv0v08+L179P3x8fzsbL1uir/3gbpYALlOwH30dH1tbX0lpXvbm/VlmpCAAAAtXRSTlMACu0MCG97aFxo6XFYSdbC8tAhGyUDBiqvh35p/oH45HmpRKWiEO/bgHd0YVgVuLH02ruzoZj7j04+/Mi8raJ8Y1hQOzaQ/piXgm1R5uHcyH1tL/7rxnc9My8aypQ1NTEk+vDKpJBtYlpFQSwc6unn4tfUxbF6dGxXEP714eG8srKypaGCe3hpZ188MzEo9ta1opSSjYxTUkxIK/ve1sq7mpqalpaLi11cU0fo5+TdwrWae2tlh72bYwAADh5JREFUeNrs2VloE0EYB/DPphSPXiY2aas2Nl61Tb1j2qr1pioeKCoKisXiUdEHBREVQUUURUXxPh9EPPBCdCbNsiGBElJJaaBNoKfQ9qF43/eBk+xMZrdJ1acmtP7okWzTsP/MzDdfNvDff//9kx1Hjxw5t8Hv/PnzR9Ra6BZ2rL657cHekstr1rRUNzUdO3a5ZO+1bds2HNkBXVrxzZMla1paqmuqq72+ptbWkuuPSlevXn343PZt209uP7M6Frqmo9tKWnzVPq/XFtDQevywcg2cK+2a2Uv32nw+b3m5TeKsab0OIVJSoOs57fXZnOWMrdzZVALdwwlfhTPAn7vCVl5e37QduoUzvnp/7AqiiqggvKXQLVzz1dc7q6rq3r1pe0q0vX732dtNRv2ht76q6vnr9w4HCnA4CtruaKA7GLqm4nPbY4zkHg/Ph+7g8LMCFALPgm5gCkZh4FHQ5c1GHRgJXVwa4hwERkGToUvLR8yED6+fvXv+7M0rB6JwOnRhqgxEJc+6VOVp9Hg8jc/eI8qiZv07EFogNP2zBo/MzOqjDv900+cUTZqUOnBQPiho+bPk5mRljhycHq+CCDMhaokOtDcuNdbW1Xk8zcGBl0qddqJ+OKEfC7rCDCxNiAlj86C9hMJkTP+MxywbCkHx+uF+egOoTRlYesAwkwYiSTMASTJ0QBS/tNX6w+/8wKZ84LDqMQqImTIAcZbMXJDTpVqQ3DwjMNlIoktIRlyMASLIjGnEHAg4/q2hrra5zvOchkWFQPSIoWGR0nwdcMbQ5mA2UL2w9PqOQkrTIXKWIEkiSEq/vnzZQrI3ttHXZBiNHt5oNTDLUBjjldHpauAeayBSDGzQjUDdbW19WV3b3PicrXYDjR7eGKCmI0oZcBaPHtY4iJQ4PrbUydaGhq/O2sadr2iO7PbRMcHXexoE5BYEV/ja7D7pfYOPmBEaHSPZ/0ds2FORJBWYMw1NTQ0Nzc2Nb+j5FSmjWwr7J+SNWIgRNUA69yGImhIrlfQC9kq0j74kLm9mDl/zvSBCEuk4jADmaA3RUF/beJ/O+IWK6DEzISDHwobQDISa3c0DaoaF1U9l9EnSrjCLrbQsiAxtb3oCPYHJPUauRTc5d57W0ZNbII+OVwFlRPJhXYv5fkCNp4cSWXRlbRiDJIOh02jX71u6Zem+/Ru1AKAahiQJwKjWVLe01FTtjO2HJHoti65s6schCc4HgPnKkiGfCBYdja7czbLpkUnQWW7tFgSX2yUIZbtXLgdgDUa+7LqFz2ar9twI9va9Y2XR80Kj4Wx+e4l5MFNUhKhsWfQYYPLokSToJOsEl1UiugX31eXz+Q5GFTsrnDbvaYAENuopPPqEXOAWIMlAgJ7oD4pk0UcCMxN1bvTDgttqt5f5WcusouC66JBGLh6Y0or6eu8JIHGCa5VH10MQL+qZAH0w6liiLLoZGF0nR98tWMs4q9Vd+eI7Vlb4ExXNVXuBmBscKB59QQpwU/iUHfSn6PoU3s0tA6Zf50a/JVhJ3mBy8mUXxJ8O+b5e7PniOQ5+hXz3CR99BCtUf4k+QMWjx0Uq+h4WnbO7K99+dKBkoK58qdkHBK+A/WXRe8ujp7N2iE/45Il9QyQmxUY+unazK5ibEyvdbz85pkk725Wab1dpz8LGTC2LntwDONaRreVlTg9hRT76clEs4/i8d1dWvri9ct2hQwfuuZ4cbNdy9AVZdGwAbljo5jZBE6XRz7rLOiC6KgXBLgpPNi8HSRbrTBcpopsgKAdRBt7S4KIojX6A1vd2q93q/0FqgF0QVmpBkoAR38l5dJQxFKhY1ggm+9d/EX28ZRVw8RPzoyb6E3+VE912qzWQmPyme3yg3FUuvQDUVIwoM9Do1FjW6i9UXLDuxybJ6BnAGEYjy+AV0RF9nYsEd9ntdpdLtJL4rLUJTHjx7aekfC0QKmNSMPloVbvoOCkhFkA1dT5iZrKax9ZEP6llMUnTwKSJhuhnRaso7i/etHH/FpE08qKVxCYDL1aSMvfroyOwOaWmThyGFdfOWHQG9946nG18fBpoMhBjWZA5JDPRErxrjILoG0W7sJLeXLl0F7lHuEXxxcUfBQ4UjhlCond0cc2IOmCZEQXRc3e5xAvAbNp4aN2pUwcOnS02OVB44+Gv0Y3ApGEUTsHiaJjwsEUoWw5hmFFYs+Cv0dOU3V2oeYujoszBPkHcCOEYWbTwHyDwN61IwbII5AxjQiZ7poZWeBTh6OtcwkEIS2OagJEMzjDnQmj0xJz5slxjZ4JSSpq8RGJLUh5Qg7DEDMwKLNFDp9hkF/ZAB9TLJmYErjKT7+RJIzTAyd+vq9LGWDBh6W0yQKgeUwtjBiD/84xOSl8MQYvT4/yyZvDCExc4lG6EzrFU2LUDOqSJz47LyorLTlABxaPzi1Up6vheveLVsdCBHurpPXvG94v456i/2zmXnyaCMIB/tYD4QGhLW6i1VKSAIBRKReRdHpWHSqEKAqKSoBxQUCCERAUTJZpwMDGevKgxXjwZk91NICGhITU0aQKXclMOQPgz3G5nmN1uFymSQtVfuDCddva3M7Pz6DcNon9mph/Ch6hHb5Ss5sHM9X9UHe7NzNz47f3pcHxydKj/NvWYBz+ewbbkvXm94rPbfa+n1H+XOtvbv9+BbRh/4nV5XC7Xim/j9fTeqZtuBTDBPnJ922p3+FyzHpfH7XGtLG84m/dM/bCe8aMfg33k/na9vc87z1pvuu0bdq/Xa19tllC/mJ/iJz9hx+pUgL1RTziTwdEJ4fHyxyNJ8+UFt9uz6Vpd6+1ds7PuzgGkvkhzlMoE81IqZ8fqDJefiYW9oBEVb4Mw+Yi2HkU4ltdn3W73prO3t3uqQz4w5LMPBapZ3dRoZGlswltPaDVycn/Uj6HiE3bR3e9DCDq8S/Ozbs/C8tpQoKF3PbQ7J0GEJorV1U8fh0p9MrswP+92L2x0dwFg99Up0R2ajmJ1kD94DyIcK3MLbK1vuh6aALbcnc5XQeZvTNGsDvJHN0Ujr2tpya8+62vmp06srgrcB7qno7mv+3n/NrjSXXN+9dmVERAwtbr2QQOY5t7xqH7McXy8qRb29Ln1pSVWffl5cN/uXnO+ikFV3htoEjZU9pGoVIf+F/d55iPzc3MLC1hdyHj32tDEm899E0MTXWhOgUyOi7tS3ZExY5xxLDYhbwfqylyj7pTOWCMHSbQ5bI4cLfDJRZ9WB7vkXf9tQHR1e3/OoQbfB2JU458nRz+Md3HaieUpLahsRUp+fn5ZK7mmokMUzcHQBcOpbduqK6sUxTTNxSAmlecCIT2xPJ8lsQagWsHQtP8jT+BCSizmSlx8eaXZbLZUQfhobkx3yPw19erh6k+s7pqE7cmhginHVzVMC9JpvVUmrZ5qEORVXATMSRzbpFJQhMJaMpMTUAa7wfTFMfp1dNC74WPNkfoTydYnFe56Bk8vxZxQSahrT4jyZgMCRfHoGy5TfJiLKOhMCF0Eu8PkGGQXac4VVj3Q192ugXDVM4DE3ojc1SHVewooMQ1CdVr8Tc/eqBOaR5e9P1GtswM7GtclMfKje7mOmAgsqkWyCU0zJMORUOrJpVQosom6ZBh1I03zi2cZhj/gy+igZ511Z9Xd6BEvTWe2Lq4S3/AqFl0N/0zBosUYGztWn0Z6Ygj1QgqhV9w9Zb62ZVInVsei+CROT3ZVXBG6tVZug9sGf8SAY9DjWV/nOvsI/JZaOnApJSQJuR7tQaNlA4PjTEXqJMyuSAssslaGxNsK1Zn8s0faCykMWjnaGHw4ZU+QNz8fdC17PB5fH0gjuWhV6imO+OBgykMykbo6E3nVAyIdu+cK1a/VCiKN6UuiKc0e0dX8aXJkpM+0G/V0FHAiA8xdSfVqEqGEwXKFAvUkbVBMU6JIPeKI1WWddZ2dnXVaQMQktKAeIFYvoziKlbw2hxoN08ZXjwMEHj0UB1GdoJbXHY4zpzGMVK3HJKEWYjSe3aIY2ep46gZV8BGdEwdXPS++0ZxVQDHcy1LqF8nDm4DTUgSByRiV/oCrx1sKiIO0ei5NSXOVp54CGE3SgVbXlnF6v1UnQ5tUdqyeARh55kFWbwuemjLhqBNMRP0UUT/ItS7L5FvThqvGCil1vAjQpx0VUVAojxL1YyHO/y9mZRhtKjW0S6njc5CZ8hgR8hiIOnU8Z9enKtXAcVpKXYXPCyVDCMJRL4EII1Yn89jSWsBYpNRBgUNK/1TdBhGGqFPtgLCRsFFMmqS6DrcQLRCSz9SFrR4PkYaot2ypi8YjHSM1kSVh1NeIu/IKxZzPC0+dskKkIRdHt2L14PPsTRLjujCM2tCEIq9zM7lb0RSe+mI6RBqywGBasuNOVZO+Th2Nl2k0qpOJDLbL1IjVVSTqMjNFlxN36RD+90pNOOoUY+GKjyTHKQLN7chmkflYVpqBJi8Xq8TqkMt/v2Af5vhO1GNp/tuHIZIki7YlT1JSpIdQhwbJQOudqCeItiUjyGXRZnShhAxjC6UO9SHzVsOO1DWGfVSvFm1GJwcFV9NZaAOtPqQ6VBvEG9e1sDN1SN1HdWhAl0cWl8pEhiKUHq/Fj2E5AHxDyUZep6lkBLfqSisEjQ53AWNCWQsAUUGKpy0QYc6VJVE0B3UJj3CWUpqhWfRXU5UQk3G+MbXxQsbpZADoSQ1QCzy0OkUx+ogCc7UaMG2nU06zpJwDTExlIOUCaTQtBjoAUwGRRpmuO2+1WhtSW7WAUJXUV7BYz/WQn53SyLb7GrXmQkVRUYW1Nd0EPGRyP3kaQQr7Z5LxGk1JVX0DW3r7uTb4z3/+82/yC60nz8kSayq2AAAAAElFTkSuQmCC");
  }
</style>
