Skip to content
This repository has been archived by the owner on Oct 19, 2022. It is now read-only.

Commit

Permalink
Better router
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jul 13, 2022
1 parent c779f8d commit b1a6ca8
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 262 deletions.
101 changes: 38 additions & 63 deletions interface/components/navigation.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,46 @@
<div class="transparent-900 flex h-full flex-col justify-between overflow-visible shadow-2xl">
<div class="flex flex-col">
<Link to="/codes">
<button on:click={() => changeClasses("codes")} class="codes selectedMenuButton mt-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
Codes
</button>
</Link>

<Link to="/import">
<button on:click={() => changeClasses("import")} class="import menuButton mx-3 mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3" />
</svg>
Import
</button>
</Link>

<Link to="/export">
<button on:click={() => changeClasses("export")} class="menuButton export">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
</svg>
Export
</button>
</Link>
<a href="/codes" use:active data-active-class="selectedMenuButton" class="menuButton mt-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
Codes
</a>

<a href="/import" use:active data-active-class="selectedMenuButton" class="menuButton mx-3 mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3" />
</svg>
Import
</a>

<a href="/export" use:active data-active-class="selectedMenuButton" class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
<path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
</svg>
Export
</a>

<Link to="/edit">
<button on:click={() => changeClasses("edit")} class="menuButton edit">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Edit
</button>
</Link>
<a href="/edit" use:active data-active-class="selectedMenuButton" class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
Edit
</a>
</div>

<div class="flex-flex-col">
<Link to="/settings">
<button on:click={() => changeClasses("settings")} class="settings menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</button>
</Link>
<a href="/settings" use:active data-active-class="selectedMenuButton" class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</a>

<button class="menuButton">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
Expand All @@ -62,20 +52,5 @@
</div>

<script lang="ts">
import { Link } from "svelte-routing"
let currentRoute = "codes"
const changeClasses = (name) => {
const current = document.querySelector(`.${currentRoute}`)
const next = document.querySelector(`.${name}`)
current.classList.remove("selectedMenuButton")
current.classList.add("menuButton")
next.classList.remove("menuButton")
next.classList.add("selectedMenuButton")
currentRoute = name
}
import { active } from "tinro"
</script>
38 changes: 23 additions & 15 deletions interface/layout/app.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,26 @@
<title>hi</title>
</svelte:head>

<Router>
<div class="flex h-screen">
<Navigation />

<div class="w-full overflow-hidden overflow-y-scroll">
<Route path="/" component={Landing} />
<Route path="/settings" component={Settings} />
<Route path="/codes" component={Codes} />
<Route path="/import" component={Import} />
<Route path="/export" component={Export} />
<Route path="/edit" component={Edit} />
<Route path="/confirm" component={Confirm} />
</div>
<div class="flex h-screen">
<Navigation />

<div class="w-full overflow-hidden overflow-y-scroll">
<div class="top" />

<Route path="/"><Landing /></Route>
<Route path="/confirm"><Confirm /></Route>

<Route path="/codes"><Codes /></Route>
<Route path="/import"><Import /></Route>
<Route path="/export"><Export /></Route>
<Route path="/edit"><Edit /></Route>
<Route path="/settings"><Settings /></Route>
</div>
</Router>
</div>

<script lang="ts">
import { Router, Route } from "svelte-routing"
import { Route, router } from "tinro"
import { onMount } from "svelte"
import UpdateAlert from "../components/updateAlert.svelte"
Expand All @@ -31,4 +33,10 @@
import Confirm from "../windows/confirm.svelte"
import Navigation from "../components/navigation.svelte"
import Edit from "../windows/edit.svelte"
onMount(() => {
router.subscribe(() => {
document.querySelector(".top").scrollIntoView()
})
})
</script>
Loading

0 comments on commit b1a6ca8

Please sign in to comment.