mirror of
https://github.com/System-End/highway.git
synced 2026-04-19 19:45:10 +00:00
58 lines
No EOL
2.8 KiB
Text
58 lines
No EOL
2.8 KiB
Text
<div x-data="{ open: false }" class="w-full bg-[#302C61] text-white px-8 shadow-md fixed top-0 left-0 z-50">
|
|
|
|
<div class="flex items-center justify-between md:justify-start">
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<%= link_to root_path do %>
|
|
<%= image_tag "/logo2.png", alt: "Logo", class: "max-h-[70px]" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- mobile (closed) -->
|
|
<button @click="open = !open" class="md:hidden text-white focus:outline-none">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 transform transition-transform duration-300"
|
|
:class="{ 'rotate-90': open }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- desktop -->
|
|
<div class="hidden md:flex items-center space-x-6 my-4 ml-8 *:font-dystopian *:uppercase *:hover:underline 2xl:text-2xl text-xl text-center text-[#AFBDEF]">
|
|
<%= link_to "Getting started", "/getting-started", class: "#{request.path.start_with?('/getting-started') ? 'glow' : ''}" %>
|
|
<%= link_to "Custom projects", "/advanced", class: "text-[#AFEFCB] #{request.path.start_with?('/advanced') ? 'glow' : ''}" %>
|
|
<%= link_to "Guides", "/guides", class: "text-[#D1AFEF] #{request.path.start_with?('/guides') ? 'glow' : ''}" %>
|
|
<%= link_to "Gallery", projects_path, class: "#{current_page?(projects_path) ? 'glow' : ''}" %>
|
|
<%= link_to "Events", events_path, class: "#{current_page?(events_path) ? 'glow' : ''}" %>
|
|
<%= link_to "Faq", "/getting-started/faq", class: "#{current_page?('/getting-started/faq') ? 'glow' : ''}" %>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center ml-auto text-[#AFBDEF] text-xl font-bold">
|
|
<a href="https://hackclub.com/" target="_blank" rel="noopenner noreferrer"><%= image_tag "/hcflag.svg", class: "max-h-[40px] ml-8 hover:-rotate-6 transition-transform duration-100" %></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- mobile (open) -->
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 transform scale-95"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-out duration-100"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-95"
|
|
class="md:hidden mt-4 space-y-4 pb-5 *:font-dystopian *:uppercase *:hover:underline *:text-2xl flex flex-col"
|
|
>
|
|
<%= link_to "Getting started", "/getting-started" %>
|
|
<%= link_to "Starter projects", "/starter-projects" %>
|
|
<%= link_to "Custom projects", "/advanced" %>
|
|
<%= link_to "Gallery", projects_path %>
|
|
<%= link_to "Events", events_path %>
|
|
<%= link_to "Faq", "/getting-started/faq" %>
|
|
</div>
|
|
</div> |