上传文件至 components
This commit is contained in:
211
components/navbar.php
Normal file
211
components/navbar.php
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user