Skip to content

Commit d28ee2e

Browse files
wjohnstowjohnsto
committed
feat: new navbar for desktop and mobile
1 parent 4fb0eb2 commit d28ee2e

13 files changed

+310
-306
lines changed

‎layouts/partials/header.html‎

Lines changed: 65 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<header class="sticky top-0 z-50 w-full border-b border-redis-pen-300 bg-white text-midnight-900 font-mono text-[15px] flex justify-center">
2-
{{/* {{ partial "banner.html" . }} */}}
1+
<header
2+
class="sticky top-0 z-50 w-full border-b border-redis-pen-300 bg-white text-midnight-900 font-mono text-[15px] flex justify-center">
3+
{{/* {{ partial "banner.html" . }} */}}
34
<div class="flex h-[70px] px-4 lg:pl-11 lg:pr-0 items-center self-center grow">
45
<a class="relative text-redis-red-500 w-[82px] -mt-[5px] mr-[4px]" href="https://redis.io/">
56
{{ partial "icons/logo-script.html" }}
@@ -9,121 +10,90 @@
910
<div class="group h-full px-2 xl:px-[14px]">
1011
<div class="flex flex-row h-full items-center cursor-pointer w-[10ch] justify-between">
1112
<span class="inline-block group-hover:font-bold">Products</span>
12-
<span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
13+
<span
14+
class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{
15+
partial "icons/caret.html" }}</span>
1316
</div>
1417
{{ partial "header/products-dropdown.html" . }}
1518
</div>
1619
<div class="group h-full px-2 xl:px-[14px]">
1720
<div class="flex flex-row h-full items-center cursor-pointer w-[11ch] justify-between">
18-
<span class="inline-block group-hover:font-bold">Solutions</span>
19-
<span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
21+
<span class="inline-block group-hover:font-bold">Resources</span>
22+
<span
23+
class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{
24+
partial "icons/caret.html" }}</span>
2025
</div>
21-
{{ partial "header/solutions-dropdown.html" . }}
22-
</div>
23-
<div class="group h-full px-2 xl:px-[14px]">
24-
<div class="flex flex-row h-full items-center cursor-pointer w-[9ch] justify-between">
25-
<span class="inline-block group-hover:font-bold">Support</span>
26-
<span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
27-
</div>
28-
{{ partial "header/support-dropdown.html" . }}
29-
</div>
30-
<div class="group h-full px-2 xl:px-[14px]">
31-
<div class="flex flex-row h-full items-center cursor-pointer w-[9ch] justify-between">
32-
<span class="inline-block group-hover:font-bold">Company</span>
33-
<span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
34-
</div>
35-
{{ partial "header/company-dropdown.html" . }}
36-
</div>
37-
<div class="group h-full px-2 xl:px-[14px]">
38-
<div class="flex flex-row h-full items-center cursor-pointer w-[6ch] justify-between">
39-
<span class="inline-block group-hover:font-bold">Docs</span>
40-
<span class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{ partial "icons/caret.html" }}</span>
41-
</div>
42-
{{ partial "header/docs-dropdown.html" . }}
26+
{{ partial "header/resources-dropdown.html" . }}
4327
</div>
4428
</div>
45-
<a class="hidden lg:flex group flex-row items-center pl-2 xl:pl-[14px]" href="https://redis.io/pricing"><span class="group-hover:font-bold">Pricing</span></a>
29+
<a class="hidden lg:flex group flex-row items-center px-4" href="https://redis.io/docs/"><span
30+
class="group-hover:font-bold">Docs</span></a>
31+
<a class="hidden lg:flex group flex-row items-center px-4" href="https://redis.io/pricing/"><span
32+
class="group-hover:font-bold">Pricing</span></a>
4633
</div>
4734

