Skip to content

Menu changes #998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Menu changes #998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
309e2a2
Update header.html
mich-elle-luna Dec 17, 2024
afe79ef
Update products-dropdown.html
mich-elle-luna Dec 17, 2024
9fd0a0f
Update and rename docs-dropdown.html to learn-dropdown.html
mich-elle-luna Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 19 additions & 57 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,25 @@
<a class="relative text-redis-red-500 w-[82px] -mt-[5px] mr-[4px]" href="https://redis.io/">
{{ partial "icons/logo-script.html" }}
</a>
<div class="h-full flex items-center mx-4 grow">
<div class="hidden lg:flex flex-row h-full items-center">
<div class="group h-full px-2 xl:px-[14px]">

<div class="hidden lg:flex flex-row h-full items-center">
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[10ch] justify-between">
<span class="inline-block group-hover:font-bold">Products</span>
<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>
</div>
{{ partial "header/products-dropdown.html" . }}
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full ml-2 mr-4 pr-4 items-center cursor-pointer w-[10ch]">
<span class="inline-block group-hover:font-bold">Resources</span>
<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>
</div>
{{ partial "header/learn-dropdown.html" . }}
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[11ch] justify-between">
<span class="inline-block group-hover:font-bold">Solutions</span>
<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>
</div>
{{ partial "header/solutions-dropdown.html" . }}
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[9ch] justify-between">
<span class="inline-block group-hover:font-bold">Support</span>
<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>
</div>
{{ partial "header/support-dropdown.html" . }}
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[9ch] justify-between">
<span class="inline-block group-hover:font-bold">Company</span>
<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>
</div>
{{ partial "header/company-dropdown.html" . }}
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[6ch] justify-between">
<span class="inline-block group-hover:font-bold">Docs</span>
<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>
</div>
{{ partial "header/docs-dropdown.html" . }}
</div>
</div>
<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>
</div>
<a class="hidden lg:flex group flex-row items-center ml-2 mr-2 pr-2" href="https://redis.io/docs/latest/"><span class="group-hover:font-bold">Docs</span></a>
<a class="hidden lg:flex group flex-row items-center ml-2 pl-4 xl:pl-[14px]" href="https://redis.io/pricing"><span class="group-hover:font-bold">Pricing</span></a>
</div>
</div>

<div class="h-full flex gap-[18px] xl:gap-7 items-center text-center">
<button id="search-button" type="button" class="p-1 mt-1 transition-colors hover:text-redis-red-500">
Expand Down Expand Up @@ -84,22 +63,14 @@
</div>
</div>
<div id="headerMenu" class="mt-16">
<div class="flex flex-col gap-6 px-4 py-6">
<div class="flex flex-row gap-6 px-4 py-6">
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('products')">
<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>
</button>
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('solutions')">
<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>
</button>
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('support')">
<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>
</button>
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('company')">
<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>
</button>
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('docs')">
<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>
<button class="flex flex-row h-full cursor-pointer items-center group" onclick="openPage('learn')">
<span class="inline-block group-hover:font-bold group-hover:tracking-tight">Resources</span><span class="inline-block text-redis-red-500 -rotate-90 mt-1">{{ partial "icons/caret.html" }}</span>
</button>
<a class="group flex-row items-center" href="https://redis.io/docs/latest/"><span class="group-hover:font-bold group-hover:tracking-tight">Docs</span></a>
<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>
</div>
<div class="flex flex-col gap-6 px-4 text-center mt-16 max-w-[360px] mx-auto">
Expand All @@ -111,17 +82,8 @@
<div id="productsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/products-dropdown.html" }}
</div>
<div id="solutionsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/solutions-dropdown.html" }}
</div>
<div id="supportPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/support-dropdown.html" }}
</div>
<div id="companyPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/company-dropdown.html" }}
</div>
<div id="docsPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/docs-dropdown.html" }}
<div id="learnPage" class="menuPage hidden overflow-y-scroll mt-16 px-4 py-6">
{{ partial "header/learn-dropdown.html" }}
</div>
</div>
</header>
Expand Down
30 changes: 4 additions & 26 deletions layouts/partials/header/docs-dropdown.html → layouts/partials/header/learn-dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:-ml-60 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-90 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-4 text-[15px]">
<div class="lg:w-60">
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">Learn</h3>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/docs/">
<span class="">Docs</span>
</a>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/commands/">
<span class="">Commands</span>
</a>
Expand All @@ -17,12 +14,6 @@ <h3 class="uppercase font-mono mb-2">Learn</h3>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/university">
<span class="">University</span>
</a>

