Josh47_WebDev/byuiars-reop-net
1
1
Fork 0
Code Issues Pull Requests Activity

Implemented Dark Mode and revised Nav Bar

Browse Source
This commit is contained in:
Joshua L3
2025-06-20 13:09:18 -06:00
parent 9168f0ac9c
commit 9d84adef81
5 changed files with 342 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
index.html
View File

@@ -1,12 +1,16 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BYU-Idaho Amateur Radio Society</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/base.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
// Dark mode persistence
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
@@ -30,24 +34,45 @@
</template>
<!-- Navbar -->
<nav class="accent-bg text-white px-4 py-3 flex justify-between items-center shadow-md">
<a href="/" class="text-xl font-semibold">BYUIARS</a>
<ul class="flex space-x-4">
<template x-for="page in pages" :key="page.path">
<li>
<a :href="page.path"
:class="{ 'font-bold underline': currentPath === page.path }"
class="hover:opacity-80 transition">
<span x-text="page.name"></span>
<nav class="accent-bg text-white px-4 py-3 shadow-md" x-data="{ open: false }">
<div class="flex flex-wrap items-center justify-between">
<a href="/" class="text-xl font-semibold mr-4">BYUIARS</a>
<button @click="open = !open" class="sm:hidden text-white ml-auto focus:outline-none">
<svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg x-show="open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="hidden sm:flex flex-grow justify-center space-x-4">
<template x-for="page in pages" :key="page.path">
<a :href="page.path" :class="{ 'font-bold underline': currentPath === page.path }" class="hover:opacity-80 transition">
<span x-text="page.name"></span>
</a>
</li>
</template>
</div>
<div class="hidden sm:flex ml-auto">
<button @click="toggleDarkMode" class="ml-4 text-white focus:outline-none" title="Toggle dark mode">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-8.66h-1M4.34 12H3m15.36 6.36l-.71-.71M6.34 6.34l-.71-.71m12.02 0l-.71.71M6.34 17.66l-.71.71M12 5a7 7 0 100 14 7 7 0 000-14z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" />
</svg>
</button>
</div>
</div>
<div x-show="open" class="sm:hidden mt-2 space-y-2">
<template x-for="page in pages" :key="page.path">
<a :href="page.path" :class="{ 'font-bold underline': currentPath === page.path }" class="block px-2 py-1 hover:bg-white/10">
<span x-text="page.name"></span>
</a>
</template>
</ul>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode" class="ml-4 text-white focus:outline-none" title="Toggle dark mode">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-8.66h-1M4.34 12H3m15.36 6.36l-.71-.71M6.34 6.34l-.71-.71m12.02 0l-.71.71M6.34 17.66l-.71.71M12 5a7 7 0 100 14 7 7 0 000-14z" /></svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z" /></svg>
</button>
<button @click="toggleDarkMode" class="w-full text-left px-2 py-1 text-white hover:bg-white/10" title="Toggle dark mode">
<span x-text="darkMode ? '☀️ Light Mode' : '🌙 Dark Mode'"></span>
</button>
</div>
</nav>
<!-- Main Content -->