feat: style menu hover and integrate github

peterpeterparker · Jan 26, 2025 · d686ec1 · d686ec1
1 parent bb03893
commit d686ec1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/src/lib/components/core/GitHub.svelte b/src/lib/components/core/GitHub.svelte
@@ -7,18 +7,8 @@
 	href="https://github.com/peterpeterparker/cycles.watch"
 	rel="external noopener norefferer"
 	target="_blank"
+	class="menu"
 >
 	<IconGitHub />
+	<span>GitHub</span>
 </a>
-
-<style lang="scss">
-	a {
-		display: flex;
-		flex-direction: column;
-		width: 3rem;
-		height: 3rem;
-		margin: 0.45rem 0.15rem;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
diff --git a/src/lib/components/core/Menu.svelte b/src/lib/components/core/Menu.svelte
@@ -11,6 +11,7 @@
 	import { clear } from 'idb-keyval';
 	import IconPlus from '$lib/components/icons/IconPlus.svelte';
 	import { emitAddCanister } from '$lib/utils/events.utils';
+	import GitHub from '$lib/components/core/GitHub.svelte';
 
 	let visible: boolean | undefined;
 	let button: HTMLButtonElement | undefined;
@@ -43,11 +44,11 @@
 	bind:this={button}
 	title="Open to access more features"
 >
-	<IconMenu slot="icon" />
+	<IconMenu />
 	<span class="visually-hidden">Menu</span>
 </button>
 
-<Popover bind:visible anchor={button}>
+<Popover bind:visible anchor={button} direction="rtl">
 	{#if $authSignedInStore}
 		<button
 			type="button"
@@ -72,6 +73,8 @@
 		<span>Settings</span>
 	</button>
 
+	<GitHub />
+
 	{#if $authSignedInStore}
 		<button
 			type="button"

diff --git a/src/lib/components/core/Toolbar.svelte b/src/lib/components/core/Toolbar.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
 	import Menu from './Menu.svelte';
-	import GitHub from './GitHub.svelte';
 </script>
 
 <nav>
 	<Menu />
-
-	<GitHub />
 </nav>
 
 <style lang="scss">
 	nav {
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-end;
 	}
 </style>
diff --git a/src/lib/themes/mixins/_button.scss b/src/lib/themes/mixins/_button.scss
@@ -55,16 +55,20 @@
 	border: none;
 	margin: 0;
 	justify-content: flex-start;
-	padding: 0.25rem 1rem;
+	padding: 0.25rem 0.5rem;
 	font-size: var(--font-size-h5);
 
 	svg {
-		margin: 0.45rem 1.25rem 0.45rem 0.45rem;
+		margin: 0.45rem 0.75rem 0.45rem 0.45rem;
 		width: 1.25rem;
 		height: 1.25rem;
 		background: white;
 	}
 
+	span {
+		padding: 0 var(--padding);
+	}
+
 	&:hover:not(:disabled),
 	&:focus:not(:disabled) {
 		background: inherit;
@@ -73,6 +77,7 @@
 		span {
 			background: rgba(var(--color-primary-rgb), 0.4);
 			color: var(--color-primary-contrast);
+			border-radius: var(--padding);
 		}
 	}
 }