Skip to content

Commit 0f5195d

Browse files
committed
responsive topnav
1 parent edfacf9 commit 0f5195d

1 file changed

Lines changed: 74 additions & 46 deletions

File tree

app/components/TopNav.vue

Lines changed: 74 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,81 @@ const dropdownId = useId()
1212
</script>
1313

1414
<template>
15-
<Navbar class="pt-3">
16-
<NavbarStart>
17-
<Logo />
18-
</NavbarStart>
15+
<Flex col class="relative">
16+
<Logo class="sm:hidden mt-3 max-w-8/12 pl-4"/>
17+
<NuxtLink
18+
class="absolute top-5 right-2 btn btn-sm btn-primary sm:hidden"
19+
target="_blank"
20+
to="https://app.feathers.dev/"
21+
>
22+
Sign In
23+
</NuxtLink>
1924

20-
<NavbarCenter>
21-
<Flex row items-center class="gap-6 rounded-box bg-base-100/10 p-3 px-12">
22-
<Dropdown hover v-model:open="isProductsDropdownOpen" placement="bottom" :random-id="dropdownId">
23-
<DropdownTarget class="flex justify-between cursor-pointer">
24-
Products
25-
<Icon name="feather:chevron-down" class="text-xl ml-1" />
26-
</DropdownTarget>
27-
<DropdownContent class="z-40 bg-base-content text-base-100 rounded-box mt-4 p-3 w-96">
28-
<List>
29-
<NuxtLink
30-
v-for="product in products" :key="product.title"
31-
class="list-row hover:bg-base-300/10 items-center"
32-
:to="product.link"
33-
>
34-
<Flex row items-center class="w-12 flex-shrink-0">
35-
<Icon v-if="product.icon" :name="product.icon" size="40" />
36-
<img v-else :src="product.meta.iconImage" class="size-9" />
25+
<Navbar class="pt-0 sm:pt-3 px-0">
26+
<NavbarStart >
27+
<Logo class="hidden sm:block" />
28+
</NavbarStart>
29+
30+
<NavbarCenter>
31+
<Flex row items-center class="gap-6 rounded-box bg-base-100/10 p-3 sm:px-12">
32+
<Dropdown hover v-model:open="isProductsDropdownOpen" placement="bottom" :random-id="dropdownId">
33+
<DropdownTarget class="flex justify-between cursor-pointer">
34+
Products
35+
<Icon name="feather:chevron-down" class="text-xl ml-1" />
36+
</DropdownTarget>
37+
<DropdownContent class="z-40 bg-base-content text-base-100 rounded-box mt-4 p-3 w-96 max-w-screen">
38+
<div>
39+
40+
<List>
41+
<NuxtLink
42+
v-for="product in products" :key="product.title"
43+
class="list-row hover:bg-base-300/10 items-center"
44+
:to="product.link"
45+
>
46+
<Flex row items-center class="w-12 flex-shrink-0">
47+
<Icon v-if="product.icon" :name="product.icon" size="40" />
48+
<img v-else :src="product.meta.iconImage" class="size-9" />
49+
</Flex>
50+
<div>
51+
<Text semibold lg>
52+
{{ product.title }}
53+
</Text>
54+
<div class="text-sm leading-tight opacity-60">
55+
{{ product.meta.menuDescription }}
56+
</div>
57+
</div>
58+
<Icon name="feather:chevron-right" size="24" />
59+
</NuxtLink>
60+
</List>
61+
<Flex row items-center class="sm:hidden gap-2 mt-4">
62+
<NuxtLink to="/blog" class="btn btn-outline flex-1">
63+
Blog
64+
</NuxtLink>
65+
<NuxtLink to="/help" class="btn btn-outline flex-1">
66+
Help
67+
</NuxtLink>
3768
</Flex>
38-
<div>
39-
<Text semibold lg>
40-
{{ product.title }}
41-
</Text>
42-
<div class="text-sm leading-tight opacity-60">
43-
{{ product.meta.menuDescription }}
44-
</div>
45-
</div>
46-
<Icon name="feather:chevron-right" size="24" />
47-
</NuxtLink>
48-
</List>
49-
</DropdownContent>
50-
</Dropdown>
51-
<NuxtLink to="/blog" class="hidden sm:block">
52-
Blog
53-
</NuxtLink>
54-
<NuxtLink to="/help" class="hidden sm:block">
55-
Help
56-
</NuxtLink>
57-
</Flex>
58-
</NavbarCenter>
69+
</div>
70+
</DropdownContent>
71+
</Dropdown>
72+
<NuxtLink to="/blog" class="hidden sm:block">
73+
Blog
74+
</NuxtLink>
75+
<NuxtLink to="/help" class="hidden sm:block">
76+
Help
77+
</NuxtLink>
78+
</Flex>
79+
</NavbarCenter>
5980

60-
<NavbarEnd>
61-
<NuxtLink class="btn btn-primary" target="_blank" to="https://app.feathers.dev/">Sign In</NuxtLink>
62-
</NavbarEnd>
63-
</Navbar>
81+
<NavbarEnd>
82+
<NuxtLink
83+
class="btn btn-primary hidden sm:flex"
84+
target="_blank"
85+
to="https://app.feathers.dev/"
86+
>
87+
Sign In
88+
</NuxtLink>
89+
</NavbarEnd>
90+
</Navbar>
91+
</Flex>
6492
</template>

0 commit comments

Comments
 (0)