<div class="w-full h-px bg-redis-pen-300 my-4"></div>

<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/chat">
<span class="">Redis Copilot <span class="filter brightness-[10%]">&#x2728;</span></span>
</a>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/kb">
<span class="">Knowledge base</span>
</a>
Expand All @@ -32,22 +23,9 @@ <h3 class="uppercase font-mono mb-2">Learn</h3>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/blog">
<span class="">Blog</span>
</a>
</div>
</div>
<div class="border-t lg:border-l border-redis-pen-300"></div>
<div class="lg:w-60">
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">Connect</h3>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/community">
<span class="">Community</span>
</a>
<a class="flex flex-col hover:text-redis-red-500 tracking-tight" href="https://redis.io/events">
<span class="">Events, tech talks & webinars</span>
</a>
<div class="w-full h-px bg-redis-pen-300 my-4"></div>
<h3 class="uppercase font-mono mb-2">Vector search</h3>
<p class="text-redis-pen-600 font-sans font-medium">Learn what you need to go from beginner to GenAI expert</p>
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/learn/vector/" "Text" "Get started") }}
<h3 class="uppercase font-mono mb-2">See how it works</h3>
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/demo-center" "Text" "Visit Demo Center") }}
</div>
</div>
</div>
</div>
55 changes: 19 additions & 36 deletions layouts/partials/header/products-dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-11 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
<div class="flex flex-col lg:hidden lg:group-hover:flex lg:absolute lg:left-40 lg:border lg:border-redis-pencil-300 bg-white lg:p-8 lg:flex-row lg:rounded-b-md gap-8 text-[15px]">
<div class="lg:w-60">
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">Products</h3>
<div class="w-full h-px bg-redis-pen-300 my-4"></div>
<a class="flex flex-col group/link" href="https://redis.io/docs/latest/get-started">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Community Edition</span><span class="text-redis-pen-600 font-sans font-medium">In-memory database for caching and streaming</span>
</a>
Expand All @@ -11,48 +12,30 @@ <h3 class="uppercase font-mono mb-2">Products</h3>
<a class="flex flex-col group/link" href="https://redis.io/enterprise">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Redis Software</span><span class="text-redis-pen-600 font-sans font-medium">Self-managed software with additional compliance, reliability, and resiliency for enterprise scaling</span>
</a>
<div class="w-full h-px bg-redis-pen-300 my-4"></div>
<h3 class="uppercase font-mono mb-2">Tools</h3>
<a class="flex flex-col group/link" href="https://redis.io/insight">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Redis Insight</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/clients">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Clients and Connectors</span>
</a>
</div>

</div>
</div>
<div class="border-t lg:border-l border-redis-pen-300"></div>
<div class="lg:w-60">
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">Key Features</h3>
<a class="flex flex-col group/link" href="https://redis.io/search">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Search and query</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/json">
<span class="group-hover/link:text-redis-red-500 tracking-tight">JSON</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/active-active">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Active-Active</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/auto-tiering">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Auto-Tiering</span>
</a>
<h3 class="uppercase font-mono mb-2"> </h3>
<a class="flex flex-col group/link" href="https://redis.io/solutions/vector-search/">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Vector Search</span>
<span class="group-hover/link:text-redis-red-500 tracking-tight">Vector database</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/data-integration/">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Data integration</span>
<span class="group-hover/link:text-redis-red-500 tracking-tight">RDI</span>
</a>
</div>
</div>
<div class="border-t lg:border-l border-redis-pen-300"></div>
<div class="lg:w-60">
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">See how it works</h3>
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/demo-center" "Text" "Visit Demo Center") }}
<div class="flex flex-col gap-4">
<h3 class="uppercase font-mono mb-2">Tools</h3>
<div class="w-full h-px bg-redis-pen-300 my-4"></div>
<h3 class="uppercase font-mono mb-2">Get Redis</h3>
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/downloads" "Text" "Downloads") }}
<a class="flex flex-col group/link" href="https://redis.io/insight">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Redis Insight</span>
</a>
<a class="flex flex-col group/link" href="https://redis.io/clients">
<span class="group-hover/link:text-redis-red-500 tracking-tight">Clients & Connectors</span>
</a>
{{ partial "components/button-link.html" (dict "Href" "https://redis.io/downloads" "Text" "Download") }}
</div>
</div>
</div>
</div>
</div>
</div>
Loading