Make Debug and account buttons links

fluff4me · Jan 9, 2025 · 456271c · 456271c
1 parent 1c493ed
commit 456271c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/ui/component/Masthead.ts b/src/ui/component/Masthead.ts
@@ -94,24 +94,24 @@ const Masthead = Component.Builder('header', (masthead, view: ViewContainer) =>
 				.append(Slot()
 					.use(Session.Auth.author, (slot, author) => {
 						if (!author) {
-							Button()
+							Link('/account')
+								.and(Button)
 								.type('flush')
 								.text.use('masthead/user/profile/popover/login')
-								.event.subscribe('click', () => navigate.toURL('/account'))
 								.appendTo(slot)
 							return
 						}
 
-						Button()
+						Link(`/author/${author.vanity}`)
+							.and(Button)
 							.type('flush')
 							.text.use('masthead/user/profile/popover/profile')
-							.event.subscribe('click', () => navigate.toURL(`/author/${author.vanity}`))
 							.appendTo(slot)
 
-						Button()
+						Link('/account')
+							.and(Button)
 							.type('flush')
 							.text.use('masthead/user/profile/popover/account')
-							.event.subscribe('click', () => navigate.toURL('/account'))
 							.appendTo(slot)
 					}))))
 		.appendTo(masthead)

diff --git a/src/ui/component/Sidebar.ts b/src/ui/component/Sidebar.ts
@@ -1,5 +1,6 @@
 import Component from 'ui/Component'
 import Button from 'ui/component/core/Button'
+import Link from 'ui/component/core/Link'
 import Env from 'utility/Env'
 import Store from 'utility/Store'
 
@@ -20,9 +21,9 @@ const Sidebar = Component.Builder('nav', (sidebar): Sidebar => {
 		.ariaLabel.use('masthead/primary-nav/alt')
 
 	if (Env.ENVIRONMENT === 'dev')
-		Button()
+		Link('/debug')
+			.and(Button)
 			.text.set('Debug')
-			.event.subscribe('click', () => navigate.toURL('/debug'))
 			.appendTo(sidebar)
 
 	updateSidebarVisibility()

diff --git a/style/component/core/button.chiri b/style/component/core/button.chiri
@@ -2,6 +2,7 @@ $$button-background!colour
 $$button-background-highlight!colour
 
 .button:
+	#after: .link
 	%borderless
 	%inline-block
 	%padding-2-3
@@ -12,6 +13,7 @@ $$button-background-highlight!colour
 	%font-family-inherit
 	%font-4
 	%box-shadow-1
+	%decoration-none
 	colour: $button-colour
 	$button-background: $background-interact-4
 	$button-background-highlight: hsl(from $button-background h s calc(l + 6))