Added navigation bar

diff --git a/flatnotes/src/components/App.js b/flatnotes/src/components/App.js
index 81549cca184e1ee808808a476148b252b9787e83..345a3e023294eacbea5a4ed0b65b41670fcb8c77 100644 (file)
--- a/flatnotes/src/components/App.js
+++ b/flatnotes/src/components/App.js
@@ -4,6 +4,7 @@ import { Viewer } from "@toast-ui/vue-editor";
 import RecentlyModified from "./RecentlyModified";
 import LoadingIndicator from "./LoadingIndicator";
 import Login from "./Login";
+import NavBar from "./NavBar";
 
 import api from "../api";
 import * as constants from "../constants";
@@ -12,12 +13,15 @@ import EventBus from "../eventBus";
 import * as helpers from "../helpers";
 
 export default {
+  name: "App",
+
   components: {
     Viewer,
     Editor,
     RecentlyModified,
     LoadingIndicator,
     Login,
+    NavBar,
   },
 
   data: function() {

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 23e8e62f35246b840ab56efec6861ec63b72fdbe..4539274c89b7481ad9811bbd32a6068da3efc751 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -1,40 +1,20 @@
 <template>
-  <div class="container h-100">
-    <!-- Header -->
-    <div v-if="currentView != views.login" class="mt-4 mb-4">
-      <a
-        href="/"
-        @click.prevent="navigate('/', $event)"
-        class="h1 clickable-link text-center"
-        ><img src="../assets/logo.svg"
-      /></a>
-    </div>
+  <div class="container d-flex flex-column align-items-center h-100">
+    <!-- Nav Bar -->
+    <NavBar
+      v-if="currentView != views.login"
+      class="mt-2 w-100"
+      :show-logo="currentView != views.home"
+      @navigate-home="navigate('/')"
+      @new-note="newNote()"
+      @logout="logout()"
+    ></NavBar>
 
     <!-- Login -->
     <Login v-if="currentView == views.login"></Login>
 
     <!-- Buttons -->
     <div class="d-flex justify-content-center mb-4">
-      <!-- Logout -->
-      <button
-        v-if="currentView == views.home"
-        type="button"
-        class="btn btn-sm btn-outline-dark mx-1"
-        @click="logout"
-      >
-        Logout
-      </button>
-
-      <!-- New -->
-      <button
-        v-if="currentView == views.home"
-        type="button"
-        class="btn btn-sm btn-outline-primary mx-1"
-        @click="newNote"
-      >
-        New
-      </button>
-
       <!-- Edit -->
       <button
         v-if="
@@ -84,25 +64,32 @@
       </button>
     </div>
 
-    <!-- Search Input -->
-    <form
-      v-if="[views.search, views.home].includes(currentView)"
+    <!-- Home -->
+    <div
+      v-if="currentView == views.home"
       v-on:submit.prevent="search"
+      class="home-view d-flex flex-column justify-content-center align-items-center flex-grow-1 w-100"
     >
-      <div class="form-group mb-4 d-flex justify-content-center">
-        <input
-          type="text"
-          class="form-control"
-          placeholder="Search"
-          v-model="searchTerm"
-          style="max-width: 500px"
-          autofocus
-        />
+      <div class="mb-3">
+        <img src="../assets/logo.svg" />
       </div>
-    </form>
+      <form v-on:submit.prevent="search" class="w-100">
+        <div class="form-group mb-4 w-100">
+          <input
+            type="text"
+            class="form-control search-input"
+            placeholder="Search"
+            v-model="searchTerm"
+            autofocus
+          />
+          <!-- TODO: Search Button -->
+        </div>
+      </form>
+      <RecentlyModified />
+    </div>
 
     <!-- Note -->
-    <div v-if="currentView == views.note">
+    <div v-if="currentView == views.note" class="w-100">
       <!-- Loading -->
       <div v-if="currentNote == null">
         <loading-indicator
@@ -149,7 +136,21 @@
     </div>
 
     <!-- Search -->
-    <div v-if="currentView == views.search">
+    <div v-if="currentView == views.search" class="w-100">
+      <!-- Search Input -->
+      <form v-on:submit.prevent="search">
+        <div class="form-group mb-4 d-flex justify-content-center">
+          <input
+            type="text"
+            class="form-control"
+            placeholder="Search"
+            v-model="searchTerm"
+            style="max-width: 500px"
+            autofocus
+          />
+        </div>
+      </form>
+
       <!-- Searching -->
       <div v-if="searchResults == null">
         <loading-indicator
@@ -181,9 +182,6 @@
         </div>
       </div>
     </div>
-
-    <!-- Home -->
-    <RecentlyModified v-if="currentView == views.home" />
   </div>
 </template>
 

diff --git a/flatnotes/src/components/Login.vue b/flatnotes/src/components/Login.vue
index 0f9ee7b4984f378d0567daf4386cf7e00041ad71..4e759a3a5eeafc8aa5b5012d60cd27fbcc7a1d0b 100644 (file)
--- a/flatnotes/src/components/Login.vue
+++ b/flatnotes/src/components/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex flex-column justify-content-center align-items-center h-100"
+    class="d-flex flex-column justify-content-center align-items-center flex-grow-1"
   >
     <!-- Logo -->
     <div class="mb-3">

diff --git a/flatnotes/src/components/NavBar.vue b/flatnotes/src/components/NavBar.vue
new file mode 100644 (file)
index 0000000..c3cc0a3
--- /dev/null
+++ b/flatnotes/src/components/NavBar.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="d-flex justify-content-between align-items-center">
+    <!-- Logo -->
+    <div>
+      <img
+        src="../assets/logo.svg"
+        class="cursor-pointer"
+        :class="{ invisible: !showLogo }"
+        @click="navigateHome"
+      />
+    </div>
+    <div>
+      <!-- New Note -->
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-primary mx-1"
+        @click="newNote"
+      >
+        New Note
+      </button>
+
+      <!-- Log Out -->
+      <button
+        type="button"
+        class="btn btn-sm btn-outline-dark mx-1"
+        @click="logout"
+      >
+        Log Out
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// Use visibility hidden instead of v-show to maintain consistent height
+.invisible {
+  visibility: hidden;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    showLogo: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  methods: {
+    navigateHome: function () {
+      this.$emit("navigate-home");
+    },
+
+    newNote: function () {
+      this.$emit("new-note");
+    },
+
+    logout: function () {
+      this.$emit("logout");
+    },
+  },
+};
+</script>

diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 047fd82b16ad6df991b7195040f2de54aa23c05f..941baba714b5e6a0ef4652ab61b0d1edca3830bc 100644 (file)
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -28,6 +28,10 @@ body {
   font-family: "Inter", sans-serif;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .clickable-link {
   cursor: pointer;
   &:hover {
@@ -61,6 +65,14 @@ body {
   outline: none;
 }
 
+.home-view {
+  max-width: 500px;
+}
+
+.search-input {
+  box-shadow: 0 0 20px #0000000a;
+}
+
 // Toast UI Overrides
 .toastui-editor-contents {
   font-family: "Inter", sans-serif;