85 lines
5.6 KiB
Plaintext
85 lines
5.6 KiB
Plaintext
<header class="bg-white dark:bg-slate-900 w-full shadow-sm sticky top-0 z-50">
|
|
<nav class=" flex mx-auto max-w-5xl px-4 md:px-8" aria-label="Top">
|
|
<div class="w-full py-5 flex items-center overflow-hidden">
|
|
<a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/<%= @theme.present? && @theme != 'system' ? '?theme='+@theme : '' %>" class="h-10 text-lg flex items-center text-slate-900 dark:text-white font-semibold">
|
|
<% if @portal.logo.present? %>
|
|
<img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
|
|
<% end %>
|
|
<%= @portal.name %>
|
|
</a>
|
|
</div>
|
|
|
|
<%# Go to homepage link section %>
|
|
<div class="flex items-center justify-between gap-2 sm:gap-5">
|
|
<% if @portal.homepage_link %>
|
|
<div class="ml-8 border-l-1 border-slate-50 dark:border-slate-800 hidden md:block cursor-pointer px-1 py-2">
|
|
<div class="flex-grow flex-shrink-0">
|
|
<a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center gap-1 text-sm font-medium whitespace-nowrap text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500">
|
|
<%= render partial: 'icons/redirect' %>
|
|
<%= I18n.t('public_portal.header.go_to_homepage') %>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<%# Appearance toggle section %>
|
|
<div class="flex-grow flex-shrink-0 relative cursor-pointer px-1 py-2">
|
|
<button id="toggle-appearance" class="toggle-appearance flex flex-row items-center stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500 gap-1" type="button">
|
|
<%= render partial: get_theme_icon(@theme) %>
|
|
<span class="text-sm font-medium"><%= get_theme_names(@theme) %></span>
|
|
<div class="pointer-events-none flex items-center px-1">
|
|
<%= render partial: 'icons/chevron-down' %>
|
|
</div>
|
|
</button>
|
|
<%# Appearance dropdown section %>
|
|
<div id="appearance-dropdown" class="hidden absolute flex-col h-auto w-32 bg-white dark:bg-slate-900 border border-solid rounded top-9 border-slate-100 dark:border-slate-800" aria-hidden="true" data-dropdown="appearance-dropdown">
|
|
<button data-theme="system" class="flex flex-row items-center justify-between px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/monitor' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.system') %></span>
|
|
</div>
|
|
<% if @theme.present? && @theme == 'system' %>
|
|
<%= render partial: 'icons/check-mark' %>
|
|
<% end %>
|
|
</button>
|
|
<button data-theme="light" class="flex flex-row items-center justify-between px-2 py-2 border-b border-solid border-slate-100 dark:border-slate-800 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/sun' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.light') %></span>
|
|
</div>
|
|
<% if @theme.present? && @theme == 'light' %>
|
|
<%= render partial: 'icons/check-mark' %>
|
|
<% end %>
|
|
</button>
|
|
<button data-theme="dark" class="flex flex-row items-center justify-between px-2 py-2 gap-1 stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
|
|
<div class="flex flex-row items-center gap-1">
|
|
<%= render partial: 'icons/moon' %>
|
|
<span class="text-xs font-medium"><%= I18n.t('public_portal.header.appearance.dark') %></span>
|
|
</div>
|
|
<% if @theme.present? && @theme == 'dark' %>
|
|
<%= render partial: 'icons/check-mark' %>
|
|
<% end %>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Locale switcher section %>
|
|
<% if @portal.config["allowed_locales"].length > 1 %>
|
|
<div class="flex items-center stroke-slate-700 dark:stroke-slate-200 hover:stroke-woot-500 dark:hover:stroke-woot-500 text-slate-800 dark:text-slate-100 hover:text-woot-500 dark:hover:text-woot-500">
|
|
<div class="flex items-center gap-1 px-1 py-2 cursor-pointer">
|
|
<%= render partial: 'icons/globe' %>
|
|
<select
|
|
data-portal-slug="<%= @portal.slug %>"
|
|
class="bg-white dark:bg-slate-900 appearance-none w-24 overflow-hidden text-ellipsis whitespace-nowrap leading-tight font-medium focus:outline-none text-sm focus:shadow-outline locale-switcher cursor-pointer"
|
|
>
|
|
<% @portal.config["allowed_locales"].each do |locale| %>
|
|
<option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= "#{language_name(locale)} (#{locale})" %></option>
|
|
<% end %>
|
|
</select>
|
|
<%= render partial: 'icons/chevron-down' %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</nav>
|
|
</header> |