Templates/header.html

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">

            <a href="/" class="flex items-center space-x-3 group">
                <div class="overflow-hidden rounded-lg shadow-sm border border-gray-100">
                    <img src="{{ url_for('static', filename='misc/favicon/favicon-96x96.png') }}"
                         alt="Qsearch Logo"
                         class="w-9 h-9 transform group-hover:scale-110 transition duration-300">
                </div>
                <span class="text-xl font-bold text-gray-900 tracking-tight">
                    Qsearch <span class="text-blue-600">Intelligence</span>
                </span>
            </a>

            <div class="flex items-center space-x-1">

                <div class="hidden md:flex items-center space-x-1 mr-4">
                    <a href="/artifacts" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition-all duration-200 flex items-center">
                        <i class="fas fa-database mr-2 opacity-70"></i>Artifacts
                    </a>

                    <a href="/publications" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200 flex items-center">
                        <i class="fas fa-file-invoice mr-2 opacity-70"></i>Publications
                    </a>

                    <a href="/scholar" class="px-3 py-2 rounded-md text-sm font-medium {% if request.path == '/scholar' %}bg-blue-50 text-blue-700{% else %}text-gray-600 hover:text-blue-600 hover:bg-blue-50{% endif %} transition-all duration-200 flex items-center">
                        <i class="fas fa-graduation-cap mr-2 opacity-70"></i>Scholar
                    </a>
                </div>

                <div class="h-6 w-px bg-gray-200 mx-2"></div>

                <div class="relative inline-block text-left" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false">
                    <button class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-50 border border-transparent rounded-lg hover:border-gray-200 hover:bg-white hover:shadow-sm transition-all duration-200">
                        <span>Analysis Tools</span>
                        <i class="fas fa-chevron-down ml-2 text-[10px] text-gray-400 transform transition-transform duration-200" :class="open ? 'rotate-180' : ''"></i>
                    </button>

                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 translate-y-1"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-150"
                         x-transition:leave-start="opacity-100 translate-y-0"
                         x-transition:leave-end="opacity-0 translate-y-1"
                         class="absolute right-0 mt-2 w-64 origin-top-right bg-white border border-gray-200 rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
                         style="display: none;">

                        <div class="py-2">
                            <a href="/rag" class="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-indigo-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-indigo-100 text-indigo-600 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                                    <i class="fas fa-microchip"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">RAG Analytics</p>
                                    <p class="text-xs text-gray-500 italic">Advanced retrieval logs</p>
                                </div>
                            </a>

                            <a href="/discovery" class="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mr-3 group-hover:scale-110 transition-transform">
                                    <i class="fas fa-calculator"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900">Discovery</p>
                                    <p class="text-xs text-gray-500 italic">Pattern exploration</p>
                                </div>
                            </a>

                            <a href="/agent" class="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 transition-colors border border-transparent hover:border-blue-100 rounded-xl">
                                <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mr-3 group-hover:scale-110 group-hover:bg-blue-600 group-hover:text-white transition-all duration-200">
                                    <i class="fas fa-robot"></i>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900 leading-none">Discovery Agent</p>
                                    <p class="text-[11px] text-gray-500 italic mt-1">Autonomous pattern exploration</p>
                                </div>
                            </a>

                        </div>

                        <div class="py-2">
                            <a href="#" class="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                <i class="fas fa-project-diagram mr-4 text-gray-400 group-hover:text-blue-600"></i>
                                <span class="font-medium">Methodology</span>
                            </a>
                        </div>

                        <div class="py-2 bg-gray-50/50 rounded-b-xl">
                            <a href="/debug-paths" class="group flex items-center px-4 py-2 text-xs font-semibold text-gray-500 hover:text-red-600 transition-colors uppercase tracking-wider">
                                <i class="fas fa-tools mr-4 opacity-50 group-hover:opacity-100"></i>
                                System Debug
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>