feat: page layout

open-isle-cli/src/App.vue

@@ -4,7 +4,7 @@
 
     <div class="main-container">
       <MenuComponent :visible="menuVisible" />
-      <div class="content" :class="{ 'with-menu': menuVisible }">
+      <div class="content">
         <router-view />
       </div>
     </div>
@@ -26,16 +26,13 @@ export default {
 
 <style>
 .content {
-  transition: margin-left 0.3s ease;
+  flex: 1;
 }
-
 .main-container {
   display: flex;
-  justify-content: center;
   flex-direction: row;
   max-width: var(--page-max-width);
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
   background-color: var(--normal-background-color);
 }
 

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

@@ -24,13 +24,22 @@ export default {
 .menu {
   width: 200px;
   background-color: var(--menu-background-color);
-  overflow-y: auto;
   height: calc(100vh - var(--header-height));
 }
 .slide-enter-active, .slide-leave-active {
-  transition: transform 0.3s ease;
+  transition: 
+    transform 0.3s ease,
+    opacity 0.3s ease,
+    width 0.3s ease;
 }
 .slide-enter-from, .slide-leave-to {
   transform: translateX(-100%);
+  opacity: 0;
+  width: 0;
+}
+.slide-enter-to, .slide-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+  width: 200px;
 }
 </style>

open-isle-cli/src/views/HomePageView.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="home-page">
-    <h1>Home Page</h1>
-    <p>Welcome to OpenIsle</p>
+    hello?
   </div>
 </template>
 
@@ -15,5 +14,6 @@ export default {
 .home-page {
   background-color: white;
   color: black;
+  height: 100%;
 }
 </style>