From a24fc5241ee1703bd0d6b0a536eb8ecd440900ae Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 25 Jun 2022 02:10:58 +0200
Subject: [PATCH] chore(docs): move icons into header but in container

---
 docs/src/.vuepress/theme/layouts/default.vue | 87 +++++++++-----------
 1 file changed, 40 insertions(+), 47 deletions(-)

diff --git a/docs/src/.vuepress/theme/layouts/default.vue b/docs/src/.vuepress/theme/layouts/default.vue
index aee4a1a9..f7c8307f 100644
--- a/docs/src/.vuepress/theme/layouts/default.vue
+++ b/docs/src/.vuepress/theme/layouts/default.vue
@@ -10,56 +10,49 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
 import ReactIcon from '~icons/logos/react'
 import GithubIcon from '~icons/carbon/logo-github'
 import DiscordIcon from '~icons/logos/discord-icon'
-
-const el = ref()
-const marginLeft = ref()
-
-onMounted(() => {
-  const bbox = el.value.getBoundingClientRect()
-  marginLeft.value = `-${bbox.width / 2}px`
-})
 </script>
 <template>
-  <XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
-    <div class="z-99 fixed bottom-6 left-1/2" ref="el" :style="{ marginLeft }">
-    <div class="bg-white flex justify-center items-center mx-2 gap-6 border-1 border-gray-500 px-4 py-2 rounded-lg shadow-lg">
-      <a
-        href="https://github.com/bcakmakoglu/vue-flow"
-        target="_blank" rel="noopener noreferrer"
-        aria-label="GitHub"
-        class="relative group cursor-pointer flex justify-center items-center"
-      >
-        <GithubIcon class="text-black dark:text-white text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-        <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
-            Contribute on GitHub!
-          </span>
-      </a>
-      <a
-        href="https://discord.gg/F4v6qE4Fuq"
-        target="_blank" rel="noopener noreferrer"
-        aria-label="Discord"
-        class="relative group cursor-pointer flex justify-center items-center"
-      >
-        <DiscordIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-        <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
-            Join the Discord server!
-          </span>
-      </a>
-      <a
-        href="https://reactflow.dev/"
-        target="_blank" rel="noopener noreferrer"
-        aria-label="React Flow"
-        class="relative group cursor-pointer flex justify-center items-center"
-      >
-        <ReactIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
-        <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
-            Check out the original React Flow by Wbkd!
-          </span>
-      </a>
-    </div>
-  </div>
-  </XyzTransition>
   <ParentLayout>
+    <template #navbar-before>
+      <XyzTransition appear-visible xyz="fade perspective-1 down ease-out-back duration-10">
+        <div class="border-1 border-gray-300 bg-white dark:bg-gray-800 dark:(shadow-gray-700 shadow-md) shadow-lg select-none flex justify-center items-center mx-2 gap-6 px-4 py-2 rounded-lg">
+          <a
+            href="https://github.com/bcakmakoglu/vue-flow"
+            target="_blank" rel="noopener noreferrer"
+            aria-label="GitHub"
+            class="bg-white rounded-full relative group cursor-pointer flex justify-center items-center"
+          >
+            <GithubIcon class="text-black text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
+            <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
+          Contribute on GitHub!
+        </span>
+          </a>
+          <a
+            href="https://discord.gg/F4v6qE4Fuq"
+            target="_blank" rel="noopener noreferrer"
+            aria-label="Discord"
+            class="relative group cursor-pointer flex justify-center items-center"
+          >
+            <DiscordIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
+            <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
+          Join the Discord server!
+        </span>
+          </a>
+          <a
+            href="https://reactflow.dev/"
+            target="_blank" rel="noopener noreferrer"
+            aria-label="React Flow"
+            class="relative group cursor-pointer flex justify-center items-center"
+          >
+            <ReactIcon class="text-xl transform group-hover:scale-125 transition transition-all ease duration-300" />
+            <span class="w-48 transition-opacity ease-in duration-200 opacity-0 group-hover:opacity-100 bg-black dark:bg-white text-white dark:text-black rounded-md p-2 absolute bottom-[25px] right-0 mt-2 mr-2 text-xs">
+          Check out the original React Flow by Wbkd!
+        </span>
+          </a>
+        </div>
+      </XyzTransition>
+      <div class="hidden md:(block w-8) lg:w-12" />
+    </template>
     <template #page-bottom>
       <div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
     </template>