lauren/ahand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NavBar & SideBar Works... Kinda. Not Customized Yet.

Browse Source
This commit is contained in:
lauren
2026-09-03 19:51:44 -05:00
parent 41383b8fe7
commit faeab2134c
7 changed files with 134 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TargetScanner/alchemyIngredientPage.php
+20 -1
View File
@@ -1,3 +1,4 @@
<?php include 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -8,7 +9,25 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'nav.php'; ?>
<?php
global $active_profession, $active_profession_title;
include 'nav.php';
include 'sidebar.php';
// Capture the active profession from the URL query safely
$current_prof = isset($_GET['prof']) ? $_GET['prof'] : '';
// Quick safety check mapping
if ($current_prof === 'alchemyIngredientPage' || $active_profession === 'alchemyIngredientPage') {
echo "<h1>Alchemy Market Prices</h1>";
// Run database query where profession = 'alchemy'
} elseif ($current_prof === 'blacksmithing' || $active_profession === 'blacksmithing') {
echo "<h1>Blacksmithing Market Prices</h1>";
// Run database query where profession = 'blacksmithing'
} else {
echo "<h1>Unknown Profession</h1>";
}
?>
</body>
</html>
TargetScanner/config.php
+28
View File
@@ -0,0 +1,28 @@
<?php
global $current_file, $menu_items, $active_profession, $active_profession_title;
$current_file = basename($_SERVER['SCRIPT_NAME']); // Extracts File Name ONLY, Not File Path
/* Navigation Bar Pages, 'fileName' => ['Page Name', 'pageIcon'] */
$menu_items = [
'index.php' => ['Home', 'logo.png'],
'alchemyIngredientPage.php' => ['Alchemy', 'alchemy.png'],
'blacksmithing.php' => ['Blacksmithing', 'blacksmithing.png'],
'engineering.php' => ['Engineering', 'engineering.png'],
'jewelcrafting.php' => ['Jewelcrafting', 'jewelcrafting.png'],
'leatherworking.php' => ['Leatherworking', 'leatherworking.png'],
'tailoring.php' => ['Tailoring', 'tailoring.png'],
];
$active_profession = ''; // File Name, e.g., 'alchemyIngredientPage' or 'blacksmithing'
$active_profession_title = ''; // Page Name, e.g., 'Alchemy' or 'Blacksmithing'
/* Finds & Sets Active Profession Page */
foreach ($menu_items as $file => $info) {
$root_file_name = pathinfo($file, PATHINFO_FILENAME); // Extracts File Name ONLY, Not File Path
if (str_starts_with($current_file, $root_file_name)) {
$active_profession = $root_file_name;
$active_profession_title = $info[0];
break;
}
}
TargetScanner/index.php
+2
View File
@@ -1,3 +1,4 @@
<?php require 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -11,6 +12,7 @@
<?php
include 'nav.php';
include 'sidebar.php';
include 'alchemyIngredientPage.php';
?>
</body>
</html>
TargetScanner/nav.php
+8 -27
View File
@@ -1,40 +1,21 @@
<?php
$current_file = basename($_SERVER['SCRIPT_NAME']); // Extracts File Name ONLY, Not File Path
/* Navigation Bar Pages, 'fileName' => ['Page Name', 'pageIcon'] */
$menu_items = [
'index.php' => ['Home', 'logo.png'],
'alchemyIngredientPage.php' => ['Alchemy', 'alchemy.png'],
'blacksmithing.php' => ['Blacksmithing', 'blacksmithing.png'],
'engineering.php' => ['Engineering', 'engineering.png'],
'jewelcrafting.php' => ['Jewelcrafting', 'jewelcrafting.png'],
'leatherworking.php' => ['Leatherworking', 'leatherworking.png'],
'tailoring.php' => ['Tailoring', 'tailoring.png'],
];
?>
<?php global $menu_items, $active_profession; ?>
<header class="site-header">
<button id="sidebar-toggle" class="toggle-btn" aria-label="Toggle Sidebar">
☰
</button>
<nav class="navbar" aria-label="Profession Navigation">
<ul class="navbar__list">
<!-- Finds & Sets Active Profession Page -->
<?php foreach ($menu_items as $file => $info):
<!-- Displays Navigation Icons -->
<?php foreach ($menu_items as $file => $info): ?>
<?php
$root_file_name = pathinfo($file, PATHINFO_FILENAME); // Extracts File Name ONLY, Not File Path
$is_current = (str_starts_with($current_file, $root_file_name));
$is_active = $is_current ? ' navbar__link--active' : '';
if ($is_current) {
$active_profession = $root_file_name; // File Name, e.g., 'alchemyIngredientPage' or 'blacksmithing'
$active_profession_title = $info[0]; // Page Name, e.g., 'Alchemy' or 'Blacksmithing'
}
$is_active = ($active_profession === $root_file_name) ? ' navbar__link--active' : '';
?>
<li class="navbar__item">
<a href="<?php echo $file; ?>" class="navbar__link<?php echo $is_active ?>">
<img src="img/<?php echo $info[1]; ?>" alt="<?php echo $info[0] ?>"
class="navbar__icon">
<a href="<?= htmlspecialchars($file) ?>" class="navbar__link<?= $is_active ?>">
<img src="images/<?= htmlspecialchars($info[1]) ?>" alt="" class="navbar__icon">
<?= htmlspecialchars($info[0]) ?>
</a>
</li>
<?php endforeach; ?>
TargetScanner/sidebar.js
+13
View File
@@ -0,0 +1,13 @@
document.addEventListener('click', (event) => {
// Check if the clicked item (or its parent) is the toggle button
const toggleBtn = event.target.closest('#sidebar-toggle');
if (toggleBtn) {
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
sidebar.classList.toggle('sidebar--open');
} else {
console.error('Sidebar element (.sidebar) not found in the DOM.');
}
}
});
TargetScanner/sidebar.php
+32 -8
View File
@@ -1,8 +1,32 @@
<aside id="sidebar" class="sidebar">
<ul class="sidebar__list">
<li><a href="#" class="sidebar__link"><span>🏠</span> <span class="link-text">Dashboard</span></a></li>
<li><a href="#" class="sidebar__link"><span>📦</span> <span class="link-text">Inventory</span></a></li>
<li><a href="#" class="sidebar__link"><span>⚖️</span> <span class="link-text">Auction House</span></a></li>
<li><a href="#" class="sidebar__link"><span>⚙️</span> <span class="link-text">Settings</span></a></li>
</ul>
</aside>
<?php global $current_file, $active_profession_title; ?>
<?php
// Skip rendering the sidebar if we are on the homepage
if (!empty($active_profession) && $active_profession !== 'index'):
// 2. Define the static utilities/tools every profession uses
$sidebar_tools = [
'ingredients' => ['Supplies Needed', 'profession_supplies.php'],
'market' => ['Current Market Prices', 'profession_market.php'],
'leveling' => ['Leveling Guide', 'profession_leveling.php'],
];
?>
<aside class="sidebar" aria-label="<?= htmlspecialchars($active_profession_title) ?> Tools">
<h3 class="sidebar__title"><?= htmlspecialchars($active_profession_title) ?> Utilities</h3>
<ul class="sidebar__list">
<?php foreach ($sidebar_tools as $key => $tool_info): ?>
<?php
// Generate link like: profession_supplies.php?prof=blacksmithing
$target_url = $tool_info[1] . '?prof=' . urlencode($active_profession);
// Check if this specific tool page is the one currently loaded
$is_tool_active = ($current_file === $tool_info[1]) ? ' sidebar__link--active' : '';
?>
<li class="sidebar__item">
<a href="<?= htmlspecialchars($target_url) ?>" class="sidebar__link<?= $is_tool_active ?>">
<?= htmlspecialchars($tool_info[0]) ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</aside>
<?php endif; ?>
TargetScanner/style.css
+31
View File
@@ -48,4 +48,35 @@ nav {
.navbar__link--active .navbar__icon {
background-color: #04AA6D;
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
}
/* Base sidebar style (hidden by default on all screens) */
.sidebar {
position: fixed;
left: -250px; /* Pushes it off-screen to the left */
width: 250px;
top: 60px; /* Adjust based on your nav header height */
height: calc(100% - 60px);
transition: left 0.3s ease; /* Smooth slide-in animation */
z-index: 1000;
background: #222; /* Adjust to match your theme */
}
/* When JavaScript adds this class, slide the sidebar into view */
.sidebar.sidebar--open {
left: 0;
}
/* Updated Desktop adjustments */
@media (min-width: 768px) {
/* Ensure the button stays visible on desktop */
.toggle-btn {
display: inline-block;
}
/* Optional: If you want the main page content to shift right when open */
.sidebar.sidebar--open ~ main {
margin-left: 250px;
transition: margin-left 0.3s ease;
}
}