Use OverlayMenu for TopBar

src/lib/components/buttons/SvgButton.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { ComponentType } from "svelte";
 
-	export let click: (event: MouseEvent) => void = () => {};
 	export let icon: ComponentType;
 	export let id: string;
 	export let size: number = 24;
@@ -17,7 +16,7 @@
 		style="justify-content: {justifyContent}"
 		{id}
 		bind:this={button}
-		on:click={click}
+		on:click
 		{popovertarget}
 	>
 		<svelte:component

src/lib/components/overlayMenu/elements/Button.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { ComponentType } from "svelte";
 
-	export let click: (event: MouseEvent) => void;
-
 	export let icon: ComponentType;
 
 	export let text: string;
@@ -13,7 +11,7 @@
 </script>
 
 <button
-	on:click={click}
+	on:click
 	style="background-color: {backgroundColor}; color: {buttonColor}"
 >
 	<svelte:component this={icon} ariaLabel="" class="icon" tabindex="-1" />

src/lib/components/project/ProjectItemDropDownMenu.svelte

@@ -69,7 +69,7 @@
 					? Check_box
 					: Check_box_outline_blank}
 				text="Include in periodic check"
-				click={togglePeriodicCheck}
+				on:click={togglePeriodicCheck}
 			/>
 		</Panel>
 	{/if}
@@ -94,7 +94,7 @@
 		<Button
 			icon={Delete}
 			text="Delete"
