사용자 화면 사이드바 스타일을 Thred 기준으로 정렬.

좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/site/SiteHeader.vue

@@ -1,5 +1,6 @@
 <script setup>
 const { menuOpen, toggleMenu } = useMenuState()
+const { isDarkMode, toggleTheme } = useThemeMode()
 
 const { data: siteSettings } = await useFetch('/api/site-settings', {
   default: () => ({
@@ -53,9 +54,19 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
         <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
           Subscribe
         </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
+        <NuxtLink class="site-header__nav-link site-interactive rounded-md px-2 py-1" to="/pages/about">
           Account
         </NuxtLink>
+        <button
+          class="site-header__theme-toggle site-panel-hover site-interactive grid h-8 w-8 place-items-center rounded-full border border-[var(--site-line)]"
+          type="button"
+          :aria-label="isDarkMode ? '라이트 모드로 전환' : '다크 모드로 전환'"
+          :title="isDarkMode ? '라이트 모드' : '다크 모드'"
+          @click="toggleTheme"
+        >
+          <span v-if="isDarkMode">☀</span>
+          <span v-else>☾</span>
+        </button>
       </nav>
     </div>
   </header>