Parlz/docs/includes/navbar.php

<?php
// 导航栏配置
$navLinks = [
    ['name' => 'Parlz', 'url' => '../index.php'],
    ['name' => '首页', 'url' => 'index.php'],
];

// 检查用户登录状态
$isLoggedIn = isset($_SESSION['user_id']);
$username = $isLoggedIn ? ($_SESSION['username'] ?? '用户') : '';
?>
<nav class="navbar">
    <div class="navbar-container">
        <div class="navbar-brand">
            <a href="../../index.php" class="navbar-logo">
                <i class="fas fa-comments"></i>
                <span>Parlz</span>
            </a>
        </div>
        
        <div class="navbar-menu">
            <?php foreach ($navLinks as $link): ?>
                <a href="<?php echo $link['url']; ?>" class="navbar-link">
                    <?php echo $link['name']; ?>
                </a>
            <?php endforeach; ?>
        </div>
        
        <div class="navbar-user">
            <?php if ($isLoggedIn): ?>
                <div class="user-dropdown">
                    <span class="user-name"><?php echo htmlspecialchars($username); ?></span>
                    <div class="dropdown-menu">
                        <a href="../../profile.php" class="dropdown-item">
                            <i class="fas fa-user"></i> 个人资料
                        </a>
                        <a href="../../index.php?action=logout" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </div>
                </div>
            <?php else: ?>
                <a href="../../index.php" class="navbar-link login-btn">
                    <i class="fas fa-sign-in-alt"></i> 登录
                </a>
            <?php endif; ?>
        </div>
    </div>
</nav>

<style>
/* 导航栏样式 */
.navbar {
    background: var(--bg-secondary);
    box-shadow: 0 2px 10px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--accent-color);
    font-size: 20px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.navbar-logo i {
    font-size: 24px;
    margin-right: 8px;
}

.navbar-menu {
    display: flex;
    align-items: center;
}

.navbar-link {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 0 5px;
}

.navbar-link:hover {
    color: var(--accent-color);
    background: var(--bg-hover);
}

.login-btn {
    background: var(--accent-color);
    color: white !important;
}

.login-btn:hover {
    background: var(--accent-hover) !important;
    color: white !important;
}

.navbar-user {
    display: flex;
    align-items: center;
}

.user-dropdown {
    position: relative;
    cursor: pointer;
}

.user-name {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 20px;
    background: var(--bg-tertiary);
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--text-primary);
}

.user-name:hover {
    background: var(--bg-hover);
    color: var(--accent-color);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 16px var(--shadow-hover);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.user-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    border-radius: 4px;
    margin: 2px;
}

.dropdown-item i {
    margin-right: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--accent-color);
}

.dropdown-item:hover i {
    color: var(--accent-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar-menu {
        display: none;
    }
    
    .navbar-container {
        padding: 0 15px;
    }
    
    .navbar-logo span {
        display: none;
    }
    
    .navbar-logo i {
        margin-right: 0;
    }
}
</style>