diff --git a/components/navbar.php b/components/navbar.php
new file mode 100644
index 0000000..a5f55ee
--- /dev/null
+++ b/components/navbar.php
@@ -0,0 +1,211 @@
+<?php
+$isLoggedIn = isset($_SESSION['user_id']);
+$username = $isLoggedIn ? $_SESSION['username'] : '';
+$userSettings = $isLoggedIn ? getUserSettings($_SESSION['user_id']) : $currentUserSettings;
+$unreadCount = $isLoggedIn ? getUnreadNotificationCount($_SESSION['user_id']) : 0;
+$isAdmin = $isLoggedIn && $username === 'admin';
+
+$current_page = basename($_SERVER['PHP_SELF']);
+?>
+
+<nav class="navbar">
+    <div class="nav-container">
+        <div class="nav-logo">
+            <h2>
+                <a href="index.php">
+                    <i class="fas fa-images"></i> <?php echo t('site_title'); ?>
+                </a>
+            </h2>
+        </div>
+        
+        <button class="nav-toggle" id="navToggle">
+            <i class="fas fa-bars"></i>
+        </button>
+        
+        <div class="nav-menu" id="navMenu">
+            <a href="index.php" class="nav-link <?php echo $current_page === 'index.php' ? 'active' : ''; ?>">
+                <i class="fas fa-home"></i> <?php echo t('home'); ?>
+            </a>
+            
+            <?php if($isLoggedIn): ?>
+                <a href="dashboard.php" class="nav-link <?php echo $current_page === 'dashboard.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-th-large"></i> <?php echo t('dashboard'); ?>
+                </a>
+                
+                <a href="upload.php" class="nav-link <?php echo $current_page === 'upload.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-cloud-upload-alt"></i> <?php echo t('upload'); ?>
+                </a>
+                
+                <a href="api-docs.php" class="nav-link <?php echo $current_page === 'api-docs.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-code"></i> <?php echo t('api_docs'); ?>
+                </a>
+                
+                <a href="feedback.php" class="nav-link <?php echo $current_page === 'feedback.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-comment-dots"></i> <?php echo t('feedback'); ?>
+                </a>
+                
+                <a href="notifications.php" class="nav-link notification-icon <?php echo $current_page === 'notifications.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-bell"></i>
+                    <?php if($unreadCount > 0): ?>
+                        <span class="notification-badge"><?php echo $unreadCount; ?></span>
+                    <?php endif; ?>
+                </a>
+                
+                <div class="nav-dropdown">
+                    <span class="nav-user">
+                        <i class="fas fa-user-circle"></i> <?php echo t('welcome'); ?>, <?php echo htmlspecialchars($username); ?> <i class="fas fa-chevron-down"></i>
+                    </span>
+                    <div class="dropdown-content">
+                        <?php if($isAdmin): ?>
+                            <a href="admin.php" class="<?php echo $current_page === 'admin.php' ? 'active' : ''; ?>">
+                                <i class="fas fa-cog"></i> <?php echo t('admin_panel'); ?>
+                            </a>
+                        <?php endif; ?>
+                        <a href="settings.php" class="<?php echo $current_page === 'settings.php' ? 'active' : ''; ?>">
+                            <i class="fas fa-sliders-h"></i> <?php echo t('settings'); ?>
+                        </a>
+                        <a href="notifications.php" class="<?php echo $current_page === 'notifications.php' ? 'active' : ''; ?>">
+                            <i class="fas fa-bell"></i> <?php echo t('notifications'); ?>
+                            <?php if($unreadCount > 0): ?>
+                                <span style="background: var(--danger-color); color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; margin-left: 5px;">
+                                    <?php echo $unreadCount; ?>
+                                </span>
+                            <?php endif; ?>
+                        </a>
+                        <a href="logout.php">
+                            <i class="fas fa-sign-out-alt"></i> <?php echo t('logout'); ?>
+                        </a>
+                    </div>
+                </div>
+                
+                <button class="theme-toggle" id="themeToggle" title="<?php echo $userSettings['dark_mode'] ? '切换到浅色模式' : '切换到深色模式'; ?>">
+                    <?php if($userSettings['dark_mode']): ?>
+                        <i class="fas fa-sun"></i>
+                    <?php else: ?>
+                        <i class="fas fa-moon"></i>
+                    <?php endif; ?>
+                </button>
+                
+            <?php else: ?>
+                <a href="login.php" class="nav-link <?php echo $current_page === 'login.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-sign-in-alt"></i> <?php echo t('login'); ?>
+                </a>
+                
+                <a href="register.php" class="nav-link <?php echo $current_page === 'register.php' ? 'active' : ''; ?>">
+                    <i class="fas fa-user-plus"></i> <?php echo t('register'); ?>
+                </a>
+                
+                <button class="theme-toggle" id="themeToggle" title="<?php echo $currentUserSettings['dark_mode'] ? '切换到浅色模式' : '切换到深色模式'; ?>">
+                    <?php if($currentUserSettings['dark_mode']): ?>
+                        <i class="fas fa-sun"></i>
+                    <?php else: ?>
+                        <i class="fas fa-moon"></i>
+                    <?php endif; ?>
+                </button>
+            <?php endif; ?>
+        </div>
+    </div>
+</nav>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const navToggle = document.getElementById('navToggle');
+    const navMenu = document.getElementById('navMenu');
+    
+    if (navToggle && navMenu) {
+        navToggle.addEventListener('click', function(e) {
+            e.stopPropagation();
+            navMenu.classList.toggle('active');
+            this.innerHTML = navMenu.classList.contains('active') ? 
+                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
+        });
+    }
+
+    const themeToggle = document.getElementById('themeToggle');
+    if (themeToggle) {
+        themeToggle.addEventListener('click', function() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            
+            html.setAttribute('data-theme', newTheme);
+            
+            this.innerHTML = newTheme === 'dark' ? 
+                '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
+            
+            this.title = newTheme === 'dark' ? '切换到浅色模式' : '切换到深色模式';
+            
+            <?php if($isLoggedIn): ?>
+            fetch('update-settings.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    dark_mode: newTheme === 'dark'
+                })
+            }).catch(error => console.error('保存设置失败:', error));
+            <?php else: ?>
+            document.cookie = `dark_mode=${newTheme === 'dark' ? '1' : '0'}; path=/; max-age=31536000`;
+            <?php endif; ?>
+        });
+    }
+
+    document.addEventListener('click', function(e) {
+        if (navMenu && navMenu.classList.contains('active')) {
+            if (!navMenu.contains(e.target) && !(navToggle && navToggle.contains(e.target))) {
+                navMenu.classList.remove('active');
+                if (navToggle) {
+                    navToggle.innerHTML = '<i class="fas fa-bars"></i>';
+                }
+            }
+        }
+        
+        const dropdowns = document.querySelectorAll('.nav-dropdown');
+        dropdowns.forEach(dropdown => {
+            if (!dropdown.contains(e.target)) {
+                const dropdownContent = dropdown.querySelector('.dropdown-content');
+                if (dropdownContent) {
+                    dropdownContent.style.display = 'none';
+                }
+            }
+        });
+    });
+
+    const dropdowns = document.querySelectorAll('.nav-dropdown');
+    dropdowns.forEach(dropdown => {
+        dropdown.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const dropdownContent = this.querySelector('.dropdown-content');
+            if (dropdownContent) {
+                const isVisible = dropdownContent.style.display === 'block';
+                dropdownContent.style.display = isVisible ? 'none' : 'block';
+            }
+        });
+    });
+
+    const navLinks = document.querySelectorAll('.nav-link:not(.notification-icon)');
+    navLinks.forEach(link => {
+        link.addEventListener('click', function() {
+            if (navMenu.classList.contains('active')) {
+                navMenu.classList.remove('active');
+                if (navToggle) {
+                    navToggle.innerHTML = '<i class="fas fa-bars"></i>';
+                }
+            }
+        });
+    });
+});
+
+window.addEventListener('resize', function() {
+    const navMenu = document.getElementById('navMenu');
+    const navToggle = document.getElementById('navToggle');
+    
+    if (window.innerWidth > 768 && navMenu) {
+        navMenu.classList.remove('active');
+        if (navToggle) {
+            navToggle.innerHTML = '<i class="fas fa-bars"></i>';
+        }
+    }
+});
+</script>
\ No newline at end of file