chore(docs): move icons into header but in container
This commit is contained in:
bcakmakoglu
@@ -10,56 +10,49 @@ import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue'
|
|||||||
import ReactIcon from '~icons/logos/react'
|
import ReactIcon from '~icons/logos/react'
|
||||||
import GithubIcon from '~icons/carbon/logo-github'
|
import GithubIcon from '~icons/carbon/logo-github'
|
||||||
import DiscordIcon from '~icons/logos/discord-icon'
|
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>
|
</script>
|
||||||
<template>
|
<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>
|
<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>
|
<template #page-bottom>
|
||||||
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
|
<div class="page-footer">MIT Licensed | Copyright © 2021-present Burak Cakmakoglu</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user