@life-and-dev/mdsite 0.0.3

package/mdsite-nuxt/app/components/AppNavigation.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="navigation-sidebar" ref="sidebarContainer">
+    <!-- Search Box (sticky at top) - only on desktop -->
+    <SearchBox
+      v-if="showSearch"
+      class="search-sticky"
+      @select="handleSearchSelect"
+      @clear="showTree = true"
+      @search-active="handleSearchActive"
+    />
+
+    <v-divider v-if="showSearch" />
+
+    <!-- Navigation Tree or Search Results -->
+    <div v-if="showTree" class="tree-container" ref="treeContainer">
+      <NavigationTree
+        v-if="navigationTree"
+        :tree="navigationTree"
+        :active-path="route.path"
+        @select="handleNavSelect"
+      />
+      <div v-else class="loading-state">
+        <v-progress-circular indeterminate size="32" />
+      </div>
+    </div>
+
+    <!-- Fade gradient for overflow -->
+    <div v-if="showFade" class="fade-gradient" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useNavigationTree } from '~/composables/useNavigationTree'
+
+const props = defineProps<{
+  showSearch?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [path: string]
+}>()
+
+const route = useRoute()
+
+// Navigation tree state
+const { tree: navigationTree, loadTree } = useNavigationTree()
+
+// UI state
+const showTree = ref(true)
+const showFade = ref(false)
+const sidebarContainer = ref<HTMLElement>()
+const treeContainer = ref<HTMLElement>()
+
+// Load navigation tree on mount
+onMounted(async () => {
+  await loadTree()
+  checkOverflow()
+})
+
+/**
+ * Handle search selection
+ */
+function handleSearchSelect(path: string) {
+  showTree.value = true
+  emit('select', path)
+  navigateTo(path)
+}
+
+/**
+ * Handle search active state
+ */
+function handleSearchActive(active: boolean) {
+  showTree.value = !active
+}
+
+/**
+ * Handle navigation selection
+ */
+function handleNavSelect(path: string) {
+  emit('select', path)
+  navigateTo(path)
+}
+
+/**
+ * Check if content overflows and show fade gradient
+ */
+function checkOverflow() {
+  if (!treeContainer.value) return
+
+  const hasOverflow = treeContainer.value.scrollHeight > treeContainer.value.clientHeight
+  showFade.value = hasOverflow
+}
+
+// Set up ResizeObserver to detect overflow
+onMounted(() => {
+  if (!treeContainer.value) return
+
+  const resizeObserver = new ResizeObserver(() => {
+    checkOverflow()
+  })
+
+  resizeObserver.observe(treeContainer.value)
+
+  onUnmounted(() => {
+    resizeObserver.disconnect()
+  })
+})
+</script>
+
+<style scoped>
+.navigation-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  background-color: rgb(var(--v-theme-surface-rail));
+}
+
+.search-sticky {
+  flex-shrink: 0;
+}
+
+.tree-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* Hide scrollbar but keep functionality */
+.tree-container::-webkit-scrollbar {
+  display: none;
+}
+
+.tree-container {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.loading-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.fade-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgb(var(--v-theme-surface-rail))
+  );
+  pointer-events: none;
+  z-index: 10;
+}
+</style>

