AutoBlogCMS/header.php at main · JasonReb0rn/AutoBlogCMS · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<header class="site-header">
    <div class="header-container">
        <!-- Logo and brand section -->
        <div class="brand-section">
            <a href="/home.php" class="brand-link">
                <span class="brand-name">Blog CMS</span>
            </a>
            <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
                <span class="menu-icon"></span>
            </button>
        </div>

        <!-- Navigation section -->
        <nav class="main-nav" id="mainNav">
            <ul class="nav-list">
                <?php if (!isset($_SESSION["userid"]) || in_array($_SESSION["role"], ["admin", "editor"])): ?>
                    <li class="nav-item"><a href="/admin.php">Admin</a></li>
                <?php endif; ?>
                <li class="nav-item"><a href="/blog.php">Blog</a></li>
                <li class="nav-item"><a href="/about.php">About</a></li>
                <li class="nav-item dropdown">
                    <a href="#" class="dropdown-trigger">More</a>
                    <ul class="dropdown-menu">
                        <li><a href="/contact.php">Contact</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <!-- User section -->
        <div class="user-section">
            <?php if (isset($_SESSION["userid"])): ?>
                <div class="user-menu">
                    <button class="user-menu-trigger">
                        <img src="/img/lego_user.png" alt="Profile" class="user-avatar">
                        <span class="user-name"><?php echo htmlspecialchars($_SESSION["username"]); ?></span>
                    </button>
                    <ul class="user-dropdown">
                        <li><a href="/profile.php"><i class="fa-solid fa-user"></i>Profile</a></li>
                        <li><a href="/includes/logout.inc.php"><i class="fa-solid fa-right-from-bracket"></i>Log Out</a></li>
                    </ul>
                </div>
            <?php else: ?>
                <a href="/login.php" class="sign-in-button">Sign In</a>
            <?php endif; ?>
        </div>
    </div>
</header>

<!-- Breadcrumbs -->
<div class="breadcrumbs">
    <div class="breadcrumbs-container">
        <ul class="breadcrumb-list">
            <li><a href="/home.php"><i class="fa-solid fa-house"></i></a></li>
            <li id="breadcrumbs-category"><a href="#"></a></li>
            <li id="breadcrumbs-page"></li>
        </ul>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile menu toggle
    const mobileMenuToggle = document.getElementById('mobileMenuToggle');
    const mainNav = document.getElementById('mainNav');

    mobileMenuToggle.addEventListener('click', () => {
        mainNav.classList.toggle('active');
        mobileMenuToggle.classList.toggle('active');
    });

    // Close mobile menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.main-nav') && !e.target.closest('.mobile-menu-toggle')) {
            mainNav.classList.remove('active');
            mobileMenuToggle.classList.remove('active');
        }
    });

    // Dropdown functionality
    const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');

    dropdownTriggers.forEach(trigger => {
        trigger.addEventListener('click', (e) => {
            e.preventDefault();
            const dropdown = trigger.closest('.dropdown');
            dropdown.classList.toggle('active');
        });
    });
});
</script>