PluralKit/src/App.svelte

70 lines
No EOL
2 KiB
Svelte

<script lang="ts">
import { Router, Route } from "svelte-navigator";
import Navigation from "./lib/Navigation.svelte";
import Dash from "./pages/Dash.svelte";
import Home from "./pages/Home.svelte";
import Settings from './pages/Settings.svelte';
import Footer from './lib/Footer.svelte';
import Public from "./pages/Public.svelte";
import System from "./pages/profiles/System.svelte";
// theme cdns (I might make some myself too)
let light = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css";
let dark = "https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css";
let styleSrc = dark;
// if there's a style already set, retrieve it
let style = localStorage.getItem("pk-style") && localStorage.getItem("pk-style");
// this automatically applies the style every time it is updated
$: setStyle(style);
// not sure if there's a better way to handle this
function setStyle(style) {
switch (style) {
case "light": styleSrc = light;
localStorage.setItem("pk-style", "light");
break;
case "dark": styleSrc = dark;
localStorage.setItem("pk-style", "dark");
break;
default: styleSrc = dark;
localStorage.setItem("pk-style", "dark");
};
};
</script>
<svelte:head>
<link rel="stylesheet" href={styleSrc}>
</svelte:head>
<Router>
<Navigation bind:style={style}/>
<Route path="/"><Home /></Route>
<Route path="dash"><Dash /></Route>
<Route path="settings"><Settings /></Route>
<Route path="profile/*">
<Route path="/"><Public /></Route>
<Route path = "s/:id">
<System />
</Route>
<Route path = "s">
hey please provide a system
</Route>
<Route path = "m/:id">
member
</Route>
<Route path = "m">
hey please provide a member
</Route>
<Route path = "g/:id">
group!
</Route>
<Route path = "g">
hey please provide a group
</Route>
</Route>
<Footer />
</Router>