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

TargetScanner/alchemyIngredientPage.php

@@ -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

@@ -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

@@ -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

@@ -1,40 +1,21 @@
-<?php
+<?php global $menu_items, $active_profession; ?>
-$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'],
-];
-?>
-
 <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 -->
+            <!-- Displays Navigation Icons -->
-            <?php foreach ($menu_items as $file => $info):
+            <?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 = ($active_profession === $root_file_name) ? ' navbar__link--active' : '';
-                $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'
-                }
                 ?>
                 <li class="navbar__item">
-                    <a href="<?php echo $file; ?>" class="navbar__link<?php echo $is_active ?>">
+                    <a href="<?= htmlspecialchars($file) ?>" class="navbar__link<?= $is_active ?>">
-                        <img src="img/<?php echo $info[1]; ?>" alt="<?php echo $info[0] ?>"
+                        <img src="images/<?= htmlspecialchars($info[1]) ?>" alt="" class="navbar__icon">
-                             class="navbar__icon">
+                        <?= htmlspecialchars($info[0]) ?>
                     </a>
                 </li>
             <?php endforeach; ?>

TargetScanner/sidebar.js

@@ -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

@@ -1,8 +1,32 @@
-<aside id="sidebar" class="sidebar">
+<?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">
-        <li><a href="#" class="sidebar__link"><span>🏠</span> <span class="link-text">Dashboard</span></a></li>
+            <?php foreach ($sidebar_tools as $key => $tool_info): ?>
-        <li><a href="#" class="sidebar__link"><span>📦</span> <span class="link-text">Inventory</span></a></li>
+                <?php
-        <li><a href="#" class="sidebar__link"><span>⚖️</span> <span class="link-text">Auction House</span></a></li>
+                // Generate link like: profession_supplies.php?prof=blacksmithing
-        <li><a href="#" class="sidebar__link"><span>⚙️</span> <span class="link-text">Settings</span></a></li>
+                $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>
+    </aside>
+<?php endif; ?>

TargetScanner/style.css

@@ -49,3 +49,34 @@ nav {
     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;
+    }
+}