picocrank 1.2.7 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.2.7",
+  "version": "1.3.1",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/router.js

@@ -1,23 +1,48 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-import Welcome from './vue/views/Welcome.vue';
+import { HomeIcon } from '@hugeicons/core-free-icons';
+import { TableIcon } from '@hugeicons/core-free-icons';
+import { ViewIcon } from '@hugeicons/core-free-icons';
+import { SecurityValidationIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
-    path: '/',
     name: 'Welcome',
-    component: Welcome,
+    path: '/',
+    component: () => import('./vue/views/Welcome.vue'),
+    meta: {
+      title: 'Welcome',
+      icon: HomeIcon,
+    }
   },
   {
-    path: '/table-example',
     name: 'TableExample',
-    component: () => import('./vue/examples/TableExample.vue'),
+    path: '/table-example',
+    title: 'Table Example',
+    component: () => import('./vue/views/TableExample.vue'),
+    meta: {
+      title: 'Table Example',
+      icon: TableIcon,
+    }
   },
   {
-    path: '/view-item/:id',
     name: 'ViewItem',
-    component: () => import('./vue/examples/ViewItem.vue'),
+    path: '/view-item/:id',
+    component: () => import('./vue/views/ViewItem.vue'),
     props: true,
+    meta: {
+      title: 'View Item',
+      icon: ViewIcon,
+    }
+  },
+  {
+    name: 'Admin',
+    path: '/admin',
+    component: () => import('./vue/views/Admin.vue'),
+    meta: {
+      title: 'Admin',
+      icon: SecurityValidationIcon,
+    }
   }
 ];
 

package/vue/components/Header.vue

@@ -12,6 +12,8 @@
 		</div>
 
 		<Breadcrumbs v-if="breadcrumbs" />
+
+		<slot name="toolbar" />
 		
 		<div class = "fg1"></div>
 