package/mdsite-nuxt/app/components/AppTableOfContents.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="toc-sidebar" ref="tocContainer">
+    <!-- Header -->
+    <h3 v-if="showHeader" class="toc-header">On This Page</h3>
+    <v-divider v-if="showHeader" class="mb-2" />
+
+    <!-- TOC Items -->
+    <nav v-if="tocItems.length >= 2" class="toc-nav">
+      <TocItem
+        v-for="item in tocItems"
+        :key="item.id"
+        :item="item"
+        :is-active="activeId === item.id"
+        @click="handleItemClick(item.id)"
+      />
+    </nav>
+
+    <!-- Empty state -->
+    <div v-else class="toc-empty">
+      <p class="text-caption text-center">No table of contents available</p>
+    </div>
+
+    <!-- Fade gradient for overflow -->
+    <div v-if="showFade" class="fade-gradient" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TocItem as TocItemType } from '~/composables/useTableOfContents'
+
+const props = withDefaults(
+  defineProps<{
+    tocItems: TocItemType[]
+    activeId: string
+    showHeader?: boolean
+  }>(),
+  {
+    showHeader: true
+  }
+)
+
+const emit = defineEmits<{
+  'item-click': [id: string]
+}>()
+
+const { scrollToHeading } = useTableOfContents()
+
+const tocContainer = ref<HTMLElement>()
+const showFade = ref(false)
+
+/**
+ * Handle TOC item click
+ */
+function handleItemClick(id: string) {
+  scrollToHeading(id)
+  emit('item-click', id)
+}
+
+/**
+ * Check if content overflows
+ */
+function checkOverflow() {
+  if (!tocContainer.value) return
+
+  const hasOverflow = tocContainer.value.scrollHeight > tocContainer.value.clientHeight
+  showFade.value = hasOverflow
+}
+
+// Set up ResizeObserver to detect overflow
+onMounted(() => {
+  if (!tocContainer.value) return
+
+  const resizeObserver = new ResizeObserver(() => {
+    checkOverflow()
+  })
+
+  resizeObserver.observe(tocContainer.value)
+
+  onUnmounted(() => {
+    resizeObserver.disconnect()
+  })
+})
+
+// Check overflow when items change
+watch(() => props.tocItems, () => {
+  nextTick(() => checkOverflow())
+})
+</script>
+
+<style scoped>
+.toc-sidebar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  background-color: rgb(var(--v-theme-surface-rail));
+  padding: 16px 12px;
+}
+
+.toc-header {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface-rail));
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.toc-nav {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Hide scrollbar but keep functionality */
+.toc-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.toc-nav {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.toc-empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: rgb(var(--v-theme-on-surface-rail));
+  opacity: 0.6;
+}
+
+.fade-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgb(var(--v-theme-surface-rail))
+  );
+  pointer-events: none;
+  z-index: 10;
+}
+</style>

package/mdsite-nuxt/app/components/BreadcrumbNav.vue

