geoproject-app/src/components/editor/EditorPanel.vue

<template>
  <aside id="editor-panel">
    <nav class="tabs">
      <button
        type="button"
        class="tab"
        :class="{ active: activeTab === 'document' }"
        @click="activeTab = 'document'"
      >
        Document
      </button>
      <button
        type="button"
        class="tab"
        :class="{ active: activeTab === 'code' }"
        @click="activeTab = 'code'"
      >
        Code
      </button>
      <button
        type="button"
        class="tab"
        :class="{ active: activeTab === 'contenu' }"
        @click="activeTab = 'contenu'"
      >
        Contenu
      </button>
    </nav>

    <button
      v-if="activeTab.length > 0"
      type="button"
      class="close-button"
      @click="activeTab = ''"
      title="Fermer le panneau"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
      </svg>
    </button>

    <div class="tab-content" :class="{ open: activeTab.length > 0 }">
      <div v-if="activeTab === 'document'" class="tab-panel">
        <PageSettings />
        <TextSettings />
      </div>

      <div v-else-if="activeTab === 'code'" class="tab-panel">
        <StylesheetViewer />
      </div>

      <div v-else-if="activeTab === 'contenu'" class="tab-panel">
        <!-- Contenu tab content -->
      </div>
    </div>
  </aside>
</template>

<script setup>
import { inject } from 'vue';
import PageSettings from './PageSettings.vue';
import TextSettings from './TextSettings.vue';
import StylesheetViewer from '../StylesheetViewer.vue';

const activeTab = inject('activeTab');
</script>

<style lang="scss" scoped>
#editor-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 35rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

nav {
  position: absolute;
  margin: 1rem 0 0 1rem;

  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;

  width: 2rem;
  height: 2rem;
  padding: 0.25rem;

  background: transparent;
  border: none;
  cursor: pointer;

  color: var(--color-browngray-300);
  transition: color 0.2s ease;

  &:hover {
    color: var(--color-browngray-100);
  }

  svg {
    width: 100%;
    height: 100%;
  }
}

.tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  left: -35rem;

  padding: 4rem 1rem 1rem 1rem;

  background-color: var(--color-panel-bg);
  box-shadow: -5px 0px 12px;

  transition: left 0.3s var(--curve);
}

.tab-content.open {
  left: 0rem;
}

.tab-panel {
  height: 100%;
  overflow-y: auto;
}
</style>