OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 assets	-	11/09/2024 12:47:39 PM	rwxrwxr-x
📄 dashboard.php	35.33 KB	05/19/2025 10:07:15 AM	rw-rw-r--
📄 navbar.php	4.77 KB	05/19/2025 10:07:15 AM	rw-rw-r--

Editing: navbar.php

<?php
// Start the session (if needed for user authentication)
// session_start();

// Check if the user is logged in (this is just an example)
// if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
//     header("location: login.php");
//     exit;
// }
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar with Bootstrap</title>

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">

<style>

.navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e50914 !important;
            /* Netflix Red */
        }

/* Navbar links */
        .navbar-nav .nav-link {
            color: #bbb !important;
            transition: color 0.3s;
        }

.navbar-nav .nav-link:hover {
            color: #fff !important;
        }

.navbar {
            background-color: #141414;
        }

.dropdown-menu {
            position: absolute;
            right: -6px;

}

.dropdown-toggle {
            background-color: #141414;
            color: #fcfcfc;
            border: none;
            border-radius: 5px;
            padding: 10px;
            width: 100%;
        }

</style>
</head>

<body>

<nav class="navbar navbar-expand-lg">
        <div class="container d-flex justify-content-between">
            <a class="navbar-brand" href="dashboard.php">
                <img src="assets/img/logo.black.png" height="60px" alt="Logo">
            </a>
            <div class="end-navbar">
                <div class="nav-item dropdown " >
                    <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="background-color: #141414; color:#fff">
                        <span id="settings-text" >ಸೆಟ್ಟಿಂಗ್</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end flex flex-col justify-center " aria-labelledby="settingsDropdown">
                        
                        <li><a class="dropdown-item" href="../dashboard.php">English</a></li>
                        <li><a class="dropdown-item" href="logout.php">Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>

<script>
        $(document).ready(function() {
            // Ensure the dropdown opens and closes properly
            $('.dropdown-toggle').on('click', function(e) {
                e.preventDefault();
                var $dropdownMenu = $(this).next('.dropdown-menu');

// Toggle the dropdown menu
                $dropdownMenu.toggle();

// Close other dropdowns if any are open
                $('.dropdown-menu').not($dropdownMenu).hide();
            });

// Close dropdown when clicking outside of it
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.nav-item.dropdown').length) {
                    $('.dropdown-menu').hide();
                }
            });
        });

// JavaScript to handle screen resizing
        function updateSettingsText() {
            var settingsText = document.getElementById('settings-text');
            if (window.matchMedia('(max-width: 720px)').matches) {
                settingsText.innerHTML = '<i class="fas fa-cog"></i>'; // Show cog icon for Settings
            } else {
                settingsText.textContent = 'Settings'; // Show "Settings" text for larger screens
            }
        }

// Run on initial load
        updateSettingsText();

// Add an event listener for screen resize
        window.addEventListener('resize', updateSettingsText);
    </script>
</body>

</html>