Add login and signup pages with hidden menu

open-isle-cli/src/App.vue

@@ -1,9 +1,12 @@
 <template>
   <div id="app">
-    <HeaderComponent @toggle-menu="menuVisible = !menuVisible" />
+    <HeaderComponent
+      @toggle-menu="menuVisible = !menuVisible"
+      :show-menu-btn="!hideMenu"
+    />
 
     <div class="main-container">
-      <MenuComponent :visible="menuVisible" />
+      <MenuComponent :visible="!hideMenu && menuVisible" />
       <div class="content">
         <router-view />
       </div>
@@ -20,6 +23,11 @@ export default {
   components: { HeaderComponent, MenuComponent },
   data() {
     return { menuVisible: true }
+  },
+  computed: {
+    hideMenu() {
+      return ['/login', '/signup'].includes(this.$route.path)
+    }
   }
 }
 </script>

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

@@ -1,8 +1,8 @@
 <template>
   <header class="header">
     <div class="header-content">
-      <button class="menu-btn" @click="$emit('toggle-menu')">
+      <button v-if="showMenuBtn" class="menu-btn" @click="$emit('toggle-menu')">
-        <i class="fas fa-bars"></i> 
+        <i class="fas fa-bars"></i>
       </button>
       <div class="logo-container" @click="goToHome">
         <img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60">
@@ -15,6 +15,12 @@
 <script>
 export default {
   name: 'HeaderComponent',
+  props: {
+    showMenuBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
   methods: {
     goToHome() {
       this.$router.push('/')

open-isle-cli/src/router/index.js

@@ -3,6 +3,8 @@ import HomePageView from '../views/HomePageView.vue'
 import MessagePageView from '../views/MessagePageView.vue'
 import AboutPageView from '../views/AboutPageView.vue'
 import PostPageView from '../views/PostPageView.vue'
+import LoginPageView from '../views/LoginPageView.vue'
+import SignupPageView from '../views/SignupPageView.vue'
 
 const routes = [
   {
@@ -24,6 +26,16 @@ const routes = [
     path: '/posts/:id',
     name: 'post',
     component: PostPageView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginPageView
+  },
+  {
+    path: '/signup',
+    name: 'signup',
+    component: SignupPageView
   }
 ]
 

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

@@ -0,0 +1,17 @@
+<template>
+  <div class="login-page">
+    <h1>Login</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginPageView'
+}
+</script>
+
+<style scoped>
+.login-page {
+  padding: 20px;
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+  <div class="signup-page">
+    <h1>Sign Up</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SignupPageView'
+}
+</script>
+
+<style scoped>
+.signup-page {
+  padding: 20px;
+}
+</style>