Skip to content

Commit

Permalink
update the footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@leamsigc
leamsigc committed Nov 3, 2024
1 parent 8081640 commit e2ef38d
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 173 deletions.
91 changes: 21 additions & 70 deletions app/components/content/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,12 @@ const { data } = await useAsyncData("nav_en", () =>
:class="{
'shadow-light': mode.value === 'light',
'shadow-dark': mode.value === 'dark',
}"
>
<header
:class="{
'w-[90%] md:w-[70%] lg:w-[75%] lg:max-w-screen-2xl mx-auto sticky z-40 flex justify-between items-center p-2 ': true,
}"
>
}">
<header :class="{
'w-[90%] md:w-[70%] lg:w-[75%] lg:max-w-screen-2xl mx-auto sticky z-40 flex justify-between items-center p-2 ': true,
}">
<NuxtLink v-if="data" href="/" class="font-bold text-lg flex items-center">
<NuxtImg
:src="data.logo"
:alt="data.logoAlt"
class="w-40 rounded-full"
width="160"
height="60"
/>
<NuxtImg :src="data.logo" :alt="data.logoAlt" class="w-40 rounded-full" width="160" height="60" />
</NuxtLink>
<!-- Mobile -->
<div class="flex items-center xl:hidden">
Expand All @@ -49,34 +40,20 @@ const { data } = await useAsyncData("nav_en", () =>
<Icon name="lucide:menu" class="cursor-pointer" @click="isOpen = true" />
</UiSheetTrigger>

<UiSheetContent
side="left"
class="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card"
>
<UiSheetContent side="left" class="flex flex-col justify-between rounded-tr-2xl rounded-br-2xl bg-card">
<div>
<UiSheetHeader class="mb-4 ml-4">
<UiSheetTitle class="flex items-center">
<NuxtLink href="/" class="flex items-center">
<NuxtImg
v-if="data"
:src="data.logo"
:alt="data.logoAlt"
class="w-40 rounded-full"
width="160"
height="60"
/>
<NuxtImg v-if="data" :src="data.logo" :alt="data.logoAlt" class="w-40 rounded-full" width="160"
height="60" />
</NuxtLink>
</UiSheetTitle>
</UiSheetHeader>

<div v-if="data" class="flex flex-col gap-2">
<UiButton
v-for="{ href, name } in data.ShortLinks"
:key="name"
as-child
variant="ghost"
class="justify-start text-base"
>
<UiButton v-for="{ href, name } in data.ShortLinks" :key="name" as-child variant="ghost"
class="justify-start text-base">
<NuxtLink :href="href" @click="isOpen = false">
{{ name }}
</NuxtLink>
Expand Down Expand Up @@ -112,40 +89,23 @@ const { data } = await useAsyncData("nav_en", () =>
</UiNavigationMenuTrigger>
<UiNavigationMenuContent>
<div
class="grid grid-cols-1 gap-5 bg-background p-6 py-5 ring-1 ring-muted lg:w-[750px] lg:grid-cols-2 xl:w-[1000px] xl:grid-cols-3"
>
<NuxtImg
:src="menuLink.image"
alt="Beach"
class="h-full w-full rounded-md object-cover"
/>
<div
v-for="(item, index) in menuLink.children"
:key="`${item.name}-${index}`"
>
class="grid grid-cols-1 gap-5 bg-background p-6 py-5 ring-1 ring-muted lg:w-[750px] lg:grid-cols-2 xl:w-[1000px] xl:grid-cols-3">
<NuxtImg :src="menuLink.image" alt="Beach" class="h-full w-full rounded-md object-cover" />
<div v-for="(item, index) in menuLink.children" :key="`${item.name}-${index}`">
<p class="mb-5 text-sm font-semibold capitalize text-primary">
{{ item.name }}
</p>
<ul class="flex w-full flex-col gap-2">
<li v-for="(child, k) in item.children" :key="k">
<UiNavigationMenuLink class="data-[active]:bg-muted/80" as-child>
<NuxtLink
:to="child.href"
class="flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
>
<Icon
v-if="child.icon"
:name="child.icon"
class="mt-px h-5 w-5 shrink-0 text-primary"
/>
<NuxtLink :to="child.href"
class="flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50">
<Icon v-if="child.icon" :name="child.icon" class="mt-px h-5 w-5 shrink-0 text-primary" />
<div class="flex flex-col gap-1.5 leading-none">
<p class="text-sm font-semibold">
{{ child.name }}
</p>
<p
class="text-sm text-muted-foreground"
v-html="child.description"
/>
<p class="text-sm text-muted-foreground" v-html="child.description" />
</div>
</NuxtLink>
</UiNavigationMenuLink>
Expand All @@ -162,21 +122,12 @@ const { data } = await useAsyncData("nav_en", () =>
<div class="hidden lg:flex">
<ToggleTheme />

<UiButton as-child size="sm" variant="ghost" aria-label="View on GitHub">
<NuxtLink
aria-label="View on GitHub"
href="https://github.com/leoMirandaa/shadcn-vue-landing-page.git"
target="_blank"
>
<Icon name="mdi:github" />
<UiButton as-child size="sm" variant="ghost" :aria-label="action.label" v-for="action in data.actions">
<NuxtLink :aria-label="action.label" :href="action.href" :target="_blank">
<Icon :name="action.icon" />
{{ action.name }}
</NuxtLink>
</UiButton>
<UiButton as-child size="sm" variant="ghost" aria-label="View on GitHub">
<NuxtLink aria-label="Login" to="/login"> Login </NuxtLink>
</UiButton>
<UiButton as-child size="sm" variant="ghost" aria-label="Register">
<NuxtLink aria-label="Register" to="/register"> Register </NuxtLink>
</UiButton>
</div>
</header>
</section>
Expand Down
92 changes: 18 additions & 74 deletions app/components/content/TheFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
* @todo [ ] Integration test.
* @todo [✔] Update the typescript.
*/
// TODO: Use the nav file for the footer links
const { data } = await useAsyncData("footer_links", () =>
queryContent("/").where({ _partial: true, title: "nav" })
.only(["footerLinks", "logo", "logoAlt"])
.findOne()
);
</script>

<template>
Expand All @@ -19,72 +23,18 @@
<div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-x-12 gap-y-8">
<div class="col-span-full xl:col-span-2">
<a href="#" class="flex font-bold items-center">
<Icon
name="lucide:arrow-down"
class="bg-gradient-to-tr from-primary via-primary/70 to-primary rounded-lg w-9 h-9 mr-2 border text-white"
/>

<h3 class="text-2xl">Shadcn-Vue</h3>
<NuxtLink v-if="data" href="/" class="font-bold text-lg flex items-center">
<NuxtImg :src="data.logo" :alt="data.logoAlt" class="w-64 rounded-full" width="160" height="60" />
</NuxtLink>
</a>
</div>

<div class="flex flex-col gap-2">
<h3 class="font-bold text-lg">Contact</h3>
<div>
<a href="#" class="opacity-60 hover:opacity-100"> Github </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Twitter </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Instagram </a>
</div>
</div>

<div class="flex flex-col gap-2">
<h3 class="font-bold text-lg">Platforms</h3>
<div>
<a href="#" class="opacity-60 hover:opacity-100"> iOS </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Android </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Web </a>
</div>
</div>

<div class="flex flex-col gap-2">
<h3 class="font-bold text-lg">Help</h3>
<div>
<a href="#" class="opacity-60 hover:opacity-100"> Contact Us </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> FAQ </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Feedback </a>
</div>
</div>

<div class="flex flex-col gap-2">
<h3 class="font-bold text-lg">Socials</h3>
<div>
<a href="#" class="opacity-60 hover:opacity-100"> Twitch </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Discord </a>
</div>

<div>
<a href="#" class="opacity-60 hover:opacity-100"> Dribbble </a>
<div class="flex flex-col gap-2 " v-for="{ title, links } in data.footerLinks" :key="title">
<h3 class="font-bold text-lg">{{ title }}</h3>
<div v-for="{ name, url, icon } in links" :key="name">
<NuxtLink :href="url" class="opacity-60 hover:opacity-100">
{{ name }}
</NuxtLink>
</div>
</div>
</div>
Expand All @@ -93,19 +43,13 @@
<section className="">
<h3 class="">
&copy; 2024 Designed and developed by
<a
target="_blank"
href="https://github.com/leoMirandaa"
className="text-primary transition-all border-primary hover:border-b-2"
>
<a target="_blank" href="https://github.com/leoMirandaa"
className="text-primary transition-all border-primary hover:border-b-2">
Leo Miranda
</a>
Port to nuxt 4 by
<a
target="_blank"
href="https://github.com/leamsigc"
className="text-primary transition-all border-primary hover:border-b-2"
>
<a target="_blank" href="https://github.com/leamsigc"
className="text-primary transition-all border-primary hover:border-b-2">
Leamsigc
</a>
</h3>
Expand Down
81 changes: 52 additions & 29 deletions content/_nav.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,23 @@ MenuLinks:
icon: "lucide:flag"
href: "/tools/paid/ai"
- name: "Testimonials"
href: "#testimonials"
href: "/#testimonials"
- name: "Blogs"
href: "/blog"
- name: "Contact"
href: "#contact"
href: "/#contact"
- name: "FAQ"
href: "#faq"
href: "/#faq"

ShortLinks:
- name: "Tools"
href: "/tools"
- name: "Press"
href: "#"
- name: "Careers"
href: "#"
- name: "Legal"
href: "#"
- name: "Home"
href: "/"
- name: "Blogs"
href: "/blog"
- name: "Login"
href: "/login"
- name: "Sign Up"
href: "/register"
- name: "Support"
href: "#"
- name: "Sitemap"
Expand All @@ -65,26 +65,49 @@ socialMedias:
url: https://www.instagram.com/leamsigc
icon: "instagram"
footerLinks:
- title: About Us
- title: Contact
links:
- name: About Us
url: /about
- name: Careers
url: /careers
- name: Blog
url: /blog
- name: Videos
url: /videos
- title: Legal
- name: Github
url: https://github.com/leamsigc/nuxt-better-auth-drizzle
icon: "lucide:github"
- name: Twitter
url: https://twitter.com/leamsigc
icon: "lucide:twitter"
- name: instagram
url: https://www.instagram.com/leamsigc
icon: "lucide:instagram"
- name: Youtube
url: https://www.youtube.com/@leamsigc
icon: "lucide:youtube"
- title: Platform
links:
- name: Terms
url: /terms
- name: Privacy
url: /privacy
- title: Contact
- name: iOS
url: /
- name: Android
url: /
- name: Web
url: /
- title: Help
links:
- name: Contact
- name: Contact us
url: /contact
- name: Support
url: /support
- name: FAQ
url: /#faq
- name: Feedback
url: /#feedback

actions:
- name: ''
href: https://github.com/leamsigc/nuxt-better-auth-drizzle
icon: "lucide:github"
label: "View on GitHub"
target: _blank
- name: 'Login'
href: "/login"
icon: ""
label: "Login to your account"
- name: 'Register'
href: "/register"
label: "Register an account"
icon: ""
---

0 comments on commit e2ef38d

Please sign in to comment.