sori.studio/components/site/RightSidebar.vue

<script setup>
const followLinks = [
  { id: 'facebook', label: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
  { id: 'x', label: 'X', href: 'https://x.com', icon: 'x' },
  { id: 'github', label: 'Github', href: 'https://github.com', icon: 'github' },
  { id: 'instagram', label: 'Instagram', href: 'https://instagram.com', icon: 'instagram' },
  { id: 'linkedin', label: 'Linkedin', href: 'https://linkedin.com', icon: 'linkedin' },
  { id: 'rss', label: 'RSS', href: '/rss/', icon: 'rss' }
]

const { data: siteSettings } = await useFetch('/api/site-settings', {
  default: () => ({
    title: 'sori.studio',
    description: 'sori.studio 개인 블로그',
    logoText: '井',
    copyrightText: '©2026 sori.studio'
  })
})
</script>

<template>
  <aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l lg:border-t-0 lg:px-0">
    <div class="right-sidebar__scroll site-sidebar-scroll min-h-0 flex-1">
      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0 max-lg:px-0">
        <div class="right-sidebar__profile flex items-center gap-3">
          <div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
            {{ siteSettings.logoText }}
          </div>
          <div>
            <p class="right-sidebar__title font-semibold">
              {{ siteSettings.title }}
            </p>
            <p class="right-sidebar__description text-sm site-muted">
              {{ siteSettings.description }}
            </p>
          </div>
        </div>
        <form class="right-sidebar__subscribe mt-4 flex flex-col gap-2 sm:flex-row sm:items-stretch">
          <input class="right-sidebar__input min-w-0 w-full flex-1 rounded-lg px-3 py-2 text-sm site-input sm:min-w-0" placeholder="Your email">
          <button class="right-sidebar__button shrink-0 rounded-lg px-4 py-2 text-sm font-semibold site-button sm:self-auto" type="button">
            Subscribe
          </button>
        </form>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <div class="right-sidebar__row flex items-center justify-between">
          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
            Follow
          </p>
          <nav class="right-sidebar__social relative z-10 flex flex-wrap items-center gap-1 text-sm text-[var(--site-text)]">
            <a
              v-for="item in followLinks"
              :key="item.id"
              class="site-interactive p-0.5 hover:opacity-75"
              :href="item.href"
              :aria-label="item.label"
              target="_blank"
              rel="noreferrer"
            >
              <svg
                v-if="item.icon === 'facebook'"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z" />
              </svg>
              <svg
                v-else-if="item.icon === 'x'"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <path d="M4 4l11.733 16H20L8.267 4z" />
                <path d="M4 20l6.768-6.768m2.46-2.46L20 4" />
              </svg>
              <svg
                v-else-if="item.icon === 'github'"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21" />
              </svg>
              <svg
                v-else-if="item.icon === 'instagram'"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <rect x="4" y="4" width="16" height="16" rx="4" />
                <circle cx="12" cy="12" r="3" />
                <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
              </svg>
              <svg
                v-else-if="item.icon === 'linkedin'"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                <rect x="2" y="9" width="4" height="12" />
                <circle cx="4" cy="4" r="2" />
              </svg>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
              >
                <circle cx="5" cy="19" r="1" />
                <path d="M4 4a16 16 0 0 1 16 16" />
                <path d="M4 11a9 9 0 0 1 9 9" />
              </svg>
              <span class="sr-only">{{ item.label }}</span>
            </a>
          </nav>
        </div>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <div class="right-sidebar__row flex items-center justify-between">
          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
            Recommended
          </p>
          <span>↗</span>
        </div>
        <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/post/hello-sori-studio">
            sori.studio 첫 글과 방향
          </NuxtLink>
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/projects">
            Projects and services
          </NuxtLink>
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/links">
            Links and portal
          </NuxtLink>
        </div>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <p class="right-sidebar__about text-sm leading-6 site-muted">
          {{ siteSettings.description }}
        </p>
        <NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
          About {{ siteSettings.title }}
        </NuxtLink>
      </div>
    </div>

    <footer class="right-sidebar__footer shrink-0 py-4 pl-5 pr-3 text-xs site-muted max-lg:px-0">
      {{ siteSettings.copyrightText }}
    </footer>
  </aside>
</template>