91 lines
3.6 KiB
Vue
91 lines
3.6 KiB
Vue
<script setup>
|
|
const { data: tags } = await useFetch('/api/tags', {
|
|
default: () => []
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
|
|
<div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
|
|
<div class="left-sidebar__block site-sidebar-section py-3 pl-0 pr-3">
|
|
<nav class="left-sidebar__nav grid gap-1 text-[15px]">
|
|
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/">
|
|
<span>Home pages</span>
|
|
<span>⌄</span>
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/tags">
|
|
Tags
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/about">
|
|
Authors
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/post/hello-sori-studio">
|
|
Style
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/post/custom-writing-tool">
|
|
<span>Post types</span>
|
|
<span>⌄</span>
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/pages/contact">
|
|
<span>Members</span>
|
|
<span>⌄</span>
|
|
</NuxtLink>
|
|
<NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/projects">
|
|
Landing pages
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
|
|
<div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
|
|
<span>Categories</span>
|
|
<span>⌃</span>
|
|
</div>
|
|
<div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
|
|
<NuxtLink
|
|
v-for="tag in tags"
|
|
:key="tag.id"
|
|
class="left-sidebar__category flex items-center gap-3"
|
|
:to="`/tag/${tag.slug}`"
|
|
>
|
|
<span class="left-sidebar__category-color h-4 w-1 rounded-full" :style="{ backgroundColor: tag.color }" />
|
|
<span class="left-sidebar__category-name">{{ tag.name }}</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
|
|
<div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
|
|
<span>Authors</span>
|
|
<span>⌃</span>
|
|
</div>
|
|
<div class="left-sidebar__authors mt-4 grid gap-4 text-sm">
|
|
<div class="left-sidebar__author flex items-center gap-3">
|
|
<span class="h-8 w-8 rounded-full bg-[#e7c49d]" />
|
|
<span><strong class="block">sori</strong><span class="site-soft">Editor</span></span>
|
|
</div>
|
|
<div class="left-sidebar__author flex items-center gap-3">
|
|
<span class="h-8 w-8 rounded-full bg-[#98b7d5]" />
|
|
<span><strong class="block">zenn</strong><span class="site-soft">Writer</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="left-sidebar__footer flex items-center justify-between px-1 py-4 text-xs">
|
|
<nav class="left-sidebar__footer-nav flex gap-4">
|
|
<NuxtLink to="/pages/links">
|
|
Portal
|
|
</NuxtLink>
|
|
<NuxtLink to="/pages/about">
|
|
Docs
|
|
</NuxtLink>
|
|
<NuxtLink to="/pages/projects">
|
|
Projects
|
|
</NuxtLink>
|
|
</nav>
|
|
<span class="left-sidebar__theme-dot">☾</span>
|
|
</footer>
|
|
</aside>
|
|
</template>
|