Skip to content

Commit

Permalink
Merge pull request #72 from LittleFoxCompany/feature/website-cleanups
Browse files Browse the repository at this point in the history 
Feature/website cleanups
  • Loading branch information
@jrmybtlr
jrmybtlr authored May 15, 2024
2 parents e0b581d + d6ea0fb commit 035e89d
Show file tree
Hide file tree
Showing 5 changed files with 67 additions and 4,960 deletions.
2 changes: 1 addition & 1 deletion nuxt-web/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

body {
@apply min-h-screen w-screen select-text overflow-x-clip scroll-smooth bg-white text-white
@apply relative min-h-screen w-screen select-text overflow-x-clip scroll-smooth bg-white text-white
antialiased selection:bg-indigo-800 selection:text-white dark:bg-zinc-950;

&* {
Expand Down
53 changes: 32 additions & 21 deletions nuxt-web/components/nav/Dropdown.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,40 @@
<template>
<div @mouseover="show = true" @mouseleave="show = false" @click="show = false" class="group relative isolate z-50 flex cursor-pointer">
<!-- Title -->
<div class="flex items-center gap-1">
<span class="text-lg font-semibold">
{{ label }}
</span>
<Icon name="heroicons:chevron-down-16-solid" class="h-4 w-4 text-indigo-400 transition-all group-hover:rotate-180" />
</div>
<!-- @mouseover="show = true" @mouseleave="show = false" -->
<div ref="dropdown" @click="show = !show" class="group isolate z-50 flex cursor-pointer">
<!-- Title -->
<div class="flex items-center gap-1">
<span class="text-lg font-semibold">
{{ label }}
</span>
<Icon name="heroicons:chevron-down-16-solid" class="h-4 w-4 text-indigo-400 transition-all"
:class="show ? 'rotate-180' : 'rotate-0'"
/>
</div>

<!-- Links -->
<div
class="absolute bottom-0 left-0 z-50 flex rounded-lg border border-black/5 bg-white/80 p-1 shadow-2xl backdrop-blur transition-all duration-300 md:left-1/2 md:-translate-x-1/2 dark:border-white/5 dark:bg-zinc-900/95"
:class="show ? 'pointer-events-auto translate-y-full opacity-100' : 'pointer-events-none translate-y-full opacity-0'">
<slot />
</div>
<!-- Links -->
<Teleport to="body">
<div
v-if="show"
class="absolute top-16 left-1/2 -translate-x-1/2 max-md:w-[90vw] z-50 flex rounded-lg border border-black/5 bg-white/80 p-1 shadow-2xl backdrop-blur transition-all duration-300 dark:border-white/5 dark:bg-zinc-900/95"
:class="show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'">
<slot />
</div>
</Teleport>
</div>
</template>

<script setup lang="ts">
const props = defineProps({
label: {
type: String,
required: true
}
})
const props = defineProps({
label: {
type: String,
required: true
}
})
const show = ref(false)
const dropdown = ref(null)
const show = ref(false)
onClickOutside(dropdown, () => {
show.value = false
})
</script>
67 changes: 34 additions & 33 deletions nuxt-web/components/nav/main.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,47 @@
<template>
<nav>
<div class="container mx-auto flex items-center justify-between py-6 text-gray-800 dark:text-white">
<div class="flex grow items-center gap-6">
<NuxtLink to="/" prefetch class="shrink-0">
<LogoFull class="h-6 max-md:hidden" />
<LogoMark class="h-6 md:hidden" />
</NuxtLink>
<div class="container mx-auto grid grid-cols-3 items-center justify-between py-6 text-gray-800 dark:text-white">
<!-- Logo -->
<NuxtLink to="/" prefetch>
<LogoFull class="h-6 max-md:hidden" />
<LogoMark class="h-6 md:hidden" />
</NuxtLink>

<div class="flex grow items-center gap-4 md:justify-center md:gap-6">
<NavDropdown label="Docs">
<div class="flex w-full items-stretch gap-3 divide-x divide-white/5 p-1">
<div class="flex shrink flex-col">
<NavDropdownItem v-for="link in introLinks" :key="link.id" :to="link._path">
<!-- Links -->
<div class="flex grow items-center gap-4 justify-end md:justify-center md:gap-6">
<NavDropdown label="Docs">
<div class="flex w-full items-stretch gap-3 divide-x divide-white/5 p-1">
<div class="flex shrink flex-col">
<NavDropdownItem v-for="link in introLinks" :key="link.id" :to="link._path">
<Icon :name="link.title" class="mt-1 h-5 w-5 shrink-0 text-white/50" />
<div>
{{ link.title }}
<div class="whitespace-nowrap text-xs text-gray-500 dark:text-white/50">{{ link.lead }}</div>
</div>
</NavDropdownItem>
</div>
</div>
</NavDropdown>

<NavDropdown label="Functions">
<div class="flex w-full items-stretch gap-3 divide-x divide-white/5 p-1">
<div class="flex w-fit md:w-[720px] flex-col">
<div class="grid grid-cols-2 md:grid-cols-3">
<NavDropdownItem v-for="link in docLinks" :key="link._path" :to="link._path">
<Icon :name="link.title" class="mt-1 h-5 w-5 shrink-0 text-white/50" />
<div>
{{ link.title }}
<div class="whitespace-nowrap text-xs text-gray-500 dark:text-white/50">{{ link.lead }}</div>
<div class="max-md:hidden whitespace-nowrap text-xs text-gray-500 dark:text-white/50">{{ link.lead }}</div>
</div>
</NavDropdownItem>
</div>
</div>
</NavDropdown>
<NavDropdown label="Functions">
<div class="flex w-full items-stretch gap-3 divide-x divide-white/5 p-1">
<div class="flex w-[720px] flex-col">
<div class="grid grid-cols-3">
<NavDropdownItem v-for="link in docLinks" :key="link._path" :to="link._path">
<Icon :name="link.title" class="mt-1 h-5 w-5 shrink-0 text-white/50" />
<div>
{{ link.title }}
<div class="whitespace-nowrap text-xs text-gray-500 dark:text-white/50">{{ link.lead }}</div>
</div>
</NavDropdownItem>
</div>
</div>
</div>
</NavDropdown>
</div>
</div>
</NavDropdown>
</div>

<!-- Right -->
<div class="flex items-center gap-2">
<!-- Actions -->
<div class="flex items-center justify-end gap-2">
<ThemeSwitch />
<Github />
</div>
Expand All @@ -49,6 +50,6 @@
</template>

<script setup lang="ts">
const introLinks = inject('intro-links')
const docLinks = inject('doc-links')
const introLinks = inject('intro-links')
const docLinks = inject('doc-links')
</script>
Binary file removed nuxt-web/public/cover.png
View file
Binary file not shown.
Loading

0 comments on commit 035e89d

Please sign in to comment.