<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/note">
            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="/posts/hello-sori-studio">
            Style
          </NuxtLink>
          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/posts/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 class="left-sidebar__category flex items-center gap-3" to="/tags/books">
            <span class="h-4 w-1 rounded-full bg-orange-500" /> Books
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/business">
            <span class="h-4 w-1 rounded-full bg-indigo-500" /> Business
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/dev">
            <span class="h-4 w-1 rounded-full bg-cyan-500" /> Tech
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/science">
            <span class="h-4 w-1 rounded-full bg-teal-400" /> Science
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/design">
            <span class="h-4 w-1 rounded-full bg-fuchsia-500" /> Design
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/music">
            <span class="h-4 w-1 rounded-full bg-pink-500" /> Music
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/health">
            <span class="h-4 w-1 rounded-full bg-green-500" /> Health
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/play">
            <span class="h-4 w-1 rounded-full bg-violet-500" /> Gaming
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/travel">
            <span class="h-4 w-1 rounded-full bg-purple-500" /> Travel
          </NuxtLink>
          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/diy">
            <span class="h-4 w-1 rounded-full bg-yellow-400" /> DIY
          </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>
