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", "name": "svelte-testing",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"svelte-gestures": "^1.4.1",
"svelte-language-server": "^0.14.29" "svelte-language-server": "^0.14.29"
}, },
"devDependencies": { "devDependencies": {
@ -3183,6 +3184,11 @@
"svelte": "^3.24.0" "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": { "node_modules/svelte-hmr": {
"version": "0.14.12", "version": "0.14.12",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",
@ -5951,6 +5957,11 @@
"typescript": "*" "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": { "svelte-hmr": {
"version": "0.14.12", "version": "0.14.12",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz", "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.14.12.tgz",

1
package.json
View File

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

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

@ -1,4 +1,6 @@
<script> <script>
import {fly} from "svelte/transition";
import {swipe} from "svelte-gestures";
import Button from './navbutton.svelte'; import Button from './navbutton.svelte';
export /** export /**
* @type {any} * @type {any}
@ -11,7 +13,10 @@
on:click={() => { on:click={() => {
open = !open; 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="/" text="Home" />
<Button link="/about" text="About" /> <Button link="/about" text="About" />