From 0ecd4b680c243455f5856e3bb5d6f9a092c3cab5 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 9 Mar 2024 00:55:05 +0100
Subject: [PATCH] ADD: Save button reveal

---
 src/renderer/src/components/navbar/Navbar.vue | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/renderer/src/components/navbar/Navbar.vue b/src/renderer/src/components/navbar/Navbar.vue
index 2bf8213..2b22795 100644
--- a/src/renderer/src/components/navbar/Navbar.vue
+++ b/src/renderer/src/components/navbar/Navbar.vue
@@ -132,22 +132,24 @@
         </MenubarMenu>
       </div>
       <div class="grow" />
-      <div class="flex items-center gap-2 px-2">
-        <div v-if="numberOfChanges" class="text-sm">
-          <PenLine class="inline-block h-4" />{{ numberOfChanges }} Changes
+      <Transition name="fade">
+        <div v-if="store.connected" class="flex items-center gap-2 px-2">
+          <div v-if="numberOfChanges" class="text-sm">
+            <PenLine class="inline-block h-4" />{{ numberOfChanges }} Changes
+          </div>
+          <MenubarButton class="app-titlebar-button border-2"> Revert </MenubarButton>
+          <MenubarButton
+            :class="
+              numberOfChanges
+                ? 'border border-zinc-100 bg-zinc-300 text-zinc-950 hover:bg-zinc-200 hover:text-zinc-950'
+                : 'border-2'
+            "
+            class="app-titlebar-button"
+          >
+            Save
+          </MenubarButton>
         </div>
-        <MenubarButton class="app-titlebar-button border-2"> Revert </MenubarButton>
-        <MenubarButton
-          :class="
-            numberOfChanges
-              ? 'border border-zinc-100 bg-zinc-300 text-zinc-950 hover:bg-zinc-200 hover:text-zinc-950'
-              : 'border-2'
-          "
-          class="app-titlebar-button"
-        >
-          Save
-        </MenubarButton>
-      </div>
+      </Transition>
       <MenubarButton
         v-if="showDisconnectButton"
         class="app-titlebar-button border-2"
@@ -240,4 +242,16 @@ onMounted(() => {
 .app-titlebar-button {
   -webkit-app-region: no-drag;
 }
+.fade-enter-active {
+  transition: transform 500ms ease;
+  transition-delay: 1000ms;
+}
+.fade-leave-active {
+  transition: transform 250ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateY(-3.5rem);
+}
 </style>