You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

79 lines
2.0 KiB

<template>
<section class="layout" data-theme="dark">
<header>
<div class="bg-darkmode-dark shadow">
<site-header class="container" />
</div>
</header>
<main class="content">
<div v-if="$page.frontmatter.sidebar || $page.frontmatter.toc" class="container">
<div class="row">
<div class="d-none d-xl-block col-4 p-4">
<div class="card toc my-2">
<div class="card-header">
<router-link :to="`/${$page.path.split('/')[1]}/`"><b>/{{ $page.path.split('/')[1] }}/</b></router-link>
</div>
<div class="card-body">
<FolderList :path="`/${$page.path.split('/')[1]}/`" />
</div>
</div>
</div>
<div class="col-xl-8 p-4">
<router-link
v-if="!!$page.path.split('/')[2]"
:to="`/${$page.path.split('/')[1]}/`"
class="btn btn-secondary my-2"
>
<i class="bi-arrow-left" />
back to {{ $page.path.split('/')[1] }}
</router-link>
<Content />
</div>
</div>
</div>
<div v-else>
<div class="container">
<Content class="p-4" />
</div>
</div>
</main>
<footer class="footer my-3">
<site-footer class="container" />
</footer>
</section>
</template>
<script>
import SiteHeader from "./SiteHeader";
import SiteFooter from "./SiteFooter";
import FolderList from "../components/FolderList";
import "bootstrap-icons/font/bootstrap-icons.scss";
import "./main.scss";
import "@vuepress/theme-default/styles/code.styl";
export default {
components: { SiteFooter, SiteHeader, FolderList },
};
</script>
<style scoped lang="scss">
header {
position: fixed;
z-index: 10;
width: 100%;
font-size: 1.2rem;
}
main {
padding: 5rem 0 2rem 0;
background-color: #1f262b;
.toc {
position: sticky;
top: 5rem;
}
}
</style>