refactor(frontend): add navFunction prop to NavbarLink instead of run…

…ning the function outside of the component

Also slightly changes the folder structure for components use by App and shared components

frontend/src/components/NavbarLink.svelte

@@ -1,6 +1,13 @@
-<div
-    class="text-gray-400 no-underline hover:bg-gray-800 flex items-center h-10 text-xl font-sans whitespace-nowrap cursor-pointer"
->
-    <div class="mr-2 ml-1 {$$props.class}" />
-    <slot />
-</div>
+<script lang="ts">
+    export let icon: string;
+    export let navFunction: () => void;
+</script>
+
+<button on:click={navFunction} class="w-full">
+    <div
+        class="text-gray-400 no-underline hover:bg-gray-800 flex items-center h-10 text-xl font-sans whitespace-nowrap cursor-pointer"
+    >
+        <div class="mr-2 ml-1 {icon}" />
+        <slot />
+    </div>
+</button>

frontend/src/components/SidebarMenu.svelte

@@ -16,26 +16,26 @@
     >
         DietPi Dashboard
     </div>
-    <button on:click={() => changePage("/")} class="w-full"
-        ><NavbarLink class="i-fa-gauge-high">Statistics</NavbarLink></button
+    <NavbarLink icon="i-fa-gauge-high" navFunction={() => changePage("/")}
+        >Statistics</NavbarLink
     >
-    <button on:click={() => changePage("/process")} class="w-full"
-        ><NavbarLink class="i-fa-microchip">Processes</NavbarLink></button
+    <NavbarLink icon="i-fa-microchip" navFunction={() => changePage("/process")}
+        >Processes</NavbarLink
     >
-    <button on:click={() => changePage("/service")} class="w-full"
-        ><NavbarLink class="i-fa-list">Services</NavbarLink></button
+    <NavbarLink icon="i-fa-list" navFunction={() => changePage("/service")}
+        >Services</NavbarLink
     >
-    <button on:click={() => changePage("/software")} class="w-full"
-        ><NavbarLink class="i-fa-database">Software</NavbarLink></button
+    <NavbarLink icon="i-fa-database" navFunction={() => changePage("/software")}
+        >Software</NavbarLink
     >
-    <button on:click={() => navigate("/terminal")} class="w-full">
-        <NavbarLink class="i-fa-terminal">Terminal</NavbarLink>
-    </button>
-    <button on:click={() => changePage("/management")} class="w-full"
-        ><NavbarLink class="i-fa-user">Management</NavbarLink></button
+    <NavbarLink icon="i-fa-terminal" navFunction={() => navigate("/terminal")}
+        >Terminal</NavbarLink
     >
-    <button on:click={() => changePage("/browser")} class="w-full"
-        ><NavbarLink class="i-fa-folder">File Browser</NavbarLink></button
+    <NavbarLink icon="i-fa-user" navFunction={() => changePage("/management")}
+        >Management</NavbarLink
+    >
+    <NavbarLink icon="i-fa-folder" navFunction={() => changePage("/browser")}
+        >File Browser</NavbarLink
     >
 </div>
 

frontend/src/pages/Management.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Card from "../components/Card.svelte";
+    import Card from "../shared-components/Card.svelte";
     import prettyMilliseconds from "pretty-ms";
     import { fade } from "svelte/transition";
 

frontend/src/pages/home/GraphCard.svelte

@@ -3,7 +3,7 @@
     import "uplot/dist/uPlot.min.css";
     import prettyBytes from "pretty-bytes";
 
-    import Card from "../../components/Card.svelte";
+    import Card from "../../shared-components/Card.svelte";
 
     import { statisticsStore } from "../../websocket";
 

frontend/src/pages/home/StatsCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import prettyBytes from "pretty-bytes";
 
-    import Card from "../../components/Card.svelte";
+    import Card from "../../shared-components/Card.svelte";
     import StatsRow from "./StatsRow.svelte";
 
     import { statisticsStore } from "../../websocket";