Random changes for many files.

Signed-off-by: Pavel Kirilin <win10@list.ru>

layouts/default.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="page dark-mode">
+    <b-navbar type="is-primary w-100">
+      <template #brand>
+        <NuxtLink to="/" class="navbar-item">
+          <img src="/logo.png" alt="Logo" /> S3rius' dev blog
+        </NuxtLink>
+      </template>
+      <template #end>
+        <div class="navbar-menu">
+          <a
+            role="button"
+            class="navbar-burger"
+            aria-label="menu"
+            aria-expanded="false"
+          >
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div
+          v-for="[category, pages] in categories"
+          :key="category"
+          class="is-hidden-desktop"
+        >
+          <p class="navbar-item is-inactive divider">
+            <span>{{ category }}</span>
+          </p>
+          <NuxtLink
+            class="navbar-item"
+            v-for="(item, key) of pages"
+            :to="item.slug"
+            :key="key"
+            exact-active-class="is-active"
+          >
+            {{ item.title }}
+          </NuxtLink>
+        </div>
+      </template>
+    </b-navbar>
+
+    <section class="main-content columns">
+      <aside class="column is-2 section is-hidden-touch">
+        <b-menu>
+          <div v-for="[category, pages] in categories" :key="category">
+            <p class="menu-label">{{ category }}</p>
+            <ul class="menu-list">
+              <li v-for="(item, key) of pages" :key="key">
+                <NuxtLink :to="item.slug" exact-active-class="is-active">
+                  {{ item.title }}
+                </NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </b-menu>
+      </aside>
+      <div class="container column">
+        <Nuxt />
+      </div>
+    </section>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import { defineComponent, useContext, ref } from '@nuxtjs/composition-api'
+import Footer from '../components/Footer.vue'
+
+export default defineComponent({
+  setup() {
+    const { $content } = useContext()
+    const categories = ref([])
+    $content({ deep: true })
+      .only(['category', 'slug', 'title', 'position'])
+      .sortBy('createdAt', 'asc')
+      .fetch()
+      .then((pages) => {
+        let cats = new Map()
+        for (const page of pages) {
+          if (cats.get(page.category) === undefined) {
+            cats.set(page.category, [])
+          }
+          cats.get(page.category).push(page)
+        }
+        // cats.forEach((pages) => {
+        //   pages.sort(
+        //     (page1, page2) => (page1.position || 0) > (page2.position || 0)
+        //   )
+        // })
+        categories.value = Array.from(cats)
+      })
+    return {
+      categories,
+    }
+  },
+  components: { Footer },
+})
+</script>
+
+<style scoped lang="scss">
+.divider {
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px solid #000;
+  line-height: 0.1em;
+  margin: 10px 0 20px;
+
+  span {
+    background: #fff;
+    padding: 0 15px;
+  }
+}
+.content {
+  overflow-y: scroll;
+}
+</style>