4835
<div class="h-full flex gap-[18px] xl:gap-7 items-center text-center">
4936
<button id="search-button" type="button" class="p-1 mt-1 transition-colors hover:text-redis-red-500">
5037
{{ partial "icons/search.html" }}
5138
</button>
52-
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500" href="https://app.redislabs.com/">Login</a>
53-
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500" href="https://redis.io/meeting/">Book a meeting</a>
54-
<a class="hidden lg:inline-flex transition-colors hover:duration-0 duration-500 ease-out items-center justify-center bg-redis-red-500 hover:bg-redis-yellow-500 hover:text-midnight-900 h-full px-[27px]" href="https://redis.io/try-free/">Try Redis</a>
55-
<button data-menu-toggle aria-expanded="false" type="button" class="menu-toggle lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
56-
<span class="sr-only">Open main menu</span>
39+
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500"
40+
href="https://cloud.redis.io/">Login</a>
41+
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500" href="https://redis.io/meeting/">Book a
42+
meeting</a>
43+
<a class="hidden lg:inline-flex transition-colors hover:duration-0 duration-500 ease-out items-center justify-center bg-redis-red-500 hover:bg-redis-yellow-500 hover:text-midnight-900 h-full px-[27px]"
44+
href="https://redis.io/try-free/">Try Redis</a>
45+
<button data-menu-toggle aria-expanded="false" type="button"
46+
class="menu-toggle lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
47+
<span class="sr-only">Open main menu</span>
5748
{{ partial "icons/hamburger.html" }}
5849
</button>
5950
</div>
60-
51+
6152
</div>
6253

