feat: main layout

open-isle-cli/src/App.vue

@@ -1,9 +1,12 @@
 <template>
   <div id="app">
     <HeaderComponent @toggle-menu="menuVisible = !menuVisible" />
-    <MenuComponent :visible="menuVisible" />
+
-    <div class="content" :class="{ 'with-menu': menuVisible }">
+    <div class="main-container">
-      <router-view />
+      <MenuComponent :visible="menuVisible" />
+      <div class="content" :class="{ 'with-menu': menuVisible }">
+        <router-view />
+      </div>
     </div>
   </div>
 </template>
@@ -22,22 +25,18 @@ export default {
 </script>
 
 <style>
-<<<<<<< HEAD
-
-=======
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
 .content {
-  margin-left: 0;
   transition: margin-left 0.3s ease;
-  padding-top: 60px;
 }
-.content.with-menu {
+
-  margin-left: 200px;
+.main-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  max-width: var(--page-max-width);
+  margin-left: auto;
+  margin-right: auto;
+  background-color: var(--normal-background-color);
 }
->>>>>>> 09bbafa1912b3a87115018c72230fd57e8d08aff
+
 </style>

open-isle-cli/src/assets/global.css

@@ -0,0 +1,13 @@
+:root {
+  --header-height: 60px;
+  --header-background-color: gray;
+  --menu-background-color: darkgray;
+  --normal-background-color: lightgray;
+  --menu-width: 200px;
+  --page-max-width: 1200px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}

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

@@ -16,9 +16,9 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
+  height: var(--header-height);
-  background-color: #42b983;
+  background-color: var(--header-background-color);
-  color: white;
+  color: var(--header-text-color);
 }
 .menu-btn {
   font-size: 24px;

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

@@ -23,13 +23,9 @@ export default {
 <style scoped>
 .menu {
   width: 200px;
-  background-color: #f5f5f5;
+  background-color: var(--menu-background-color);
-  padding: 10px;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
   overflow-y: auto;
+  height: calc(100vh - var(--header-height));
 }
 .slide-enter-active, .slide-leave-active {
   transition: transform 0.3s ease;

open-isle-cli/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import './assets/global.css'
 
 createApp(App).use(router).mount('#app')

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

@@ -13,6 +13,7 @@ export default {
 
 <style scoped>
 .home-page {
-  padding: 20px;
+  background-color: white;
+  color: black;
 }
 </style>