NavBar and SearchInput improvements

diff --git a/client/App.vue b/client/App.vue
index fc7ffa385411e0ad4eb4beb78593aaca4a77d1ec..507633d1a0d4af82d295ea5388df63f130133bf4 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,11 +1,9 @@
 <template>\r
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">\r
-    <NavBar />\r
     <RouterView />\r
   </div>\r
 </template>\r
 \r
 <script setup>\r
 import { RouterView } from "vue-router";\r
-import NavBar from "/partials/NavBar.vue";\r
 </script>\r

diff --git a/client/components/Button.vue b/client/components/ButtonComponent.vue
similarity index 87%
rename from client/components/Button.vue
rename to client/components/ButtonComponent.vue
index 250abf3725321145ffa2e440b18b2d8aef52b698..2a870cbb2339148b3bb8a4caa84955b26f67d439 100644 (file)
--- a/client/components/Button.vue
+++ b/client/components/ButtonComponent.vue
@@ -1,27 +1,27 @@
-<template>\r
-  <button\r
-    class="hover:bg-theme-background-hover flex items-center rounded px-2 py-1 text-theme-text-muted"\r
-  >\r
-    <SvgIcon\r
-      v-if="iconPath"\r
-      type="mdi"\r
-      :path="iconPath"\r
-      :size="iconSize"\r
-      :class="{ 'mr-1': label }"\r
-    ></SvgIcon>\r
-    <span v-if-label>{{ label }}</span>\r
-  </button>\r
-</template>\r
-\r
-<script setup>\r
-import SvgIcon from "@jamescoyle/vue-icon";\r
-\r
-defineProps({\r
-  iconPath: String,\r
-  iconSize: {\r
-    type: String,\r
-    default: "1.25em",\r
-  },\r
-  label: String,\r
-});\r
-</script>\r
+<template>
+  <button
+    class="hover:bg-theme-background-hover flex items-center rounded px-2 py-1 text-theme-text-muted"
+  >
+    <SvgIcon
+      v-if="iconPath"
+      type="mdi"
+      :path="iconPath"
+      :size="iconSize"
+      :class="{ 'mr-1': label }"
+    ></SvgIcon>
+    <span v-if="label">{{ label }}</span>
+  </button>
+</template>
+
+<script setup>
+import SvgIcon from "@jamescoyle/vue-icon";
+
+defineProps({
+  iconPath: String,
+  iconSize: {
+    type: String,
+    default: "1.25em",
+  },
+  label: String,
+});
+</script>

diff --git a/client/components/SearchInput.vue b/client/components/SearchInput.vue
index c5844f8dc4817b8f6062d541be709175617171eb..3a07bcbc71af7f4412eeffdbd0205f24163b5ecd 100644 (file)
--- a/client/components/SearchInput.vue
+++ b/client/components/SearchInput.vue
@@ -1,23 +1,24 @@
 <template>\r
-  <form class="flex" v-on:submit.prevent="search">\r
+  <form class="flex w-full max-w-[500px]" v-on:submit.prevent="search">\r
     <input\r
       type="text"\r
-      class="rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2"\r
+      class="rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2 w-full focus:outline-none focus:ring-1"\r
       placeholder="Search"\r
     />\r
-    <Button\r
+    <ButtonComponent\r
       :iconPath="mdilMagnify"\r
       iconSize="1.75em"\r
-      class="rounded-l-none border border-l-0 border-theme-border"\r
+      class="rounded-l-none border border-l-0 border-theme-border focus:outline-none focus:ring-1"\r
     />\r
   </form>\r
 </template>\r
 \r
 <script setup>\r
-import Button from "./Button.vue";\r
 import { mdilMagnify } from "@mdi/light-js";\r
 \r
+import ButtonComponent from "./ButtonComponent.vue";\r
+\r
 function search() {\r
-  console.log("searching...");\r
+  console.log("searching...");  // TODO: Implement search functionality\r
 }\r
 </script>\r

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 1c2b456c0a36e9a54e90fe6e1463da096ac49d64..21c0be7a515a3fbdba9eabe2535bedd1bd454df3 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,21 +1,28 @@
 <template>\r
   <nav class="flex justify-between">\r
-    <Logo></Logo>\r
+    <RouterLink to="/">\r
+      <Logo :class="{ invisible: hideLogo }"></Logo>\r
+    </RouterLink>\r
     <div>\r
-      <Button\r
+      <ButtonComponent\r
         :iconPath="mdilPlusCircle"\r
         label="New Note"\r
         @click="toggleTheme"\r
-      ></Button>\r
+      />\r
     </div>\r
   </nav>\r
 </template>\r
 \r
 <script setup>\r
 import { mdilPlusCircle } from "@mdi/light-js";\r
+import { RouterLink } from "vue-router";\r
 \r
-import Button from "/components/Button.vue";\r
-import Logo from "/components/Logo.vue";\r
+import ButtonComponent from "../components/ButtonComponent.vue";\r
+import Logo from "../components/Logo.vue";\r
+\r
+defineProps({\r
+  hideLogo: Boolean\r
+});\r
 \r
 function toggleTheme() {\r
   document.body.classList.toggle("dark-theme");\r

diff --git a/client/router.js b/client/router.js
index f425d9a90fc6ec5101f7ea369c6ec19c2a6bdfa6..6f6122de735403c0dddb12e8ac7e5a06a87345e2 100644 (file)
--- a/client/router.js
+++ b/client/router.js
@@ -1,16 +1,22 @@
-import { createRouter, createWebHistory } from 'vue-router'\r
+import { createRouter, createWebHistory } from "vue-router";\r
 \r
-import HomeView from '/views/HomeView.vue'\r
+import HomeView from "/views/HomeView.vue";\r
+import LoginView from "/views/LoginView.vue";\r
 \r
 const router = createRouter({\r
   history: createWebHistory(import.meta.env.BASE_URL),\r
   routes: [\r
     {\r
-      path: '/',\r
-      name: 'home',\r
-      component: HomeView\r
-    }\r
-  ]\r
-})\r
+      path: "/login",\r
+      name: "login",\r
+      component: LoginView,\r
+    },\r
+    {\r
+      path: "/",\r
+      name: "home",\r
+      component: HomeView,\r
+    },\r
+  ],\r
+});\r
 \r
-export default router\r
+export default router;\r

diff --git a/client/views/HomeView.vue b/client/views/HomeView.vue
index 674fa8408e7ad168256912e665687f7ec9c47957..7a664a8fce96f270a2e13cc738041324fb22eade 100644 (file)
--- a/client/views/HomeView.vue
+++ b/client/views/HomeView.vue
@@ -1,9 +1,15 @@
 <template>\r
-  <div class="flex h-full flex-col items-center justify-center">\r
-    <SearchInput />\r
+  <div class="h-full">\r
+    <NavBar hide-logo />\r
+    <div class="flex h-full flex-col items-center justify-center">\r
+      <Logo class="mb-5" />\r
+      <SearchInput class="shadow-[0_0_20px] shadow-theme-shadow" />\r
+    </div>\r
   </div>\r
 </template>\r
 \r
 <script setup>\r
+import Logo from "../components/Logo.vue";\r
 import SearchInput from "../components/SearchInput.vue";\r
+import NavBar from "../partials/NavBar.vue";\r
 </script>\r

diff --git a/client/views/LoginView.vue b/client/views/LoginView.vue
new file mode 100644 (file)
index 0000000..000dad4
--- /dev/null
+++ b/client/views/LoginView.vue
@@ -0,0 +1 @@
+<template>Login</template>