63-
<div data-menu class="hidden overflow-auto lg:hidden absolute top-0 left-0 w-screen h-screen bg-white z-50">
64-
<div class="sticky h-fit top-0 w-full bg-white border-b border-redis-pen-300 font-mono text-sm flex justify-center">
65-
<div class="flex h-[70px] px-4 lg:pl-11 lg:pr-0 justify-between self-center grow">
66-
<div class="h-full flex gap-6 items-center">
67-
<a id="headerLogo" class="relative mr-4 transition-colors text-redis-red-500 hover:text-redis-red-600 w-[82px]" href="https://redis.io/">
68-
{{ partial "icons/logo-script.html" }}
69-
</a>
70-
<button id="headerBack" class="hidden flex flex-row items-center" onclick="openPage(null)">
71-
<span class="inline-block rotate-90 text-redis-red-500">{{ partial "icons/caret.html" }}</span><span class="ml-2">Back</span>
54+
<nav data-menu
55+
class="hidden absolute left-0 top-[70px] h-[calc(100vh-70px)] w-full overflow-y-auto bg-white pb-12 xl:hidden">
56+
<ul class="space-y-4 bg-white p-4">
57+
<li data-products-mobile-menu-toggle aria-expanded="false" class="border-b border-b-redis-pen-300 py-4 last:border-none">
58+
<div class="flex items-center justify-between"><span class="text-lg font-medium">Products</span>
59+
<button>
60+
<span data-products-mobile-menu-open-icon>{{ partial "icons/plus-red.html" }}</span>
61+
<span data-products-mobile-menu-close-icon class="hidden">{{ partial "icons/minus-red.html" }}</span>
7262
</button>
7363
</div>
74-
75-
<div class="h-full flex gap-7 items-center text-center">
76-
<button id="search-button" type="button" class="p-1 mt-1 transition-colors hover:text-redis-red-500">
77-
{{ partial "icons/search.html" }}
78-
</button>
79-
<button data-menu-toggle aria-expanded="false" type="button" class="menu-toggle lg:hidden p-1.5 mt-1 transition-colors hover:text-redis-red-500">
80-
<span class="sr-only">Close main menu</span>
81-
{{ partial "icons/x-mobile.html" }}
64+
{{ partial "header/products-mobile.html" }}
65+
</li>
66+
<li data-resources-mobile-menu-toggle aria-expanded="false" class="border-b border-b-redis-pen-300 py-4 last:border-none">
67+
<div class="flex items-center justify-between"><span class="text-lg font-medium">Resources</span>
68+
<button>
69+
<span data-resources-mobile-menu-open-icon>{{ partial "icons/plus-red.html" }}</span>
70+
<span data-resources-mobile-menu-close-icon class="hidden">{{ partial "icons/minus-red.html" }}</span>
8271
</button>
8372
</div>
84-
</div>
85-
</div>
86-
<div id="headerMenu" class="mt-16">
87-
<div class="flex flex-col gap-6 px-4 py-6">
88-
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('products')">
89-
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Products</span><span class="inline-block ml-2 text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
90-
</button>
91-
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('solutions')">
92-
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Solutions</span><span class="inline-block ml-2 text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
93-
</button>
94-
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('support')">
95-
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Support</span><span class="inline-block ml-2 text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
96-
</button>
97-
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('company')">
98-
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Company</span><span class="inline-block ml-2 text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
99-
</button>
100-
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('docs')">
101-
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Docs</span><span class="inline-block ml-2 text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
102-
</button>
103-
<a class="group flex-row items-center" href="https://redis.io/pricing"><span class="group-hover:font-bold group-hover:tracking-tight">Pricing</span></a>
104-
</div>
105-
<div class="flex flex-col gap-6 px-4 text-center mt-16 max-w-[360px] mx-auto">
106-
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/try-free/" "Text" "Try Redis" "Width" "full") }}
107-
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/meeting/" "Text" "Book a meeting" "Width" "full" "AltColors" true) }}
108-
<a class="font-mono text-sm hover:font-bold hover:text-redis-yellow-500" href="">Login →</a>
109-
</div>
110-
</div>
111-
<div id="productsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
112-
{{ partial "header/products-dropdown.html" }}
113-
</div>
114-
<div id="solutionsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
115-
{{ partial "header/solutions-dropdown.html" }}
116-
</div>
117-
<div id="supportPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
118-
{{ partial "header/support-dropdown.html" }}
119-
</div>
120-
<div id="companyPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
121-
{{ partial "header/company-dropdown.html" }}
122-
</div>
123-
<div id="docsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
124-
{{ partial "header/docs-dropdown.html" }}
125-
</div>
126-
</div>
73+
{{ partial "header/resources-mobile.html" }}
74+
</li>
75+
<li class="border-b border-b-redis-pen-300">
76+
<div class="flex items-center justify-between"><a href="https://redis.io/docs/" class="block py-4 w-full text-lg font-medium">Docs</a></div>
77+
</li>
78+
<li>
79+
<div class="flex items-center justify-between"><a href="https://redis.io/pricing/" class="block py-4 w-full text-lg font-medium">Pricing</a></div>
80+
</li>
81+
</ul>
82+
<ul class="pt-6">
83+
<li class="mx-auto flex w-11/12 text-center"><a
84+
class="my-2 w-full rounded-md border border-redis-pen-600 bg-redis-yellow-500 py-3 text-black active:bg-redis-pen-800 active:text-white"
85+
href="https://redis.io/try-free/">Try Redis</a></li>
86+
<li class="mx-auto flex w-11/12 text-center"><a
87+
class="my-2 w-full rounded-md border border-redis-pen-600 py-3 active:bg-redis-pen-800 active:text-white"
88+
href="https://redis.io/meeting/">Book a meeting</a></li>
89+
<li class="mx-auto flex w-11/12 text-center">
90+
<a class="my-2 w-full py-3 active:text-redis-red-500" href="https://cloud.redis.io/">
91+
Login
92+
{{ partial "icons/arrow-right.html" }}
93+
</a>
94+
</li>
95+
</ul>
96+
</nav>
12797
</header>
12898

12999
<script>
@@ -140,4 +110,4 @@
140110
document.getElementById(page + 'Page').classList.remove('hidden');
141111
}
142112
}
143-
</script>
113+
</script>

‎layouts/partials/header/company-dropdown.html‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎layouts/partials/header/docs-dropdown.html‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)