37 lines
3.1 KiB
Plaintext
37 lines
3.1 KiB
Plaintext
<nav class="bg-white dark:bg-neutral-900 border-b dark:border-none">
|
|
<div class="max-w-[100rem] w-full mx-auto sm:flex sm:flex-row sm:justify-between sm:items-center sm:gap-x-3 py-3 sm:py-5 px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center gap-x-3">
|
|
<div class="grow flex items-center gap-x-4">
|
|
<% if (guild.icon) { %>
|
|
<img class="size-[60px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
|
|
<% } else { %>
|
|
<div class="size-[60px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-800">
|
|
<span class="text-xs"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
|
|
</div>
|
|
<% } %>
|
|
<div class="d-flex items-center">
|
|
<span class="font-semibold whitespace-nowrap text-2xl text-gray-800 dark:text-neutral-200">
|
|
<%= guild.name %>
|
|
</span>
|
|
<span class="font-mono whitespace-nowrap text-sm text-gray-500 dark:text-neutral-500">
|
|
<%= guild.id %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="hs-collapse-toggle capitalize sm:hidden py-1.5 px-2 inline-flex items-center font-medium text-xs rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 focus:outline-none focus:bg-gray-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-collapse="#guildScreenDropdown">
|
|
<%= !isNaN(+guildPage) ? 'Overview' : guildPage %>
|
|
<svg class="hs-dropdown-open:rotate-180 shrink-0 size-4 ms-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
<div id="guildScreenDropdown" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block">
|
|
<div class="py-2 sm:py-0 flex flex-col sm:flex-row sm:justify-end gap-y-2 sm:gap-y-0 sm:gap-x-6">
|
|
<a href="/guild/<%= guild.id %>" class="guild-header-btn <%= !isNaN(+guildPage) ? 'active' : '' %>">Overview</a>
|
|
<a href="/guild/<%= guild.id %>/subscriptions" class="guild-header-btn <%= guildPage === 'subscriptions' ? 'active' : '' %>">Subscriptions</a>
|
|
<a href="/guild/<%= guild.id %>/filters" class="guild-header-btn <%= guildPage === 'filters' ? 'active' : '' %>">Filters</a>
|
|
<a href="/guild/<%= guild.id %>/styles" class="guild-header-btn <%= guildPage === 'styles' ? 'active' : '' %>">Styles</a>
|
|
<a href="/guild/<%= guild.id %>/content" class="guild-header-btn <%= guildPage === 'content' ? 'active' : '' %>">Content</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav> |