package/vue/components/QuickSearch.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="quick-search">
+    <div class="search-container">
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="text"
+        class="search-input"
+        :placeholder="placeholder"
+        @input="onSearch"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      />
+      <div class="search-icon">
+        <HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
+      </div>
+    </div>
+    
+    <div v-if="showResults && filteredItems.length > 0" class="search-results">
+      <div
+        v-for="(item, index) in filteredItems"
+        :key="item.id"
+        :class="['search-result-item', { active: selectedIndex === index }]"
+        @click="selectItem(item)"
+        @mouseenter="selectedIndex = index"
+      >
+        <div class="result-content">
+          <div class="result-title" v-html="highlightText(item.title, searchQuery)"></div>
+          <div v-if="item.description" class="result-description" v-html="highlightText(item.description, searchQuery)"></div>
+          <div v-if="item.category" class="result-category">{{ item.category }}</div>
+        </div>
+        <div v-if="item.icon" class="result-icon">
+          <HugeiconsIcon :icon="item.icon" width="1.2em" height="1.2em" />
+        </div>
+      </div>
+    </div>
+    
+    <div v-if="showResults && searchQuery && filteredItems.length === 0" class="no-results">
+      <div class="no-results-content">
+        <HugeiconsIcon :icon="SearchRemoveIcon" width="2em" height="2em" />
+        <p>No results found for "{{ searchQuery }}"</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { SearchIcon } from '@hugeicons/core-free-icons'
+import { SearchRemoveIcon } from '@hugeicons/core-free-icons'
+import { ViewIcon } from '@hugeicons/core-free-icons'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Search...'
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  searchFields: {
+    type: Array,
+    default: () => ['title', 'description']
+  },
+  maxResults: {
+    type: Number,
+    default: 10
+  },
+  debounceMs: {
+    type: Number,
+    default: 300
+  },
+  enableGlobalShortcut: {
+    type: Boolean,
+    default: true
+  },
+  autoImportRoutes: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['select', 'search', 'focus', 'blur'])
+
+const router = useRouter()
+const searchInput = ref(null)
+const searchQuery = ref('')
+const showResults = ref(false)
+const selectedIndex = ref(-1)
+const items = ref([...props.items])
+const debounceTimer = ref(null)
+
+function importRoutesFromRouter() {
+  const routeItems = router.getRoutes()
+    .filter(route => route.name) // Exclude unnamed routes
+    .map(route => ({
+      id: `route-${route.name}`,
+      title: route.meta.title || route.name,
+      description: `Navigate to ${route.path}`,
+      category: 'Navigation',
+      path: route.path,
+      icon: route.meta.icon || ViewIcon,
+      type: 'route'
+    }))
+  
+  // Add the items to the search
+  routeItems.forEach(item => addItem(item))
+}
+
+const filteredItems = computed(() => {
+  if (!searchQuery.value.trim()) {
+    return []
+  }
+  
+  const query = searchQuery.value.toLowerCase()
+  const filtered = items.value.filter(item => {
+    return props.searchFields.some(field => {
+      const value = item[field]
+      return value && value.toLowerCase().includes(query)
+    })
+  })
+  
+  return filtered.slice(0, props.maxResults)
+})
+
+function handleGlobalKeydown(event) {
+  // Check if Ctrl+K is pressed
+  if (event.ctrlKey && event.key === 'k') {
+    event.preventDefault()
+    
+    // Don't trigger if user is typing in an input/textarea
+    if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+      return
+    }
+    
+    focus()
+  }
+}
+
+function onSearch() {
+  clearTimeout(debounceTimer.value)
+  debounceTimer.value = setTimeout(() => {
+    selectedIndex.value = -1
+    showResults.value = true
+    emit('search', searchQuery.value)
+  }, props.debounceMs)
+}
+
+function onFocus() {
+  showResults.value = true
+  emit('focus')
+}
+
+function onBlur() {
+  // Delay hiding results to allow for click events
+  setTimeout(() => {
+    showResults.value = false
+    selectedIndex.value = -1
+    emit('blur')
+  }, 150)
+}
+
+function onKeydown(event) {
+  if (!showResults.value || filteredItems.value.length === 0) return
+  
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      selectedIndex.value = Math.max(selectedIndex.value - 1, -1)
+      break
+    case 'Enter':
+      event.preventDefault()
+      if (selectedIndex.value >= 0) {
+        selectItem(filteredItems.value[selectedIndex.value])
+      }
+      break
+    case 'Escape':
+      showResults.value = false
+      selectedIndex.value = -1
+      searchInput.value.blur()
+      break
+  }
+}
+
+function selectItem(item) {
+  switch(item.type) {
+    case 'route':
+      router.push({ path: item.path })
+      break
+    case 'callback':
+      item.callback()
+      break
+    default:
+      emit('select', item)
+  }
+  
+  searchQuery.value = ''
+  showResults.value = false
+  selectedIndex.value = -1
+}
+
+function highlightText(text, query) {
+  if (!query || !text) return text
+  
+  const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
+  return text.replace(regex, '<mark>$1</mark>')
+}
+
+// API Methods
+function addItem(item) {
+  const existingIndex = items.value.findIndex(i => i.id === item.id)
+  if (existingIndex >= 0) {
+    items.value[existingIndex] = { ...item }
+  } else {
+    items.value.push({ ...item })
+  }
+}
+
+function removeItem(itemId) {
+  items.value = items.value.filter(item => item.id !== itemId)
+}
+
+function clearItems() {
+  items.value = []
+}
+
+function getItems() {
+  return [...items.value]
+}
+
+function setItems(newItems) {
+  items.value = [...newItems]
+}
+
+function focus() {
+  searchInput.value?.focus()
+}
+
+function blur() {
+  searchInput.value?.blur()
+}
+
+function clear() {
+  searchQuery.value = ''
+  showResults.value = false
+  selectedIndex.value = -1
+}
+
+function refreshRoutes() {
+  if (props.autoImportRoutes) {
+    importRoutesFromRouter()
+  }
+}
+
+// Global shortcut management
+onMounted(() => {
+  if (props.enableGlobalShortcut) {
+    document.addEventListener('keydown', handleGlobalKeydown)
+  }
+  
+  // Auto-import routes on mount
+  if (props.autoImportRoutes) {
+    importRoutesFromRouter()
+  }
+})
+
+onUnmounted(() => {
+  if (props.enableGlobalShortcut) {
+    document.removeEventListener('keydown', handleGlobalKeydown)
+  }
+})
+
+// Watch for external items changes
+watch(() => props.items, (newItems) => {
+  items.value = [...newItems]
+}, { deep: true })
+
+defineExpose({
+  addItem,
+  removeItem,
+  clearItems,
+  getItems,
+  setItems,
+  focus,
+  blur,
+  clear,
+  refreshRoutes,
+  searchQuery,
+  filteredItems,
+  showResults
+})
+</script>
+
+<style scoped>
+.quick-search {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+}
+
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.4em;
+  border: none;
+  border-radius: .4em;
+  font-size: 1rem;
+  outline: none;
+  transition: all 0.2s ease;
+  background-color: #666;
+  color: #fff;
+}
+
+.search-input::placeholder {
+  color: #bbb;
+}
+
+.search-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-icon {
+  position: absolute;
+  right: 0.75rem;
+  color: #6b7280;
+  pointer-events: none;
+}
+
+.search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 2px solid #e1e5e9;
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+.search-result-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.search-result-item:last-child {
+  border-bottom: none;
+}
+
+.search-result-item:hover,
+.search-result-item.active {
+  background-color: #f8fafc;
+}
+
+.result-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-title {
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+.result-description {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 0.25rem;
+}
+
+.result-category {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.result-icon {
+  margin-left: 0.75rem;
+  color: #6b7280;
+  flex-shrink: 0;
+}
+
+.no-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 2px solid #e1e5e9;
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.no-results-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem 1rem;
+  color: #6b7280;
+  text-align: center;
+}
+
+.no-results-content p {
+  margin: 0.5rem 0 0 0;
+  font-size: 0.875rem;
+}
+
+mark {
+  background-color: #fef3c7;
+  color: #92400e;
+  padding: 0;
+  border-radius: 2px;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+  .search-input {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f9fafb;
+  }
+
+  .search-input:focus {
+    border-color: #60a5fa;
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
+  }
+
+  .search-icon {
+    color: #9ca3af;
+  }
+
+  .search-results {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .search-result-item {
+    border-bottom-color: #374151;
+  }
+
+  .search-result-item:hover,
+  .search-result-item.active {
+    background-color: #374151;
+  }
+
+  .result-title {
+    color: #f9fafb;
+  }
+
+  .result-description {
+    color: #d1d5db;
+  }
+
+  .result-category {
+    color: #9ca3af;
+  }
+
+  .result-icon {
+    color: #9ca3af;
+  }
+
+  .no-results {
+    background: #1f2937;
+    border-color: #374151;
+  }
+
+  .no-results-content {
+    color: #9ca3af;
+  }
+
+  mark {
+    background-color: #451a03;
+    color: #fbbf24;
+  }
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .quick-search {
+    max-width: 100%;
+  }
+  
+  .search-results {
+    max-height: 250px;
+  }
+}
+</style>

package/vue/components/Section.vue

@@ -1,8 +1,8 @@
 <template>
-	<section class = "with-header-and-content">
+	<section :class = "'with-header-and-content ' + classes" :id = "id">
 		<div class = "section-header flex-row">
 			<div class = "fg1">
-			<h2 :title = "subtitle">{{ title }}</h2>
+				<h2 :title = "subtitle">{{ title }}</h2>
 			</div>
 			<div role = "toolbar">
 				<slot name="toolbar" />
@@ -29,5 +29,13 @@ const props = defineProps({
 		type: String,
 		default: "",
 	},
+	id: {
+		type: String,
+		default: "",
+	},
+	classes: {
+		type: String,
+		default: "",
+	},
 });
 </script>

package/vue/components/Sidebar.vue

@@ -15,17 +15,11 @@
 
 			<nav class="mainnav">
 				<ul class="navigation-links">
-					<li v-for="link in navigationLinks" :key="link.id" :title="link.title">
-						<router-link :to="link.path" :class="{ active: isActive(link.path) }">
-							<HugeiconsIcon :icon="link.icon" />
-							<span>{{ link.title }}</span>
-						</router-link>
-					</li>
-				</ul>
-
-				<ul class="supplemental-links">
-					<li v-for="link in supplementalLinks" :key="link.id" :title="link.title">
-						<router-link :to="link.path" :class="{ active: isActive(link.path) }">
+					<li v-for="link in navigationLinks" :key="link.name" :title="link.title">
+						<!-- Render separator if link is a separator -->
+						<div v-if="link.type === 'separator'" class="separator"></div>
+						<!-- Render regular link if not a separator -->
+						<router-link v-else :to="link.path" :class="{ active: isActive(link.path) }">
 							<HugeiconsIcon :icon="link.icon" />
 							<span>{{ link.title }}</span>
 						</router-link>
@@ -36,12 +30,9 @@
 </template>
 
 <script setup>
-	import { ref, onMounted, getCurrentInstance } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
-import { DashboardSquare01Icon } from '@hugeicons/core-free-icons'
-import { LeftToRightListDashIcon } from '@hugeicons/core-free-icons'
-import { Wrench01Icon } from '@hugeicons/core-free-icons'
 import { Pin02Icon } from '@hugeicons/core-free-icons'
 import { PinIcon } from '@hugeicons/core-free-icons'
 
@@ -49,9 +40,54 @@ const isOpen = ref(false)
 const isStuck = ref(false)
 const navigationLinks = ref([])
 
-const supplementalLinks = ref([])
-
 const route = useRoute()
+const router = useRouter()
+
+function addRouterLink(link) {
+	const route = router.getRoutes().find(r => r.name === link)
+
+	if (route) {
+		const routeLink = {
+			name: link,
+			title: route.meta.title || route.name,
+			path: route.path,
+			icon: route.meta.icon || PinIcon,
+			type: 'route'
+		}
+
+		addNavigationLink(routeLink)
+	}
+}
+
+function addNavigationLink(link) {
+  const existingIndex = navigationLinks.value.findIndex(l => l.name === link.name)
+  if (existingIndex >= 0) {
+	navigationLinks.value[existingIndex] = { ...link }
+  } else {
+	navigationLinks.value.push({ ...link })
+  }
+}
+
+function addSeparator(id) {
+  const separator = {
+    name: id || `nav-separator-${Date.now()}`,
+    type: 'separator',
+    title: 'Separator'
+  }
+  addNavigationLink(separator)
+}
+
+function removeNavigationLink(linkId) {
+  navigationLinks.value = navigationLinks.value.filter(link => link.id !== linkId)
+}
+
+function clearNavigationLinks() {
+  navigationLinks.value = []
+}
+
+function getNavigationLinks() {
+  return [...navigationLinks.value]
+}
 
 function toggleStick() {
   isStuck.value = !isStuck.value
@@ -83,54 +119,9 @@ function isActive(path) {
   return route.path === path
 }
 
-function addNavigationLink(link) {
-  link.icon = DashboardSquare01Icon
-
-  const existingIndex = navigationLinks.value.findIndex(l => l.id === link.id)
-  if (existingIndex >= 0) {
-	navigationLinks.value[existingIndex] = { ...link }
-  } else {
-	navigationLinks.value.push({ ...link })
-  }
-}
-
-function addSupplementalLink(link) {
-  const existingIndex = supplementalLinks.value.findIndex(l => l.id === link.id)
-  if (existingIndex >= 0) {
-	supplementalLinks.value[existingIndex] = { ...link }
-  } else {
-	supplementalLinks.value.push({ ...link })
-  }
-}
-
-function removeNavigationLink(linkId) {
-  navigationLinks.value = navigationLinks.value.filter(link => link.id !== linkId)
-}
-
-function removeSupplementalLink(linkId) {
-  supplementalLinks.value = supplementalLinks.value.filter(link => link.id !== linkId)
-}
-
-function clearNavigationLinks() {
-  navigationLinks.value = []
-}
-
-function clearSupplementalLinks() {
-  supplementalLinks.value = []
-}
-
-function getNavigationLinks() {
-  return [...navigationLinks.value]
-}
-
-function getSupplementalLinks() {
-  return [...supplementalLinks.value]
-}
-
 defineExpose({
   isOpen,
   navigationLinks,
-  supplementalLinks,
   stick,
   unstick,
   toggleStick,
@@ -139,13 +130,11 @@ defineExpose({
   close,
   isActive,
   addNavigationLink,
-  addSupplementalLink,
+  addRouterLink,
+  addSeparator,
   removeNavigationLink,
-  removeSupplementalLink,
   clearNavigationLinks,
-  clearSupplementalLinks,
   getNavigationLinks,
-  getSupplementalLinks
 })
 </script>
 
@@ -164,8 +153,7 @@ li {
 	padding: 0;
 }
 
-.navigation-links a,
-.supplemental-links a {
+.navigation-links a {
 	display: flex;
 	align-items: center;
 	gap: 0.75rem;
@@ -173,23 +161,26 @@ li {
 	border-radius: 0;
 }
 
+.separator {
+	height: 1px;
+	background-color: #eee;
+	margin: 0.5rem 0.75rem;
+}
+
 .icon {
 	font-size: 1.2em;
 	width: 1.5rem;
 	text-align: center;
 }
 
-.supplemental-links {
-	border-top: 1px solid #eee;
-	margin-top: 1rem;
-}
-
 @media (prefers-color-scheme: dark) {
-  .navigation-links a,
-  .supplemental-links a {
+  .navigation-links a {
 	color: #f8f9fa;
   }
 
+  .separator {
+	background-color: #444;
+  }
 
   .supplemental-links {
 	border-top: 1px solid #444;

package/vue/views/Admin.vue

@@ -0,0 +1,81 @@
+<template>
+	<Section 
+		title="Admin Panel" 
+		subtitle="Administrative interface for system management"
+		padding
+	>
+		<div class="admin-content">
+			<div class="admin-section">
+				<h3>System Overview</h3>
+				<p>Welcome to the administrative panel. This is a placeholder for administrative functionality.</p>
+				
+				<div class="stats-grid">
+					<div class="stat-card">
+						<h4>Total Users</h4>
+						<div class="stat-value">1,247</div>
+						<div class="stat-change">+12% from last month</div>
+					</div>
+					
+					<div class="stat-card">
+						<h4>Active Sessions</h4>
+						<div class="stat-value">89</div>
+						<div class="stat-change">-3% from last hour</div>
+					</div>
+					
+					<div class="stat-card">
+						<h4>System Load</h4>
+						<div class="stat-value">67%</div>
+						<div class="stat-change">Normal</div>
+					</div>
+					
+					<div class="stat-card">
+						<h4>Storage Used</h4>
+						<div class="stat-value">2.4 GB</div>
+						<div class="stat-change">45% of total</div>
+					</div>
+				</div>
+			</div>
+			
+			<div class="admin-section">
+				<h3>Recent Activity</h3>
+				<div class="activity-list">
+					<div class="activity-item">
+						<span class="activity-time">2 minutes ago</span>
+						<span class="activity-text">User "john.doe" logged in</span>
+					</div>
+					<div class="activity-item">
+						<span class="activity-time">5 minutes ago</span>
+						<span class="activity-text">New user account created</span>
+					</div>
+					<div class="activity-item">
+						<span class="activity-time">12 minutes ago</span>
+						<span class="activity-text">System backup completed</span>
+					</div>
+					<div class="activity-item">
+						<span class="activity-time">1 hour ago</span>
+						<span class="activity-text">Database maintenance performed</span>
+					</div>
+					<div class="activity-item">
+						<span class="activity-time">2 hours ago</span>
+						<span class="activity-text">User "admin" updated settings</span>
+					</div>
+				</div>
+			</div>
+			
+			<div class="admin-section">
+				<h3>Quick Actions</h3>
+				<div class="action-buttons">
+					<button class="action-btn">Create User</button>
+					<button class="action-btn">System Backup</button>
+					<button class="action-btn">View Logs</button>
+					<button class="action-btn">Settings</button>
+				</div>
+			</div>
+		</div>
+	</Section>
+</template>
+
+<script setup>
+	// This is a placeholder admin view with dummy content
+	// No functionality implemented yet
+</script>

package/vue/views/App.vue

@@ -1,24 +1,38 @@
 <template>
-	<Header username = "Guest" breadcrumbs @toggleSidebar="toggleSidebar" title = "PicoCrank" />
-		<div id = "layout">
-			<Sidebar ref = "sidebar" />
-
-			<div id = "content">
-				<main>
-					<router-view />
-				</main>
-
-				<footer>
-					<span>PicoCrank</span>
-				</footer>
-			</div>
+	<Header username = "Guest" @toggleSidebar="toggleSidebar" title = "PicoCrank" >
+		<template #toolbar>
+			<QuickSearch
+				ref="quickSearchRef"
+				placeholder="Search items..."
+				:search-fields="['title', 'name']"
+				:max-results="15"
+			/>
+		</template>
+	</Header>
+
+	<div id = "layout">
+		<Sidebar ref = "sidebar" />
+
+		<div id = "content">
+			<main>
+				<router-view />
+			</main>
+
+			<footer>
+				<span>PicoCrank</span>
+			</footer>
 		</div>
+	</div>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
-	import { onMounted } from 'vue';
+	import { ref, onMounted } from 'vue';
+	import { useRouter } from 'vue-router';
 
+	import QuickSearch from './../components/QuickSearch.vue'
+
+	const quickSearchRef = ref(null)
+	const router = useRouter();
 	const sidebar = ref(null);
 
 	function toggleSidebar() {
@@ -28,19 +42,28 @@
 	}
 
 	onMounted(() => {
-		sidebar.value.addNavigationLink({
-		    id: 'welcome',
-			title: "Welcome",
-			path: "/",
-		})
-		sidebar.value.addNavigationLink({
-		    id: 'table-example',
-			title: "Table Example",
-			path: "/table-example",
-		})	
-
+		sidebar.value.addRouterLink('Welcome')
+		sidebar.value.addRouterLink('TableExample')
+		sidebar.value.addSeparator('separator-1');
+		sidebar.value.addRouterLink('ViewItem', { id: 1 })
+		sidebar.value.addSeparator('separator-2');
+		sidebar.value.addRouterLink('Admin')
 		sidebar.value.open();
 		sidebar.value.stick();
+
+		quickSearchRef.value.addItem({
+			id: 'hello-world',
+			title: 'Hello World',
+			name: 'hello-world',
+			description: 'This is a test item',
+			category: 'Actions',
+			type: 'callback',
+			callback: helloWorld
+		})
 	});
 
+	function helloWorld() {
+		alert('Hello World')
+	}
+
 </script>

package/vue/views/Welcome.vue

@@ -1,5 +1,5 @@
 <template>
-	<Section title = "Welcome">
+	<Section title = "Welcome" classes = "">
 		<p>
 			Welcome to Femtocrank, a web-based tool for analyzing and visualizing the performance of your code.
 			To get started, you can either upload a file or paste your code directly into the editor.
@@ -9,6 +9,45 @@
 		</p>
 	</Section>
 
+	<Section title = "Lorum" id = "lorem">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Section title = "Shakespeare" id = "shakespeare">
+		<p>
+			To be, or not to be, that is the question:
+			Whether 'tis nobler in the mind to suffer
+			The slings and arrows of outrageous fortune,
+			Or to take arms against a sea of troubles
+			And by opposing end them. To die: to sleep;
+			No more; and by a sleep to say we end
+			The heart-ache and the thousand natural shocks
+			That flesh is heir to, 'tis a consummation
+			Devoutly to be wish'd. To die, to sleep;
+			To sleep: perchance to dream: ay, there's the rub;
+			For in that sleep of death what dreams may come
+			When we have shuffled off this mortal coil,
+			Must give us pause: there's the respect
+			That makes calamity of so long life;
+			For who would bear the whips and scorns of time,
+			The oppressor's wrong
+		</p>
+	</Section>
+
+	<Section title = "More Lorem" id = "more-lorem">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
 </template>
 
 <script setup>