All pages now php. nav now can use show which page is active.

This commit is contained in:
2026-08-16 20:52:13 -05:00
parent d2b52f7a42
commit 02a800232c
5 changed files with 69 additions and 57 deletions
+2 -1
View File
@@ -5,8 +5,9 @@
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alchemy Ingredient Selector</title> <title>Alchemy Ingredient Selector</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<?php include 'nav.html'; ?> <?php include 'nav.php'; ?>
</body> </body>
</html> </html>
+1 -1
View File
@@ -8,6 +8,6 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<?php include 'nav.html'; ?> <?php include 'nav.php'; ?>
</body> </body>
</html> </html>
-41
View File
@@ -1,41 +0,0 @@
<header class="site-header">
<nav class="navbar" aria-label="Profession Navigation">
<ul class="navbar__list">
<li class="navbar__item">
<a href="index.php" class="navbar__link">
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="alchemyIngredientPage.php" class="navbar__link">
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Engineering.png" alt="Engineering" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Leatherworking.png" alt="Leatherworking" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="Tailoring.png" alt="Tailoring" class="navbar__icon">
</a>
</li>
</ul>
</nav>
</header>
+64
View File
@@ -0,0 +1,64 @@
<?php
$current = basename($_SERVER['PHP_SELF']);
$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">
<nav class="navbar" aria-label="Profession Navigation">
<ul class="navbar__list">
<?php foreach ($menu_items as $file => $info): ?>
<?php
$is_active = ($current === $file) ? ' navbar__link--active' : '';
?>
<li class="navbar__item">
<a href="<?= $file ?>" class="navbar__link<?= $is_active ?>">
<img src="img/<?= $info[1] ?>" alt="<?= $info[0] ?>" class="navbar__icon">
</a>
</li>
<?php endforeach; ?>
<!--<li class="navbar__item">
<a href="index.php" class="navbar__link">
<img src="img/logo.png" alt="Company Name Home" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="alchemyIngredientPage.php" class="navbar__link">
<img src="img/alchemy.png" alt="Alchemy" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="img/blacksmithing.png" alt="Blacksmithing" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="img/engineering.png" alt="Engineering" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="img/jewelcrafting.png" alt="Jewelcrafting" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="img/leatherworking.png" alt="Leatherworking" class="navbar__icon">
</a>
</li>
<li class="navbar__item">
<a href="" class="navbar__link">
<img src="img/tailoring.png" alt="Tailoring" class="navbar__icon">
</a>
</li> -->
</ul>
</nav>
</header>
+2 -14
View File
@@ -14,7 +14,7 @@
nav { nav {
height: 100%; height: 100%;
max-width: 1200px; /*max-width: 1200px;*/
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 0 1rem;
} }
@@ -45,19 +45,7 @@ nav {
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */ filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
} }
.navbar__link:active .navbar__icon { .navbar__link--active .navbar__icon {
background-color: #04AA6D; background-color: #04AA6D;
filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */ filter: drop-shadow(0 6px 12px rgba(255, 255, 255, 0.15)); /* Adds a slight glow or deeper shadow */
}
ul li a {
display: block;
height: 25px;
width: 25px;
object-fit: contain;
padding: 14px 16px;
}
ul li a.active {
background-color: #04AA6D;
} }