archy/packages/app/src/components/content/ContentPanel.vue

<template>
  <Transition name="panel">
    <aside
      v-if="panelOpen"
      class="path-glass-card overflow-hidden flex flex-col"
      :class="isMobile
        ? 'fixed inset-0 z-30'
        : 'w-80 xl:w-96 shrink-0'"
    >
      <div
        v-if="isMobile"
        class="p-3 flex items-center justify-between"
        :style="isDark
          ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
          : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
      >
        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
          {{ panelTitle }}
        </h3>
        <button
          class="p-2 rounded-lg transition-colors"
          :class="isDark
            ? 'text-white/70 hover:bg-white/10'
            : 'text-gray-500 hover:bg-black/5'"
          @click="closePanel"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="flex-1 min-h-0">
        <FilmDetail
          v-if="selectedFilm"
          :film="selectedFilm"
          @back="closeFilmDetail"
        />
        <FilmGrid
          v-else
          :films="panelFilms"
          :title="panelTitle"
          @select-film="openFilmDetail"
        />
      </div>
    </aside>
  </Transition>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useContentPanel } from '@/composables/useContentPanel'
import FilmGrid from './FilmGrid.vue'
import FilmDetail from './FilmDetail.vue'

const { isDark } = useTheme()
const {
  panelOpen,
  panelFilms,
  panelTitle,
  selectedFilm,
  openFilmDetail,
  closeFilmDetail,
  closePanel,
} = useContentPanel()

const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => windowWidth.value < 1024)

function onResize() {
  windowWidth.value = window.innerWidth
}

onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

<style scoped>
.panel-enter-active {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel-leave-active {
  transition: all 0.2s ease-in;
}
.panel-enter-from {
  opacity: 0;
  transform: translateX(20px);
}
.panel-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>