From f445edfaa6df752f95c706e81f1af9bac65f691e Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 24 Jan 2024 16:26:45 +0100
Subject: [PATCH] ADD: Logo interaction

---
 src/components/Navbar.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 57d8f9f..93dde30 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="flex">
     <Menubar class="w-full h-20 rounded-none bg-zinc-950 border-l-0">
-      <div class="p-2 min-w-48">
+      <div class="p-2 min-w-48" @click="$refs.zerooneSubtitle.scramble(1,100,0); $refs.zerooneTitle.scramble(1,100,0)">
         <h1 class="text-3xl">
           <ScrambleText
-            text="ZERO/ONE" scramble-on-mount :scramble-amount="1" :fill-interval="100"
-            :replace-interval="100" />
+            ref="zerooneTitle"
+            text=" ZERO/ONE" scramble-on-mount :scramble-amount="1" :fill-interval="100"
+            :replace-interval="100"
+          />
         </h1>
         <p class="text-xs text-muted-foreground">
-          <ScrambleText  text="Haptic Configuration Tool" scramble-on-mount scramble-amount="1" fill-interval="35" replace-interval="40" />
+          <ScrambleText
+            ref="zerooneSubtitle"
+            text="Haptic Configuration Tool" scramble-on-mount scramble-amount="1" fill-interval="35"
+            replace-interval="40" />
         </p>
       </div>
       <MenubarMenu>