|
6 | 6 | <title>{{ page.title }}</title> |
7 | 7 | <link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}" /> |
8 | 8 | <script> |
| 9 | + // Sidebar Toggle Function |
9 | 10 | function toggleSidebar() { |
10 | 11 | const sidebar = document.getElementById("sidebar"); |
11 | 12 | sidebar.classList.toggle("hidden"); |
12 | 13 | } |
13 | 14 |
|
| 15 | + // Dark Mode Toggle Function |
14 | 16 | const toggleDarkMode = () => { |
15 | 17 | document.body.classList.toggle("dark-mode"); |
16 | | - localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode")); |
| 18 | + localStorage.setItem( |
| 19 | + "dark-mode", |
| 20 | + document.body.classList.contains("dark-mode") |
| 21 | + ); |
17 | 22 | }; |
18 | 23 |
|
| 24 | + // Handle Sidebar Visibility Based on Screen Size |
19 | 25 | function handleSidebarVisibility() { |
20 | 26 | const sidebar = document.getElementById("sidebar"); |
21 | 27 | if (window.matchMedia("(max-width: 768px)").matches) { |
|
25 | 31 | } |
26 | 32 | } |
27 | 33 |
|
28 | | - function updateTime() { |
29 | | - const now = new Date(); |
30 | | - let hours = now.getHours(); |
31 | | - const minutes = now.getMinutes().toString().padStart(2, "0"); |
32 | | - const seconds = now.getSeconds().toString().padStart(2, "0"); |
33 | | - const ampm = hours >= 12 ? "PM" : "AM"; |
34 | | - hours = hours % 12 || 12; |
35 | | - const timeString = `${hours}:${minutes}:${seconds} ${ampm}`; |
36 | | - |
37 | | - const offset = now.getTimezoneOffset(); |
38 | | - const offsetHours = Math.floor(Math.abs(offset) / 60); |
39 | | - const offsetMinutes = Math.abs(offset) % 60; |
40 | | - const offsetSign = offset > 0 ? "-" : "+"; |
41 | | - const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, "0")}:${offsetMinutes.toString().padStart(2, "0")}`; |
42 | | - |
43 | | - const fullTimeString = `⏰ Time: ${timeString} ${offsetString}`; |
44 | | - document.getElementById("time-display").textContent = fullTimeString; |
45 | | - } |
46 | | - |
| 34 | + // Initialize on Load |
47 | 35 | window.onload = () => { |
48 | 36 | handleSidebarVisibility(); |
49 | 37 | if (localStorage.getItem("dark-mode") === "true") { |
50 | 38 | document.body.classList.add("dark-mode"); |
51 | 39 | } |
52 | | - updateTime(); |
53 | | - setInterval(updateTime, 1000); |
54 | | - setTimeout(() => { |
55 | | - const sidebar = document.getElementById("sidebar"); |
56 | | - if (!sidebar.classList.contains("hidden")) { |
57 | | - sidebar.classList.add("hidden"); |
58 | | - } |
59 | | - }, 10000); |
60 | 40 | }; |
61 | 41 |
|
| 42 | + // Update on Resize |
62 | 43 | window.addEventListener("resize", handleSidebarVisibility); |
63 | 44 | </script> |
64 | 45 | </head> |
65 | 46 | <body> |
| 47 | +<!-- Dark Mode Toggle Button --> |
| 48 | +<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button> |
| 49 | + |
66 | 50 | <div class="wrapper"> |
67 | | - <div id="sidebar" class="sidebar"> |
68 | | - {% include nav.html %} |
69 | | - </div> |
| 51 | + <!-- Sidebar Navigation --> |
| 52 | + <div id="sidebar" class="sidebar">{% include nav.html %}</div> |
| 53 | + |
| 54 | + <!-- Content Area --> |
70 | 55 | <div class="content"> |
71 | | - <div id="time-display"></div> |
| 56 | + <!-- Sidebar Toggle Button --> |
72 | 57 | <button class="toggle-btn" onclick="toggleSidebar()">☰</button> |
73 | | - <button class="toggle-btn" id="dark-mode-toggle" onclick="toggleDarkMode()">🌓</button> |
74 | | - <div class="fade-in"> |
75 | | - {{ content }} |
76 | | - </div> |
| 58 | + <div class="fade-in">{{ content }}</div> |
77 | 59 | </div> |
78 | 60 | </div> |
79 | 61 | </body> |
|
0 commit comments