update note display

src/components/TopBar.vue

@@ -2,6 +2,7 @@
 import Hamburger from '@/components/Hamburger.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import Logo from './Logo.vue'
+import { addNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -13,21 +14,26 @@ const emit = defineEmits<{
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div
-      class="w-in mx-auto flex w-full max-w-app items-center gap-3 text-white"
+      class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"
     >
       <div
-        class="flex w-sidebar items-center pl-3"
-        :class="sideBarCollapsed && 'w-fit'"
+        class="flex pl-3"
+        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
       >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
         />
-        <Logo class="ml-auto px-3 text-2xl" />
+        <Logo class="ml-auto pl-5 text-2xl" />
       </div>
-      <div class="mr-3 flex h-full flex-1 items-center gap-2 py-2.5">
+      <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
-        <button class="btn-outline btn-sm btn h-full text-white">+</button>
+        <button
+          class="btn-outline btn-sm btn h-full text-white"
+          @click="addNote('Untitled new note', '', true)"
+        >
+          <i class="fas fa-plus-circle text-[1.1rem]" />
+        </button>
         <button class="btn-outline btn-sm btn h-full text-white">
           Sign in
         </button>