aljaz/hypergolic
1
0
Fork 0
mirror of https://github.com/aljazceru/hypergolic.git synced 2026-02-01 03:34:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #110 from bob2402/mobile-menu-close

Browse Source 
problem: on mobile, menu doesn't close when clicking on item
This commit is contained in:
gsovereignty
2024-08-19 19:31:42 +08:00
committed by GitHub
parent acba1dcc5e 85734d8608
commit 28c80f111b
2 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Menu.svelte
View File

@@ -9,6 +9,8 @@
import { GitAltBrand, TelegramBrand } from 'svelte-awesome-icons';
import NotifyMe from './NotifyMe.svelte';
export let closeSheet = () => {};
let iconClass = 'h-5 w-5 md:h-4 md:w-4';
$: getClass = (menuItem: string) => {
@@ -21,22 +23,22 @@
</script>
{#if $currentUser}
<a href="{base}/inbox" class={getClass('inbox')}>
<a href="{base}/inbox" class={getClass('inbox')} on:click={closeSheet}>
<Mail class={iconClass} />
Inbox
<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">1</Badge>
</a>
<Separator class="dark:bg-slate-700" />
{/if}
<a href="{base}/rockets" class={getClass('rockets')}>
<a href="{base}/rockets" class={getClass('rockets')} on:click={closeSheet}>
<Rocket class={iconClass} />
Rockets
</a>
<a href="{base}/products" class={getClass('products')}>
<a href="{base}/products" class={getClass('products')} on:click={closeSheet}>
<Package class={iconClass} />
Products
</a>
<a href="{base}/problems" class={getClass('problems')}>
<a href="{base}/problems" class={getClass('problems')} on:click={closeSheet}>
<Pyramid class={iconClass} />
Problem Tracker
<!-- <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">6</Badge> -->
@@ -47,16 +49,16 @@
People
</a> -->
<Separator class="dark:bg-slate-700" />
<a href="https://github.com/nostrocket/hypergolic" class={getClass('_')}>
<a href="https://github.com/nostrocket/hypergolic" target="_blank" class={getClass('_')}>
<GitAltBrand class={iconClass} />
Source
</a>
<a href="https://t.me/nostrocket" class={getClass('_')}>
<a href="https://t.me/nostrocket" target="_blank" class={getClass('_')}>
<TelegramBrand class={iconClass} />
Telegram Group
</a>
<NotifyMe menu />
<a href="{base}/help" class={getClass('help')}>
<a href="{base}/help" class={getClass('help')} on:click={closeSheet}>
<HelpCircle class={iconClass} />
Help
</a>

13
src/layouts/SidePanelLayout.svelte
View File

@@ -13,7 +13,8 @@
import { bitcoinTip } from '@/stores/bitcoin';
import NotifyMe from '../components/NotifyMe.svelte';
export let title = '';
// export let title = '';
let open = false;
</script>
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[260px_1fr]">
@@ -38,7 +39,7 @@
<header
class="flex h-14 items-center justify-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6"
>
<Sheet.Root>
<Sheet.Root bind:open>
<Sheet.Trigger asChild let:builder>
<Button variant="outline" size="icon" class="shrink-0 md:hidden" builders={[builder]}>
<Menu class="h-5 w-5" />
@@ -47,10 +48,14 @@
</Sheet.Trigger>
<Sheet.Content side="left" class="flex flex-col">
<nav class="grid gap-2 text-lg font-medium">
<a href="##" class="flex items-center gap-2 text-lg font-semibold">
<a
href="{base}/"
class="flex items-center gap-2 text-lg font-semibold"
on:click={() => (open = false)}
>
<span><img src={`${base}/_logo.png`} /></span>
</a>
<NewMenu />
<NewMenu closeSheet={() => (open = false)} />
</nav>
<div class="mt-auto">
<RocketPillCard />