From: Adam Dullage <redacted>
Date: Thu, 25 Apr 2024 21:05:58 +0000 (+0100)
Subject: NavBar and SearchInput improvements
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=55207be1b72bed213af67b13024f3a76d297fb89;p=flatnotes.git

NavBar and SearchInput improvements
---

diff --git a/client/App.vue b/client/App.vue
index fc7ffa3..507633d 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
-    <NavBar />
     <RouterView />
   </div>
 </template>
 
 <script setup>
 import { RouterView } from "vue-router";
-import NavBar from "/partials/NavBar.vue";
 </script>
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 250abf3..2a870cb 100644
--- a/client/components/Button.vue
+++ b/client/components/ButtonComponent.vue
@@ -1,27 +1,27 @@
-<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>
+<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 c5844f8..3a07bcb 100644
--- a/client/components/SearchInput.vue
+++ b/client/components/SearchInput.vue
@@ -1,23 +1,24 @@
 <template>
-  <form class="flex" v-on:submit.prevent="search">
+  <form class="flex w-full max-w-[500px]" v-on:submit.prevent="search">
     <input
       type="text"
-      class="rounded rounded-r-none border border-theme-border bg-theme-background-elevated px-3 py-2"
+      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"
       placeholder="Search"
     />
-    <Button
+    <ButtonComponent
       :iconPath="mdilMagnify"
       iconSize="1.75em"
-      class="rounded-l-none border border-l-0 border-theme-border"
+      class="rounded-l-none border border-l-0 border-theme-border focus:outline-none focus:ring-1"
     />
   </form>
 </template>
 
 <script setup>
-import Button from "./Button.vue";
 import { mdilMagnify } from "@mdi/light-js";
 
+import ButtonComponent from "./ButtonComponent.vue";
+
 function search() {
-  console.log("searching...");
+  console.log("searching...");  // TODO: Implement search functionality
 }
 </script>
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 1c2b456..21c0be7 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,21 +1,28 @@
 <template>
   <nav class="flex justify-between">
-    <Logo></Logo>
+    <RouterLink to="/">
+      <Logo :class="{ invisible: hideLogo }"></Logo>
+    </RouterLink>
     <div>
-      <Button
+      <ButtonComponent
         :iconPath="mdilPlusCircle"
         label="New Note"
         @click="toggleTheme"
-      ></Button>
+      />
     </div>
   </nav>
 </template>
 
 <script setup>
 import { mdilPlusCircle } from "@mdi/light-js";
+import { RouterLink } from "vue-router";
 
-import Button from "/components/Button.vue";
-import Logo from "/components/Logo.vue";
+import ButtonComponent from "../components/ButtonComponent.vue";
+import Logo from "../components/Logo.vue";
+
+defineProps({
+  hideLogo: Boolean
+});
 
 function toggleTheme() {
   document.body.classList.toggle("dark-theme");
diff --git a/client/router.js b/client/router.js
index f425d9a..6f6122d 100644
--- a/client/router.js
+++ b/client/router.js
@@ -1,16 +1,22 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
-import HomeView from '/views/HomeView.vue'
+import HomeView from "/views/HomeView.vue";
+import LoginView from "/views/LoginView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
-      component: HomeView
-    }
-  ]
-})
+      path: "/login",
+      name: "login",
+      component: LoginView,
+    },
+    {
+      path: "/",
+      name: "home",
+      component: HomeView,
+    },
+  ],
+});
 
-export default router
+export default router;
diff --git a/client/views/HomeView.vue b/client/views/HomeView.vue
index 674fa84..7a664a8 100644
--- a/client/views/HomeView.vue
+++ b/client/views/HomeView.vue
@@ -1,9 +1,15 @@
 <template>
-  <div class="flex h-full flex-col items-center justify-center">
-    <SearchInput />
+  <div class="h-full">
+    <NavBar hide-logo />
+    <div class="flex h-full flex-col items-center justify-center">
+      <Logo class="mb-5" />
+      <SearchInput class="shadow-[0_0_20px] shadow-theme-shadow" />
+    </div>
   </div>
 </template>
 
 <script setup>
+import Logo from "../components/Logo.vue";
 import SearchInput from "../components/SearchInput.vue";
+import NavBar from "../partials/NavBar.vue";
 </script>
diff --git a/client/views/LoginView.vue b/client/views/LoginView.vue
new file mode 100644
index 0000000..000dad4
--- /dev/null
+++ b/client/views/LoginView.vue
@@ -0,0 +1 @@
+<template>Login</template>