211 lines
9.3 KiB
PHP
211 lines
9.3 KiB
PHP
<?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>
|