Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import SideBar from "@/components/organisms/SideBar/SideBar.vue";
import TheHeader from "@/components/organisms/TheHeader/TheHeader.vue";
import { useBreakpoints, breakpointsElement } from "@vueuse/core";
const breakpoints = useBreakpoints(breakpointsElement);
const isMobileMode = breakpoints.smallerOrEqual("md");
</script>
<template>
<section :class="$style.whole_container">
<header :class="$style.header">
<TheHeader />
</header>
<div v-if="isMobileMode" :class="$style.mobileMain">
<section>
<div :class="$style.main_content">
<slot />
</div>
</section>
</div>
<div v-else :class="$style.container">
<aside width="200px" :class="$style.side_menu">
<side-bar />
</aside>
<section :class="$style.main">
<div :class="$style.main_content">
<slot />
</div>
</section>
</div>
</section>
</template>
<style module>
.whole_container {
box-sizing: border-box;
display: flex;
flex-direction: row;
min-width: 0;
}
.header {
width: 100%;
position: fixed;
overflow: hidden;
z-index: 100;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
padding: 100px 0 0 0;
}
.side_menu {
padding: 0;
background-color: #545c64;
position: fixed;
height: calc(100vh - 100px);
overflow: hidden;
box-sizing: border-box;
flex-shrink: 0;
width: 20%;
}
.mobileMain {
width: 100%;
height: 100%;
padding: 100px 0 0 0;
}
.main {
margin-left: auto;
width: 80%;
}
.main_content {
padding: 2em;
}
</style>
|