pyr0ball
807fe516a6
- App: hamburger menu on mobile, nav links hidden below md breakpoint - LogSearch: collapsible sidebar on mobile, stacks above results vertically - Incidents/Sources: overflow-x-auto on table containers, min-w to preserve column layout on desktop; drawer action buttons flex-wrap on small screens - Bundles: flex-wrap on header row, hide source_host + timestamp below sm - General: p-4 sm:p-6 padding on all standard views
104 lines
4 KiB
Vue
104 lines
4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-surface font-mono text-text-primary">
|
|
<nav aria-label="Main navigation" class="border-b border-surface-border">
|
|
<div class="px-4 sm:px-6 py-3 flex items-center gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-accent font-semibold tracking-wide">TURNSTONE</span>
|
|
<span class="text-text-dim text-xs hidden sm:inline">diagnostic intelligence</span>
|
|
</div>
|
|
<!-- Desktop nav links -->
|
|
<div class="hidden md:flex gap-1 ml-4">
|
|
<RouterLink
|
|
v-for="link in navLinks"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
|
|
active-class="text-accent bg-accent-muted font-semibold"
|
|
>{{ link.label }}</RouterLink>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-3">
|
|
<RouterLink
|
|
to="/settings"
|
|
class="text-text-dim hover:text-text-primary transition-colors leading-none"
|
|
title="Settings"
|
|
aria-label="Settings"
|
|
>⚙</RouterLink>
|
|
<button
|
|
@click="toggleTheme"
|
|
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
class="text-text-dim hover:text-text-primary transition-colors text-base leading-none px-1"
|
|
:aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
>{{ isDark ? '☀' : '☾' }}</button>
|
|
<StatusDot />
|
|
<!-- Hamburger (mobile only) -->
|
|
<button
|
|
@click="menuOpen = !menuOpen"
|
|
:aria-expanded="menuOpen"
|
|
aria-label="Toggle navigation menu"
|
|
class="md:hidden text-text-dim hover:text-text-primary transition-colors text-lg leading-none px-1"
|
|
>{{ menuOpen ? '✕' : '☰' }}</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile nav dropdown -->
|
|
<div v-if="menuOpen" class="md:hidden border-t border-surface-border px-4 py-2 flex flex-col gap-0.5">
|
|
<RouterLink
|
|
v-for="link in navLinks"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
@click="menuOpen = false"
|
|
class="px-3 py-2 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
|
|
active-class="text-accent bg-accent-muted font-semibold"
|
|
>{{ link.label }}</RouterLink>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Persistent quick-capture bar (topbar mode) -->
|
|
<QuickCaptureBar v-if="entryPointStyle === 'topbar'" />
|
|
|
|
<RouterView />
|
|
|
|
<!-- FAB entry point (fab mode) -->
|
|
<QuickCaptureFab v-if="entryPointStyle === 'fab'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
import StatusDot from '@/components/StatusDot.vue'
|
|
import QuickCaptureBar from '@/components/QuickCaptureBar.vue'
|
|
import QuickCaptureFab from '@/components/QuickCaptureFab.vue'
|
|
|
|
const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
|
|
|
|
const navLinks = [
|
|
{ to: '/dashboard', label: 'Dashboard' },
|
|
{ to: '/search', label: 'Search' },
|
|
{ to: '/diagnose', label: 'Diagnose' },
|
|
{ to: '/incidents', label: 'Incidents' },
|
|
{ to: '/bundles', label: 'Bundles' },
|
|
{ to: '/sources', label: 'Sources' },
|
|
{ to: '/context', label: 'Context' },
|
|
{ to: '/blocklist', label: 'Blocklist' },
|
|
]
|
|
|
|
const isDark = ref(document.documentElement.classList.contains('dark'))
|
|
const menuOpen = ref(false)
|
|
const entryPointStyle = ref<'topbar' | 'fab'>('topbar')
|
|
|
|
function toggleTheme() {
|
|
isDark.value = !isDark.value
|
|
document.documentElement.classList.toggle('dark', isDark.value)
|
|
localStorage.setItem('ts-theme', isDark.value ? 'dark' : 'light')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const res = await fetch(`${BASE}/api/settings`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
entryPointStyle.value = data.entry_point_style ?? 'topbar'
|
|
}
|
|
} catch { /* default to topbar */ }
|
|
})
|
|
</script>
|