docs: updated

This commit is contained in:
Leifer Mendez
2022-12-25 20:53:25 +01:00
parent 4be1906914
commit e4ed904a8b
16 changed files with 162 additions and 150 deletions

View File

@@ -1,28 +1,31 @@
import { component$, useStore } from '@builder.io/qwik'
import { component$, useContext, useStore } from '@builder.io/qwik'
import Logo from '~/components/atoms/Logo'
import { IconGithub } from '~/components/icons/IconGithub'
import ToggleTheme from '~/components/core/ToggleTheme'
import ToggleMenu from '~/components/core/ToggleMenu'
import { IconDiscord } from '../icons/IconDiscord'
import { GlobalStore } from '~/contexts'
export default component$(() => {
const store = useStore({
const storeScroll = useStore({
isScrolling: false,
})
const store = useContext(GlobalStore)
return (
<header
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all ${
store.isScrolling
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all border border-b-slate-100 dark:border-b-slate-800 border-x-0 border-t-0 ${
storeScroll.isScrolling
? ' md:bg-white/90 md:backdrop-blur-sm dark:md:bg-slate-900/90 bg-white dark:bg-slate-900'
: ''
}`}
id="header"
window:onScroll$={() => {
if (!store.isScrolling && window.scrollY >= 10) {
store.isScrolling = true
} else if (store.isScrolling && window.scrollY < 10) {
store.isScrolling = false
if (!storeScroll.isScrolling && window.scrollY >= 10) {
storeScroll.isScrolling = true
} else if (storeScroll.isScrolling && window.scrollY < 10) {
storeScroll.isScrolling = false
}
}}
>
@@ -41,46 +44,28 @@ export default component$(() => {
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
{/* <li class="dropdown">
<li class="dropdown">
<button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
Pages
Documentación
</button>
<ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
<li>
<a
class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
href="#"
>
Features
</a>
</li>
<li>
<a
class="font-medium md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
href="#"
>
Profile
</a>
</li>
<li>
<a
class="font-medium rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
href="#"
>
Pricing
</a>
</li>
{store.map((ctx) => {
return ctx.list.map((listCtx) => {
return (
<li>
<a
class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
href={listCtx.link}
>
{listCtx.name}
</a>
</li>
)
})
})}
</ul>
</li> */}
<li>
<a
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
href={'/docs'}
>
Documentación
</a>
</li>
<li>
{/* <li>
<a
target={'_blank'}
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
@@ -90,7 +75,7 @@ export default component$(() => {
>
Blog
</a>
</li>
</li> */}
<li class="md:hidden">
<a
target={'_blank'}