Skip to content

Bugfix/theme not chaning on mobile #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dottmp merged 2 commits into from
Mar 26, 2026
Merged

Bugfix/theme not chaning on mobile #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
869d91d
fix broken classn name
dottmp Mar 26, 2026
368e187
refactor navbar
dottmp Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 34 additions & 19 deletions src/lib/components/navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@
import ThemeChange from '$lib/components/theme-change.svelte';

const DRAWER_ID = 'navbar-drawer';

let drawer: HTMLInputElement | undefined;

function toggleDrawer() {
const drawer = document.getElementById(DRAWER_ID) as HTMLInputElement;
if (drawer) {
drawer.checked = !drawer.checked;
}
}

let navItems = [
{ href: resolve('/privacy-news'), label: 'Privacy News' },
{ href: resolve('/awesome-privacy'), label: 'Awesome Privacy' },
{ href: resolve('/websites'), label: 'Websites' }
];
</script>

<nav class="navbar flex-col justify-center gap-y-2 bg-base-100 px-4 shadow-sm">
Expand All @@ -22,37 +37,37 @@
<ul
class="flex md:px-6 [&_a]:btn [&_a]:font-semibold [&_a]:btn-link [&_a]:no-underline [&_a]:hover:underline"
>
<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
<li><Link href={resolve('/websites')}>Websites</Link></li>
{#each navItems as navItem (navItem.href)}
<li><Link href={navItem.href}>{navItem.label}</Link></li>
{/each}
</ul>
</div>

<!-- mobile nav items -->
<!-- mobile drawer -->
<div class="drawer drawer-end ml-auto w-fit sm:hidden">
<input id={DRAWER_ID} type="checkbox" class="drawer-toggle" />
<input bind:this={drawer} id={DRAWER_ID} type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<label for={DRAWER_ID} class="drawer-button btn btn-square btn-ghost">
<label for={DRAWER_ID} class="drawer-button btn btn-square text-base-content/50 btn-ghost">
<i class="nf nf-md-menu text-lg"></i>
</label>
</div>
<div class="drawer-side">
<label for={DRAWER_ID} aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu min-h-full w-80 bg-base-200 p-4">
<!-- Sidebar content here -->
<li><Link href={resolve('/privacy-news')}>Privacy News</Link></li>
<li><Link href={resolve('/awesome-privacy')}>Awesome Privacy</Link></li>
<li><Link href={resolve('/websites')}>Websites</Link></li>
<li class="mt-auto">
<ThemeChange variant="select" />
</li>
</ul>
<label for={DRAWER_ID} aria-label="close drawer" class="drawer-overlay"></label>

<div class="flex min-h-full w-80 flex-col bg-base-200 p-4 *:w-full">
<ul class="menu p-0">
{#each navItems as navItem (navItem.href)}
<li><Link href={navItem.href} onclick={toggleDrawer}>{navItem.label}</Link></li>
{/each}
</ul>

<div class="divider mt-auto"></div>
<ThemeChange variant="select" class=" w-full " />
</div>
</div>
</div>

<!-- theme toggle -->
<div class="hidden sm:block">
<ThemeChange variant="dropdown" />
</div>
<ThemeChange variant="dropdown" class="hidden sm:block" />
</div>
</nav>
32 changes: 17 additions & 15 deletions src/lib/components/theme-change.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<script lang="ts">
import { onMount } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import { themeChange } from 'theme-change';

import { textVariants } from './text';

import { cn } from '$lib/utils/cn';

type ThemeChangeProps = {
type ThemeChangeProps = HTMLAttributes<HTMLDivElement> & {
variant?: 'dropdown' | 'select';
};

let { variant = 'dropdown' }: ThemeChangeProps = $props();
let { variant = 'dropdown', class: klass, ...props }: ThemeChangeProps = $props();

const themes = [
'vscode',
Expand All @@ -37,8 +36,15 @@
});
</script>

{#if variant === 'dropdown'}
<div class="dropdown dropdown-end ml-auto">
<div
class={cn(
variant === 'dropdown' && 'dropdown dropdown-end',
variant === 'select' && 'flex flex-col items-start',
klass
)}
{...props}
>
{#if variant === 'dropdown'}
<div tabindex="0" role="button" class="btn gap-1 btn-ghost btn-sm">
<i class="nf nf-md-theme_light_dark"></i>
<svg
Expand Down Expand Up @@ -69,22 +75,18 @@
</li>
{/each}
</ul>
</div>
{:else}
<div class="flex flex-col items-start">
<label for="theme-select" class={cn(textVariants.base, textVariants.size.xs)}
>Select Theme</label
>
{:else}
<label for="theme-select" class="sr-only">Select Theme</label>
<select id="theme-select" class="select appearance-none" aria-label="Select Theme">
{#each themes as theme (theme)}
<option
data-set-theme={theme}
data-act-class="btn-active"
class="theme-controlle"
class="theme-controller"
aria-label={theme}
value={theme}>{theme}</option
>
{/each}
</select>
</div>
{/if}
{/if}
</div>
Loading