<template>
  <div class="app">
    <div class="background">
      <img src="../assets/background.jpg" alt="">
    </div>
    <section class="layout" data-theme="dark">
      <header>
        <div class="bg-dark-opacity1 shadow">
          <site-header class="container" />
        </div>
      </header>

      <main class="content">
        <BannerWrapperNetwork v-if="!$page.frontmatter?.disableAnimation" class="background bg-opacity-50" />
        <div v-if="$page.frontmatter?.sidebar" class="container">
          <div class="row">
            <div class="col-xl-4 p-4">
              <div class="card toc">
                <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>
            <Content class="col-xl-8 p-4" />
          </div>
        </div>
        <div v-else>
          <div class="container">
            <Content class="p-4" />
          </div>
        </div>
      </main>

      <footer class="footer py-3">
        <site-footer class="container" />
      </footer>
    </section>
  </div>
</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";
import BannerWrapperNetwork from "../components/BannerWrapperNetwork";

export default {
  components: {BannerWrapperNetwork, SiteFooter, SiteHeader, FolderList },
};
</script>

<style scoped lang="scss">
.layout {
  position: relative;
  min-height: 100vh;
}
header {
  position: fixed;
  z-index: 10;
  width: 100%;
  font-size: 1.2rem;
}
main.content {
  padding: 5rem 0 2rem 0;
  .toc {
    position: sticky;
    top: 5rem;
  }
  .container {
    position: relative;
  }
}
.background {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
