responsive menu

This commit is contained in:
vcoppe
2024-06-20 11:59:21 +02:00
parent a8e36f3acc
commit d41621ebc7
5 changed files with 211 additions and 13 deletions

View File

@@ -2,10 +2,12 @@
import { base } from '$app/paths'; import { base } from '$app/paths';
import { mode } from 'mode-watcher'; import { mode } from 'mode-watcher';
export let iconOnly = false;
</script> </script>
<img <img
src="{base}/logo{$mode === 'dark' ? '-dark' : ''}.svg" src="{base}/{iconOnly ? 'icon' : 'logo'}{$mode === 'dark' ? '-dark' : ''}.svg"
alt="Logo of gpx.studio." alt="Logo of gpx.studio."
{...$$restProps} {...$$restProps}
/> />

View File

@@ -26,7 +26,13 @@
Layers3, Layers3,
MountainSnow, MountainSnow,
GalleryVertical, GalleryVertical,
Languages Languages,
Settings,
Info,
File,
View,
FilePen,
HeartHandshake
} from 'lucide-svelte'; } from 'lucide-svelte';
import { import {
@@ -102,14 +108,18 @@
let layerSettingsOpen = false; let layerSettingsOpen = false;
</script> </script>
<div class="absolute top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none"> <div class="absolute md:top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
<div <div
class="w-fit flex flex-row mx-16 items-center justify-center p-1 bg-background rounded-md pointer-events-auto shadow-md" class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
> >
<Logo class="h-5 mt-0.5 mx-2" /> <Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
<Menubar.Root class="border-none h-fit p-0"> <Menubar.Root class="border-none h-fit p-0">
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger>{$_('gpx.file')}</Menubar.Trigger> <Menubar.Trigger>
<File size="18" class="md:hidden" />
<span class="hidden md:block">{$_('gpx.file')}</span>
</Menubar.Trigger>
<Menubar.Content class="border-none"> <Menubar.Content class="border-none">
<Menubar.Item on:click={createFile}> <Menubar.Item on:click={createFile}>
<Plus size="16" class="mr-1" /> <Plus size="16" class="mr-1" />
@@ -146,7 +156,10 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger>{$_('menu.edit')}</Menubar.Trigger> <Menubar.Trigger>
<FilePen size="18" class="md:hidden" />
<span class="hidden md:block">{$_('menu.edit')}</span>
</Menubar.Trigger>
<Menubar.Content class="border-none"> <Menubar.Content class="border-none">
<Menubar.Item on:click={dbUtils.undo} disabled={$undoDisabled}> <Menubar.Item on:click={dbUtils.undo} disabled={$undoDisabled}>
<Undo2 size="16" class="mr-1" /> <Undo2 size="16" class="mr-1" />
@@ -182,7 +195,10 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger> <Menubar.Trigger>
<View size="18" class="md:hidden" />
<span class="hidden md:block">{$_('menu.view')}</span>
</Menubar.Trigger>
<Menubar.Content class="border-none"> <Menubar.Content class="border-none">
<Menubar.CheckboxItem bind:checked={$elevationProfile}> <Menubar.CheckboxItem bind:checked={$elevationProfile}>
<MountainSnow size="16" class="mr-1" /> <MountainSnow size="16" class="mr-1" />
@@ -217,7 +233,12 @@
</Menubar.Content> </Menubar.Content>
</Menubar.Menu> </Menubar.Menu>
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger>{$_('menu.settings')}</Menubar.Trigger> <Menubar.Trigger>
<Settings size="18" class="md:hidden" />
<span class="hidden md:block">
{$_('menu.settings')}
</span>
</Menubar.Trigger>
<Menubar.Content class="border-none" <Menubar.Content class="border-none"
><Menubar.Sub> ><Menubar.Sub>
<Menubar.SubTrigger> <Menubar.SubTrigger>
@@ -307,16 +328,29 @@
</Menubar.Menu> </Menubar.Menu>
</Menubar.Root> </Menubar.Root>
<div class="h-fit flex flex-row items-center ml-1 gap-1"> <div class="h-fit flex flex-row items-center ml-1 gap-1">
<Button variant="ghost" href="./about" target="_blank" class="cursor-default h-fit rounded-sm" <Button
>{$_('menu.about')}</Button variant="ghost"
href="./about"
target="_blank"
class="cursor-default h-fit rounded-sm"
> >
<Info size="18" class="md:hidden" />
<span class="hidden md:block">
{$_('menu.about')}
</span>
</Button>
<Button <Button
variant="ghost" variant="ghost"
href="https://ko-fi.com/gpxstudio" href="https://ko-fi.com/gpxstudio"
target="_blank" target="_blank"
class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support" class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support"
>{$_('menu.donate')} <Heart size="16" class="ml-1" fill="rgb(var(--support))" /></Button
> >
<HeartHandshake size="18" class="md:hidden" />
<span class="hidden md:flex flex-row items-center">
{$_('menu.donate')}
<Heart size="16" class="ml-1" fill="rgb(var(--support))" />
</span>
</Button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -19,7 +19,7 @@
<div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none"> <div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none">
<div class="flex flex-row w-screen items-center"> <div class="flex flex-row w-screen items-center">
<div <div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-md pointer-events-auto shadow-md" class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md"
> >
<ToolbarItem tool={Tool.ROUTING}> <ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" class="h-" /> <Pencil slot="icon" size="18" class="h-" />

View File

@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg2"
width="194.70944"
height="251.79291"
viewBox="0 0 194.70944 251.79291"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs6">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath64">
<path
d="M 418.129,207.977 H 632.177 V 422.024 H 418.129 Z"
id="path62" />
</clipPath>
</defs>
<g
id="g8"
transform="matrix(1.3333333,0,0,-1.3333333,-602.70643,545.7933)">
<g
id="g58">
<g
id="g60"
clip-path="url(#clipPath64)">
<g
id="g66"
transform="translate(525.0752,358.501)">
<path
d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.263 0.326,3.09 -1.208,6.079 -3.896,7.632 l -6.285,3.632 c -3.77,2.179 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.771 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.442 3.364,2.456 6.996,4.564 10.845,6.274 2.832,1.26 4.645,4.087 4.645,7.188 v 7.253 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.887 v -7.253 c 0,-3.101 1.812,-5.928 4.645,-7.188 3.848,-1.71 7.481,-3.818 10.845,-6.274 2.51,-1.831 5.867,-1.997 8.557,-0.442 l 6.287,3.632 C 53.443,9.679 58.26,8.388 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.59 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.632 0.218,-2.057 0.33,-4.147 0.33,-6.263 0,-2.116 -0.112,-4.205 -0.33,-6.264"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path68" />
</g>
<g
id="g70"
transform="translate(568.4053,407.8447)">
<path
d="m 0,0 -17,-8.491 -37.042,-79.437 21.423,-9.99 37.042,79.437 z"
style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path72" />
</g>
<g
id="g74"
transform="translate(516.3564,320.6426)">
<path
d="M 0,0 18.705,-8.723 54.892,68.881 51.03,85.017 36.187,77.603 Z m 19.43,-12.216 c -0.217,0 -0.433,0.047 -0.634,0.141 l -21.423,9.99 c -0.751,0.35 -1.076,1.242 -0.726,1.993 l 37.042,79.437 c 0.143,0.307 0.386,0.556 0.689,0.708 l 17,8.491 c 0.41,0.205 0.89,0.211 1.305,0.018 0.414,-0.194 0.718,-0.566 0.825,-1.01 L 57.931,69.07 c 0.079,-0.33 0.044,-0.676 -0.099,-0.983 L 20.79,-11.35 c -0.168,-0.36 -0.473,-0.639 -0.847,-0.775 -0.166,-0.061 -0.339,-0.091 -0.513,-0.091"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path76" />
</g>
<g
id="g78"
transform="translate(535.7866,309.9277)">
<path
d="m 0,0 -21.423,9.989 -37.042,-79.435 4.423,-18.482 17,8.491 z"
style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path80" />
</g>
<g
id="g82"
transform="translate(478.9023,240.3213)">
<path
d="m 0,0 3.861,-16.136 14.844,7.414 36.186,77.603 -18.704,8.722 z m 2.842,-19.821 c -0.216,0 -0.432,0.047 -0.634,0.14 -0.415,0.194 -0.718,0.566 -0.825,1.011 L -3.04,-0.188 c -0.078,0.329 -0.043,0.675 0.1,0.982 l 37.042,79.435 c 0.349,0.751 1.242,1.076 1.993,0.726 l 21.423,-9.989 c 0.361,-0.168 0.64,-0.473 0.776,-0.847 0.136,-0.373 0.118,-0.786 -0.05,-1.146 L 21.202,-10.464 c -0.143,-0.307 -0.386,-0.557 -0.689,-0.708 l -17,-8.491 c -0.211,-0.106 -0.441,-0.158 -0.671,-0.158"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path84" />
</g>
<g
id="g86"
transform="translate(541.7656,314.9219)">
<path
d="m 0,0 c 0,-9.218 -7.473,-16.69 -16.69,-16.69 -9.218,0 -16.691,7.472 -16.691,16.69 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path88" />
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

81
website/static/icon.svg Normal file
View File

@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg2"
width="194.7095"
height="247.79253"
viewBox="0 0 194.70951 247.79253"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs6">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath96">
<path
d="M 410.129,207.977 H 624.177 V 422.024 H 410.129 Z"
id="path94" />
</clipPath>
</defs>
<g
id="g8"
transform="matrix(1.3333333,0,0,-1.3333333,-592.03971,543.79305)">
<g
id="g90">
<g
id="g92"
clip-path="url(#clipPath96)">
<g
id="g98"
transform="translate(517.0752,358.501)">
<path
d="m 0,0 c -24.068,0 -43.579,-19.511 -43.579,-43.579 0,-24.067 19.511,-43.578 43.579,-43.578 24.068,0 43.579,19.511 43.579,43.578 C 43.579,-19.511 24.068,0 0,0 m 58.863,-49.872 c -0.325,-3.089 1.209,-6.078 3.896,-7.631 l 6.286,-3.633 c 3.769,-2.177 5.06,-6.997 2.886,-10.767 L 60.44,-91.823 c -2.177,-3.776 -7.004,-5.069 -10.777,-2.888 l -6.265,3.62 c -2.69,1.555 -6.05,1.399 -8.559,-0.432 -3.365,-2.457 -7.001,-4.568 -10.852,-6.28 -2.833,-1.259 -4.645,-4.086 -4.645,-7.188 v -7.252 c 0,-4.356 -3.531,-7.887 -7.886,-7.887 h -22.971 c -4.355,0 -7.885,3.531 -7.885,7.886 v 7.253 c 0,3.102 -1.813,5.929 -4.645,7.188 -3.851,1.712 -7.487,3.823 -10.853,6.28 -2.509,1.831 -5.869,1.987 -8.559,0.432 l -6.277,-3.628 c -3.767,-2.177 -8.584,-0.885 -10.759,2.886 l -11.495,19.928 c -2.175,3.77 -0.885,8.592 2.883,10.768 l 6.287,3.634 c 2.688,1.553 4.222,4.542 3.896,7.631 -0.217,2.059 -0.329,4.148 -0.329,6.264 0,2.116 0.112,4.206 0.329,6.264 0.326,3.089 -1.208,6.078 -3.896,7.631 l -6.285,3.632 c -3.77,2.178 -5.061,6.998 -2.886,10.769 l 11.496,19.929 c 2.175,3.77 6.992,5.062 10.759,2.885 l 6.286,-3.632 c 2.691,-1.555 6.048,-1.389 8.558,0.443 3.364,2.455 6.996,4.563 10.845,6.273 2.832,1.26 4.645,4.086 4.645,7.189 v 7.252 c 0,4.356 3.53,7.887 7.886,7.887 h 22.97 c 4.355,0 7.886,-3.531 7.886,-7.886 v -7.253 c 0,-3.103 1.812,-5.929 4.645,-7.189 3.848,-1.71 7.481,-3.818 10.845,-6.273 2.51,-1.832 5.867,-1.998 8.557,-0.443 l 6.287,3.632 C 53.443,9.679 58.26,8.387 60.435,4.617 L 71.93,-15.312 c 2.175,-3.771 0.884,-8.591 -2.885,-10.769 l -6.286,-3.632 c -2.687,-1.553 -4.221,-4.542 -3.896,-7.631 0.218,-2.058 0.33,-4.148 0.33,-6.264 0,-2.116 -0.112,-4.205 -0.33,-6.264"
style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path100" />
</g>
<g
id="g102"
transform="translate(564.8286,389.3633)">
<path
d="m 0,0 -21.424,9.99 -37.041,-79.436 21.423,-9.991 z"
style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path104" />
</g>
<g
id="g106"
transform="translate(543.2061,399.4458)">
<path
d="m 0,0 17.2,8.399 4.621,-18.574 z"
style="fill:#3b3735;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path108" />
</g>
<g
id="g110"
transform="translate(469.3218,240.4814)">
<path
d="M 0,0 21.423,-9.99 58.465,69.445 37.042,79.436 Z"
style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path112" />
</g>
<g
id="g114"
transform="translate(490.9443,230.3984)">
<path
d="m 0,0 -17.2,-8.398 -4.622,18.574 z"
style="fill:#e62d2d;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path116" />
</g>
<g
id="g118"
transform="translate(533.7656,314.9224)">
<path
d="m 0,0 c 0,-9.218 -7.473,-16.691 -16.69,-16.691 -9.218,0 -16.691,7.473 -16.691,16.691 0,9.218 7.473,16.69 16.691,16.69 C -7.473,16.69 0,9.218 0,0"
style="fill:#d5d4d4;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path120" />
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB