<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" class="container">
        <div class="row">
          <div class="col-xl-4 p-4">
            <div class="card">
              <div class="card-header">
                <b>/{{ $page.path.split('/')[1] }}/</b>
              </div>
              <div class="card-body">
                <FolderList :path="`/${$page.path.split('/')[1]}/`" />
              </div>
            </div>
          </div>
          <Content class="col-xl p-4" />
        </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";

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: 8rem 0 2rem 0;
  .sticky-sidebar {
    position: sticky;
    top: 4rem;
  }
  background-color: #1f262b;
}
</style>
