crewli-old/apps/app/src/components-v2/layout/SidebarHeader.vue

<script setup lang="ts">
/**
 * SidebarHeader — ported from crewli-starter AppSidebar.vue `.brand` block.
 *
 * Renders the logo mark ("C"), "Crewli" wordmark, "Beta" pill, and the
 * sidebar collapse-toggle button. All state is read from / written to
 * useShellUiStore — no props needed.
 *
 * Collapse-button behaviour (mirrors crewli-starter `handleCollapse`):
 *   - Mobile (<lg, i.e. max-width: 1023px): the drawer is the active sidebar
 *     → call setMobileOpen(false) to close it.
 *   - Desktop (>=lg): toggle the persistent sidebar between expanded/collapsed
 *     → call toggleSidebar().
 *
 * Plan 2.5 P6-followup-styling: the collapse-toggle is decoupled from the
 * brand group so the logo stays centered in the collapsed rail.
 *  - Expanded: justify-between row — [brand group] [collapse chevron].
 *  - Collapsed: justify-center row — [logo only], with the expand chevron
 *    as a small floating circle absolute-positioned at the rail's right
 *    edge (tucked over the logo's right side with a solid background
 *    so the visual reads as an intentional chip, not an overlap). The
 *    aside's `overflow-hidden` (intentional, for the width transition)
 *    prevents true overhang past the rail edge — the tucked pattern is
 *    the visual compromise that keeps the affordance discoverable.
 *
 * The logo square shares its size + radius with WorkspaceSwitcher's
 * avatar square (h-8 w-8 rounded-xl) so the collapsed rail reads as
 * symmetric: brand-square at top, workspace-square at bottom, bracketing
 * the nav icons.
 *
 * <style scoped> covers the inset box-shadow on .mark only (no Tailwind
 * utility at this granularity, per RFC §7.4 last-resort).
 */

import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
import Icon from '@/components/Icon.vue'
import { useShellUiStore } from '@/stores/useShellUiStore'

const shell = useShellUiStore()

// Use the canonical Tailwind lg breakpoint (1024px) — consistent with AppSidebar's
// v-if="isMobile" guard so both components agree on the desktop/mobile boundary.
const isMobile = useBreakpoints(breakpointsTailwind).smaller('lg')

function handleCollapseClick(): void {
  if (isMobile.value) {
    // Mobile: the Drawer is the active sidebar — close it
    shell.setMobileOpen(false)
  }
  else {
    // Desktop: toggle the persistent sidebar width
    shell.toggleSidebar()
  }
}
</script>

<template>
  <div
    class="flex items-center h-[56px] border-b border-[var(--p-content-border-color)] flex-shrink-0 relative transition-[padding,justify-content] duration-200"
    :class="shell.sidebarCollapsed ? 'justify-center px-0' : 'justify-between px-4'"
  >
    <!--
      Expanded: brand group on the left (logo + wordmark + Beta pill).
      Collapsed: only the logo square, centered in the rail.
    -->
    <div class="flex items-center gap-[10px]">
      <!-- Brand square — shared treatment with WorkspaceSwitcher avatar (h-8 w-8 rounded-xl). -->
      <span class="brand-mark mark w-8 h-8 flex-shrink-0 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 inline-flex items-center justify-center text-white font-bold text-sm">
        C
      </span>

      <span
        v-if="!shell.sidebarCollapsed"
        class="brand-name font-bold text-base tracking-[-0.01em] whitespace-nowrap text-[var(--p-text-color)]"
      >
        Crewli
      </span>

      <span
        v-if="!shell.sidebarCollapsed"
        class="text-[9px] font-semibold bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400 px-1.5 py-px rounded-full uppercase tracking-[0.05em]"
      >
        Beta
      </span>
    </div>

    <!-- Expanded: inline collapse chevron on the right (justify-between sibling). -->
    <button
      v-if="!shell.sidebarCollapsed"
      class="w-7 h-7 border-0 bg-transparent text-[var(--p-text-muted-color)] rounded-[var(--p-border-radius)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer"
      aria-label="Collapse sidebar"
      type="button"
      @click="handleCollapseClick"
    >
      <Icon
        name="tabler-chevron-left"
        :size="16"
      />
    </button>

    <!--
      Collapsed: expand chevron as a small floating chip at the rail's
      right edge. Solid background + border so the slight overlap with
      the centered logo reads as a tucked-in affordance rather than a
      collision. Decoupled from the brand group so toggling does NOT
      shift the logo's centering.
    -->
    <button
      v-else
      class="absolute end-0 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full border border-[var(--p-content-border-color)] bg-[var(--p-content-background)] text-[var(--p-text-muted-color)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer shadow-sm"
      aria-label="Expand sidebar"
      type="button"
      @click="handleCollapseClick"
    >
      <Icon
        name="tabler-chevron-right"
        :size="12"
      />
    </button>
  </div>
</template>

<style scoped>
/*
 * The .mark inset box-shadow (inset 0 -2px 0 rgba(0,0,0,0.08)) has no
 * Tailwind equivalent — Tailwind's shadow utilities only support outer shadows
 * and cannot express inset directional shadows at this opacity. Last resort per
 * RFC §7.4.
 */
.mark {
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 8%);
}
</style>