PF-doc/header.html at main · PFingan-Code/PF-doc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<header class="bg-white dark:bg-gray-800 shadow-sm h-16" x-data="{ mobileMenuOpen: false }">
    <div class="container mx-auto px-4 h-full relative">
        <div class="flex justify-between items-center h-full">
            <a href="/" id="site-home-link">
                <div class="flex items-center space-x-2">
                    <img src="" alt="" class="site-logo h-8 w-8" id="site-logo-img">
                    <span class="text-lg font-bold" id="site-title"></span>
                </div>
            </a>
            <div class="flex items-center space-x-4">
                <nav class="hidden md:flex space-x-6" id="desktop-nav">
                    <!-- 由 JavaScript 基于 config.js 中的 navigation.nav_links 配置项动态生成桌面导航链接 -->
                </nav>

                <!-- 搜索按钮 -->
                <button id="search-button"
                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                    <i class="fas fa-search text-gray-600 dark:text-gray-300"></i>
                </button>

                <button id="dark-mode-toggle"
                    class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                    <i class="fas fa-moon dark:hidden text-gray-600"></i>
                    <i class="fas fa-sun hidden dark:block text-yellow-300"></i>
                </button>

                <!-- 移动端菜单按钮 -->
                <button @click="mobileMenuOpen = !mobileMenuOpen"
                    class="md:hidden w-10 h-10 rounded flex items-center justify-center hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                    <i class="fas fa-bars text-gray-600 dark:text-gray-300"></i>
                </button>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 -translate-y-2" 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-2"
            class="md:hidden py-4 border-t dark:border-gray-700 bg-white dark:bg-gray-800 absolute left-0 right-0 z-50 shadow-md"
            style="display: none; top: 4rem;">
            <div class="container mx-auto px-4">
                <nav class="flex flex-col space-y-4" id="mobile-nav">
                    <!-- 由 JavaScript 基于 config.js 中的 navigation.nav_links 配置项动态生成移动端导航链接 -->
                </nav>
            </div>
        </div>
    </div>
</header>

<!-- 搜索模态窗口 -->
<div id="search-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50 hidden">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl overflow-hidden">
        <div class="p-4 border-b dark:border-gray-700 flex justify-between items-center">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white">搜索文档</h3>
            <button id="close-search-modal"
                class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                <i class="fas fa-times text-gray-600 dark:text-gray-300"></i>
            </button>
        </div>
        <div class="p-4">
            <div class="relative">
                <input id="search-input" type="text" placeholder="输入关键词..."
                    class="w-full px-4 py-2 border dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary">
                <button id="do-search"
                    class="absolute right-2 top-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div id="search-results" class="mt-4 max-h-96 overflow-y-auto">
                <!-- 搜索结果将在这里显示 -->
            </div>
        </div>
    </div>
</div>