swingmusic/src/layouts/HeaderContentBottom.vue
geoffrey45 94eb198e47 major redesign and refactor
+ centralized urls
+ reduce max app width
+ bump up header height to 23rem
2022-09-15 12:36:30 +03:00

34 lines
675 B
Vue

<template>
<div id="ap-page">
<header class="ap-page-header" ref="apheader">
<slot name="header"></slot>
</header>
<main class="ap-page-content">
<slot name="content"></slot>
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useVisibility } from "@/utils";
import useNavStore from "@/stores/nav";
const nav = useNavStore();
const apheader = ref<any>(null);
function handleVisibilityState(state: boolean) {
nav.toggleShowPlay(state);
}
useVisibility(apheader, handleVisibilityState);
</script>
<style lang="scss">
#ap-page {
display: grid;
grid-template-rows: 23rem 1fr;
gap: 1rem;
}
</style>