@@ -0,0 +1,139 @@
+<template>
+  <nav class="breadcrumb-nav" aria-label="Breadcrumb">
+    <ol class="breadcrumb-list">
+      <li
+        v-for="(item, index) in breadcrumbs"
+        :key="item.path"
+        class="breadcrumb-item"
+      >
+        <v-tooltip
+          v-if="item.title === '...'"
+          text="Navigate up to parent section"
+          location="bottom"
+        >
+          <template #activator="{ props: tooltipProps }">
+            <a
+              v-bind="tooltipProps"
+              class="breadcrumb-link"
+              :class="{ 'is-ellipsis': item.title === '...' }"
+              @click.prevent="router.push(item.path)"
+            >
+              {{ item.title }}
+            </a>
+          </template>
+        </v-tooltip>
+        <a
+          v-else
+          class="breadcrumb-link"
+          :class="{ 'is-current': index === breadcrumbs.length - 1 }"
+          @click.prevent="handleClick(item, index)"
+        >
+          {{ item.title }}
+        </a>
+        <span
+          v-if="index < breadcrumbs.length - 1"
+          class="breadcrumb-separator"
+          aria-hidden="true"
+        >
+          >
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { BreadcrumbItem } from '~/composables/useBreadcrumbs'
+
+const props = defineProps<{
+  breadcrumbs: BreadcrumbItem[]
+}>()
+
+const router = useRouter()
+
+function handleClick(item: BreadcrumbItem, index: number) {
+  // Don't navigate if it's the current page (last item)
+  if (index !== props.breadcrumbs.length - 1) {
+    router.push(item.path)
+  }
+}
+</script>
+
+<style scoped>
+.breadcrumb-nav {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-list {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.breadcrumb-link {
+  color: rgb(var(--v-theme-on-surface));
+  text-decoration: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.breadcrumb-link:hover {
+  background-color: rgba(var(--v-theme-on-selectable), 0.04);
+  color: rgb(var(--v-theme-primary));
+}
+
+.breadcrumb-link.is-current {
+  color: rgb(var(--v-theme-on-surface));
+  opacity: 0.6;
+  cursor: default;
+  pointer-events: none;
+}
+
+.breadcrumb-link.is-ellipsis {
+  font-weight: 600;
+  min-width: auto;
+  flex-shrink: 0;
+}
+
+.breadcrumb-separator {
+  margin: 0 4px;
+  color: rgb(var(--v-theme-on-surface));
+  opacity: 0.4;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 599px) {
+  .breadcrumb-link {
+    font-size: 0.75rem;
+    padding: 2px 6px;
+  }
+
+  .breadcrumb-separator {
+    margin: 0 2px;
+  }
+}
+</style>

package/mdsite-nuxt/app/components/NavigationTree.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="navigation-tree">
+    <!-- Render root's children (skip root itself) -->
+    <TreeNode
+      v-for="node in rootChildren"
+      :key="node.id"
+      :node="node"
+      :active-path="activePath"
+      :expanded-ids="expandedIds"
+      :depth="0"
+      @toggle="handleToggle"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TreeNode } from '~/composables/useNavigationTree'
+
+const props = defineProps<{
+  tree: TreeNode | null
+  activePath: string
+}>()
+
+const emit = defineEmits<{
+  select: [path: string]
+}>()
+
+// Expanded node IDs
+const expandedIds = ref<Set<string>>(new Set())
+
+// Get root's children (skip rendering root itself)
+const rootChildren = computed(() => {
+  if (!props.tree) return []
+  return props.tree.children || []
+})
+
+/**
+ * Auto-expand path to active node on mount and when activePath changes
+ */
+watch(() => props.activePath, (newPath) => {
+  if (newPath && props.tree) {
+    expandPathToActive(newPath)
+  }
+}, { immediate: true })
+
+/**
+ * Expand all ancestors of the active node
+ */
+function expandPathToActive(path: string) {
+  if (!props.tree) return
+
+  // Special case: Homepage (/) - collapse all menus
+  if (path === '/') {
+    expandedIds.value.clear()
+    expandedIds.value = new Set(expandedIds.value)
+    return
+  }
+
+  const node = findNodeByPath(path, props.tree)
+  if (!node) return
+
+  // Walk up the tree and expand all ancestors
+  let current = node.parent
+  while (current && current.id !== 'root') {
+    expandedIds.value.add(current.id)
+    current = current.parent
+  }
+
+  // Force Vue to detect Set mutations by creating new Set instance
+  expandedIds.value = new Set(expandedIds.value)
+}
+
+/**
+ * Find node by path in tree
+ */
+function findNodeByPath(path: string, node: TreeNode): TreeNode | null {
+  if (node.path === path) return node
+
+  for (const child of node.children || []) {
+    const found = findNodeByPath(path, child)
+    if (found) return found
+  }
+
+  return null
+}
+
+/**
+ * Handle toggle expand/collapse
+ */
+function handleToggle(nodeId: string) {
+  if (expandedIds.value.has(nodeId)) {
+    // Collapse
+    expandedIds.value.delete(nodeId)
+    // Force Vue to detect Set mutation by creating new Set instance
+    expandedIds.value = new Set(expandedIds.value)
+  } else {
+    // Expand - collapse siblings at same level (Option B behavior)
+    const node = findNodeById(nodeId, props.tree)
+    if (node && node.parent) {
+      // Collapse siblings
+      for (const sibling of node.parent.children || []) {
+        if (sibling.id !== nodeId && sibling.id !== node.id) {
+          expandedIds.value.delete(sibling.id)
+        }
+      }
+    }
+
+    // Expand this node
+    expandedIds.value.add(nodeId)
+    // Force Vue to detect Set mutation by creating new Set instance
+    expandedIds.value = new Set(expandedIds.value)
+  }
+}
+
+/**
+ * Find node by ID
+ */
+function findNodeById(id: string, node: TreeNode | null): TreeNode | null {
+  if (!node) return null
+  if (node.id === id) return node
+
+  for (const child of node.children || []) {
+    const found = findNodeById(id, child)
+    if (found) return found
+  }
+
+  return null
+}
+
+/**
+ * Handle node selection
+ */
+function handleSelect(path: string) {
+  emit('select', path)
+}
+
+/**
+ * Scroll active node into view
+ */
+function scrollActiveIntoView() {
+  nextTick(() => {
+    const activeElement = document.querySelector('.tree-node.is-active')
+    if (activeElement) {
+      activeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest'
+      })
+    }
+  })
+}
+
+// Scroll active node into view when path changes
+watch(() => props.activePath, () => {
+  scrollActiveIntoView()
+})
+
+// Initial scroll on mount
+onMounted(() => {
+  scrollActiveIntoView()
+})
+</script>
+
+<style scoped>
+.navigation-tree {
+  width: 100%;
+  padding: 8px 4px;
+}
+</style>