source: Klonkt/src/views/partials/fedi-tabs.ejs@ c0e00a2

<%# Shared tab bar for the unified Fediverse section. Owner/admin-only.
    Param: active = 'feed' | 'following' | 'reacties' | 'meldingen' | 'blokkeren'.
    All tabs share the content width equally (flex:1) and always fit (ellipsis).
    "Back to site" lives in the top nav, not here. %>
<% var _a = (typeof active !== 'undefined') ? active : ''; %>
<% var _nu = (typeof notifUnread !== 'undefined') ? notifUnread : 0; %>
<nav class="fedi-tabs" aria-label="Fediverse">
  <a href="/timeline" class="fedi-tab<%= _a === 'feed' ? ' is-active' : '' %>"
     hx-get="/timeline?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/timeline" hx-indicator="#pcms-loading"><%= t('tl.tab_feed') %></a>
  <a href="/following" class="fedi-tab<%= _a === 'following' ? ' is-active' : '' %>"
     hx-get="/following?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/following" hx-indicator="#pcms-loading"><%= t('tl.tab_following') %></a>
  <a href="/fediverse" class="fedi-tab<%= _a === 'reacties' ? ' is-active' : '' %>"
     hx-get="/fediverse?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/fediverse" hx-indicator="#pcms-loading"><%= t('tl.tab_replies') %></a>
  <a href="/notifications" class="fedi-tab<%= _a === 'meldingen' ? ' is-active' : '' %>"
     hx-get="/notifications?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/notifications" hx-indicator="#pcms-loading"><span class="fedi-tab-label"><%= t('notif.title') %></span><% if (_nu > 0) { %><span class="fedi-tab-badge"><%= _nu > 9 ? '9+' : _nu %></span><% } %></a>
  <a href="/blocking" class="fedi-tab<%= _a === 'blokkeren' ? ' is-active' : '' %>"
     hx-get="/blocking?partial=1" hx-target="#pcms-main" hx-swap="innerHTML" hx-push-url="/blocking" hx-indicator="#pcms-loading"><%= t('blk.title') %></a>
</nav>
<style>
/* All 5 tabs share the width equally and always fit (truncate with ellipsis if needed). */
.fedi-tabs { display: flex; margin: 1.25rem 0 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
.fedi-tab { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: .6rem .4rem; text-decoration: none; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft, #888); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.fedi-tab:hover { color: var(--ink, #000); }
.fedi-tab.is-active { color: var(--accent, #06c); border-bottom-color: var(--accent, #06c); }
.fedi-tab-label { overflow: hidden; text-overflow: ellipsis; }
.fedi-tab-badge { flex: 0 0 auto; min-width: 1.15em; padding: 0 .3em; border-radius: 999px;
  background: var(--accent, #e8b04b); color: #fff; font-size: .66rem; line-height: 1.5; text-align: center; }
/* Mobile: no desktop top-nav here, so clear the camera/notch + give headroom. */
@media (max-width: 767px) { .fedi-tabs { margin-top: calc(1.5rem + env(safe-area-inset-top, 0px)); } }
@media (max-width: 520px) { .fedi-tab { padding: .55rem .25rem; font-size: .82rem; } }
@media (max-width: 380px) { .fedi-tab { font-size: .74rem; } }
</style>