Skip to content

Commit 5bf3c89

Browse files
ralyodioralyodio
committed
Add mobile theme toggle and improve theme toggle functionality
1 parent fdfa5b4 commit 5bf3c89

File tree

1 file changed

+55
-20
lines changed

1 file changed

+55
-20
lines changed

‎public/js/components/pf-header.js‎

Lines changed: 55 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,27 @@ class PfHeader extends HTMLElement {
8888
text-align: center;
8989
border-bottom: 1px solid var(--border-color);
9090
}
91+
92+
.mobile-theme-toggle-container {
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
gap: 15px;
97+
margin-top: 20px;
98+
padding: 15px 0;
99+
border-top: 1px solid var(--border-color);
100+
width: 100%;
101+
}
102+
103+
.mobile-theme-toggle-container span {
104+
font-size: 1.1rem;
105+
color: var(--text-primary);
106+
}
107+
108+
.mobile-theme-toggle {
109+
position: static;
110+
margin-left: 0;
111+
}
91112
92113
/* Theme toggle styles */
93114
.theme-toggle {
@@ -234,11 +255,9 @@ class PfHeader extends HTMLElement {
234255
display: flex; /* Show hamburger menu on mobile */
235256
}
236257
237-
.theme-toggle {
238-
position: fixed;
239-
top: 20px;
240-
right: 70px;
241-
z-index: 200;
258+
/* Hide the header theme toggle on mobile */
259+
.header .theme-toggle {
260+
display: none;
242261
}
243262
}
244263
</style>
@@ -282,6 +301,20 @@ class PfHeader extends HTMLElement {
282301
<a href="/api-keys" class="nav-link" id="mobile-api-keys-link">API Keys</a>
283302
<a href="/login" class="nav-link login-link" id="mobile-login-link">Login</a>
284303
<a href="/register" class="subscription-link register-link" id="mobile-register-link">Register</a>
304+
305+
<div class="mobile-theme-toggle-container">
306+
<span>Theme</span>
307+
<button class="theme-toggle mobile-theme-toggle" title="Toggle light/dark theme">
308+
${this.currentTheme === 'dark'
309+
? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
310+
<path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"/>
311+
</svg>`
312+
: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
313+
<path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27105 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"/>
314+
</svg>`
315+
}
316+
</button>
317+
</div>
285318
</div>
286319
`;
287320
}
@@ -302,13 +335,13 @@ class PfHeader extends HTMLElement {
302335
this.updateThemeToggle();
303336
});
304337

305-
// Add event listener for theme toggle button
306-
const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
307-
if (themeToggle) {
308-
themeToggle.addEventListener('click', () => {
338+
// Add event listeners for theme toggle buttons (both desktop and mobile)
339+
const themeToggles = this.shadowRoot.querySelectorAll('.theme-toggle');
340+
themeToggles.forEach(toggle => {
341+
toggle.addEventListener('click', () => {
309342
this.toggleTheme();
310343
});
311-
}
344+
});
312345

313346
// Add event listener for hamburger menu toggle
314347
const hamburgerMenu = this.shadowRoot.querySelector('.hamburger-menu');
@@ -382,16 +415,18 @@ class PfHeader extends HTMLElement {
382415
}
383416

384417
updateThemeToggle() {
385-
const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
386-
if (themeToggle) {
387-
themeToggle.innerHTML = this.currentTheme === 'dark'
388-
? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
389-
<path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"/>
390-
</svg>`
391-
: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
392-
<path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27105 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"/>
393-
</svg>`;
394-
}
418+
const themeToggles = this.shadowRoot.querySelectorAll('.theme-toggle');
419+
const iconHtml = this.currentTheme === 'dark'
420+
? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
421+
<path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"/>
422+
</svg>`
423+
: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
424+
<path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27105 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"/>
425+
</svg>`;
426+
427+
themeToggles.forEach(toggle => {
428+
toggle.innerHTML = iconHtml;
429+
});
395430
}
396431

397432
updateLogo() {

0 commit comments

Comments
 (0)