DutchEllie
/
svelte-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Add animation on navbar
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-10 13:01:12 +02:00
parent 64878359e3
commit 7fbfbbbf35
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
3 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "svelte-testing",
"version": "0.0.1",
"dependencies": {
"svelte-gestures": "^1.4.1",
"svelte-language-server": "^0.14.29"
},
"devDependencies": {
@ -3183,6 +3184,11 @@
"svelte": "^3.24.0"
}
},
"node_modules/svelte-gestures": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
},
"node_modules/svelte-hmr": {
"version": "0.14.12",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",
@ -5951,6 +5957,11 @@
"typescript": "*"
}
},
"svelte-gestures": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.4.1.tgz",
"integrity": "sha512-TAmfcz+DgdfrRDFSQ9UsXxhqDjQR7LaUaALauqITaTCVSHPWXIZ9WSBPP6DrXh9MYqgVZwy85wJdv7NQPwsZfA=="
},
"svelte-hmr": {
"version": "0.14.12",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",

1
package.json
View File

@ -35,6 +35,7 @@
},
"type": "module",
"dependencies": {
"svelte-gestures": "^1.4.1",
"svelte-language-server": "^0.14.29"
}
}

7
src/components/misc/menu.svelte
View File

@ -1,4 +1,6 @@
<script>
import {fly} from "svelte/transition";
import {swipe} from "svelte-gestures";
import Button from './navbutton.svelte';
export /**
* @type {any}
@ -11,7 +13,10 @@
on:click={() => {
open = !open;
}}
class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16"
transition:fly={{x: -600}}
class="z-10 bg-gradient-to-tr dark:bg-gradient-to-tr absolute top-0 left-0 h-screen w-screen flex flex-col gap-4 text-center pt-16
{open ? "translate-x-0" : "-translate-x-full"}
"
>
<Button link="/" text="Home" />
<Button link="/about" text="About" />