-			click={() => {
+			on:click={() => {
 				if (id instanceof SystemId) {
 					$systems?.delete(id);
 					$systems = $systems;

src/lib/components/project/ProjectNav.svelte

@@ -49,13 +49,13 @@
 	<div class="buttons">
 		<SvgButton
 			icon={Create_new_folder}
-			click={addComponent}
+			on:click={addComponent}
 			size={30}
 			id="add-component"
 		/>
 		<SvgButton
 			icon={Note_add}
-			click={addSystem}
+			on:click={addSystem}
 			size={30}
 			id="add-system"
 		/>

src/lib/components/query/Query.svelte

@@ -70,7 +70,7 @@
 		<div class="group">
 			<SvgButton
 				icon={Arrow_right}
-				click={runQuery}
+				on:click={runQuery}
 				id="run-query"
 				color="var(--sidebar-text-color)"
 			/>

src/lib/components/query/QueryDropDownMenu.svelte

@@ -40,7 +40,7 @@
 		<Button
 			icon={isPeriodic ? Check_box : Check_box_outline_blank}
 			text="Run Periodically"
-			click={togglePeriodicCheck}
+			on:click={togglePeriodicCheck}
 		/>
 	</Panel>
 	<Panel>
@@ -50,7 +50,7 @@
 		<Button
 			icon={Delete}
 			text="Delete"
-			click={() => {
+			on:click={() => {
 				$queries?.splice(index, 1);
 				$queries = $queries;
 			}}

src/lib/components/query/QueryNav.svelte

@@ -25,16 +25,16 @@
 		<h1>Queries</h1>
 	</div>
 	<div class="buttons">
-		<SvgButton icon={Add} click={addQuery} size={30} id="add-query" />
+		<SvgButton icon={Add} on:click={addQuery} size={30} id="add-query" />
 		<SvgButton
 			icon={Arrow_right}
-			click={runAllQueries}
+			on:click={runAllQueries}
 			size={30}
 			id="run-all-queries"
 		/>
 		<SvgButton
 			icon={Menu}
-			click={resetAllStatus}
+			on:click={resetAllStatus}
 			size={30}
 			id="reset-all-status"
 		/>

src/lib/components/samplesImplementations/DropDownMenu.svelte

@@ -12,9 +12,9 @@
 <button bind:this={button} popovertarget={menuId}>Files</button>
 <OverlayMenu anchor={button} id={menuId}>
 	<Panel>
-		<Button icon={Download} text="Load" click={() => {}} />
+		<Button icon={Download} text="Load" on:click={() => {}} />
 	</Panel>
 	<Panel>
-		<Button icon={Save} text="Save" click={() => {}} />
+		<Button icon={Save} text="Save" on:click={() => {}} />
 	</Panel>
 </OverlayMenu>

src/lib/components/startScreen/StartScreen.svelte

@@ -28,7 +28,7 @@
 		<div class="flex-column">
 			<div class="bottom-border">
 				<SvgButton
-					click={startNewProject}
+					on:click={startNewProject}
 					icon={Add}
 					id={`start-new-project`}
 					color="var(--text-color)"
@@ -47,7 +47,7 @@
 						id={`open-example-${exampleName.replaceAll(" ", "-")}`}
 						color="var(--text-color)"
 						justifyContent="center"
-						click={async () => {
+						on:click={async () => {
 							await projectHandler.openExampleProject(
 								exampleLoader,
 							);
@@ -59,7 +59,7 @@
 		<div class="flex-column">
 			<div class="bottom-border">
 				<SvgButton
-					click={async () => {
+					on:click={async () => {
 						await projectHandler.openProject();
 					}}
 					icon={File_open}
@@ -78,7 +78,7 @@
 						id={`open-project`}
 						color="var(--text-color)"
 						justifyContent="center"
-						click={async () => {
+						on:click={async () => {
 							await projectHandler.openRecentProject(
 								recentProject,
 							);

src/lib/components/topBar/DropDownCheckBox.svelte

@@ -1,56 +1,59 @@
 <script lang="ts">
-	import { createEventDispatcher, type ComponentType } from "svelte";
-	import DropDownButton from "./DropDownButton.svelte";
-	import { Done } from "svelte-google-materialdesign-icons";
+	import { createEventDispatcher } from "svelte";
+	import Button from "$lib/components/overlayMenu/elements/Button.svelte";
 	import {
+		Check_box,
+		Check_box_outline_blank,
+	} from "svelte-google-materialdesign-icons";
+	/*import {
 		checkboxStates,
 		addCheckbox,
-	} from "$lib/globalState/topbarCheckBoxes";
+	} from "$lib/globalState/topbarCheckBoxes";*/
 
-	//Set dafult values
-	export let name: string = "Default";
-	let icon: ComponentType = Done;
+	//Set default values
+	export let text: string = "Default";
 	export let defaultVal: boolean = false;
 	let checked: boolean = defaultVal;
+	$: icon = checked ? Check_box : Check_box_outline_blank;
 	let unique = {};
 
-	addCheckbox(name, defaultVal);
-	checkboxStates[name].subscribe((value) => {
+	/*addCheckbox(text, defaultVal);
+	checkboxStates[text].subscribe((value) => {
 		checked = value;
-	});
+	});*/
 
 	const dispatch = createEventDispatcher();
 
 	function onCheck() {
+		checked = true;
+		//checkboxStates[text].set(true);
 		dispatch("checked");
 	}
 
 	function onUnCheck() {
+		checked = false;
+		//checkboxStates[text].set(false);
 		dispatch("unchecked");
 	}
 
-	function whatToCall(c: boolean) {
-		c ? onCheck() : onUnCheck();
+	function toggle() {
+		if (checked) {
+			onUnCheck();
+		} else {
+			onCheck();
+		}
 	}
 
-	whatToCall(checked);
+	toggle();
 </script>
 
 <!--Make each dropdown item, into button-->
 {#key unique}
-	<DropDownButton
-		{name}
+	<Button
+		{text}
 		{icon}
-		color={checked ? "black" : "transparent"}
 		on:click={() => {
-			checkboxStates[name].update(() => {
-				if (checked) {
-					onUnCheck();
-				} else {
-					onCheck();
-				}
-				return !checked;
-			});
+			toggle();
 			unique = {};
 		}}
 	/>