Merge branch 'main' of github.com:nagisa77/OpenIsle

open-isle-cli/src/components/HeaderComponent.vue

@@ -0,0 +1,30 @@
+<template>
+  <header class="header">
+    <div class="logo">🌴</div>
+    <button class="menu-btn" @click="$emit('toggle-menu')">☰</button>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'HeaderComponent'
+}
+</script>
+
+<style scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: #42b983;
+  color: white;
+}
+.menu-btn {
+  font-size: 24px;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+}
+</style>

open-isle-cli/src/components/MenuComponent.vue

@@ -0,0 +1,40 @@
+<template>
+  <transition name="slide">
+    <nav v-if="visible" class="menu">
+      <ul>
+        <li><router-link to="/">Home</router-link></li>
+      </ul>
+    </nav>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'MenuComponent',
+  props: {
+    visible: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.menu {
+  width: 200px;
+  background-color: #f5f5f5;
+  padding: 10px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+.slide-enter-active, .slide-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-enter-from, .slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>