back_to_console

services/console/src/components/navbar/AuthButtons.tsx

@@ -0,0 +1,30 @@
+import { Show } from "solid-js";
+import { authUser } from "../../util/auth";
+import { decodePath } from "../../util/url";
+
+const AuthButtons = () => {
+	return (
+		<Show
+			when={authUser()?.token}
+			fallback={
+				<div class="buttons">
+					<a class="button" href="/auth/login">
+						Log in
+					</a>
+					<a class="button is-primary" href="/auth/signup">
+						<strong>Sign up</strong>
+					</a>
+				</div>
+			}
+		>
+			<a class="button" href={decodePath("/console")}>
+				<span class="icon has-text-primary">
+					<i class="fas fa-angle-left" aria-hidden="true" />
+				</span>
+				<span>Back to Console</span>
+			</a>
+		</Show>
+	);
+};
+
+export default AuthButtons;

services/console/src/components/navbar/Navbar.astro

@@ -6,13 +6,10 @@ import {
 	BENCHER_WORDMARK,
 	BENCHER_WORDMARK_ID,
 } from "../../util/ext";
-import {
-	BENCHER_NAVBAR_AUTH_ID,
-	BENCHER_NAVBAR_BURGER_ID,
-	BENCHER_NAVBAR_MENU_ID,
-} from "./id";
+import { BENCHER_NAVBAR_BURGER_ID, BENCHER_NAVBAR_MENU_ID } from "./id";
 import ThemeToggle from "./theme/ThemeToggle.astro";
 import NavbarHelp from "./NavbarHelp.astro";
+import AuthButtons from "./AuthButtons";
 ---
 
 <nav
@@ -73,15 +70,19 @@ import NavbarHelp from "./NavbarHelp.astro";
 					<NavbarHelp />
 				</div>
 				<div class="navbar-item" />
-				<div id={BENCHER_NAVBAR_AUTH_ID}>
-					<div class="buttons">
-						<a class="button" href="/auth/login">
-							Log in
-						</a>
-						<a class="button is-primary" href="/auth/signup">
-							<strong>Sign up</strong>
-						</a>
-					</div>
+				<div class="navbar-item">
+					<AuthButtons client:only="solid-js">
+						<div slot="fallback">
+							<div class="buttons">
+								<a class="button" href="/auth/login">
+									Log in
+								</a>
+								<a class="button is-primary" href="/auth/signup">
+									<strong>Sign up</strong>
+								</a>
+							</div>
+						</div>
+					</AuthButtons>
 				</div>
 			</div>
 		</div>

services/console/src/components/navbar/id.tsx

@@ -1,4 +1,2 @@
-export const BENCHER_NAVBAR_AUTH_ID = "bencher-navbar-auth";
-
 export const BENCHER_NAVBAR_BURGER_ID = "bencher-navbar-burger";
 export const BENCHER_NAVBAR_MENU_ID = "bencher-navbar-menu";

services/console/src/layouts/docs/InnerLayout.astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from "../BaseLayout.astro";
-import DocsNavbar from "../../components/navbar/DocsNavbar";
 import DocsMenu from "../../components/docs/menu/DocsMenu.astro";
 import { DocsTab } from "../../components/docs/menu/docs_tab";
 import { Author } from "../../components/docs/author";
@@ -48,8 +47,6 @@ const {
   author={author}
   canonical={canonical}
 >
-  <!-- Note that the DocsNavbar does *not* fill the slot `navbar`. It is a client-side override.  -->
-  <DocsNavbar client:only="solid-js" />
   <div class="is-widescreen">
     <div class="columns is-reverse-mobile">
       <div class="columns">

services/console/src/layouts/legal/LegalLayout.astro

@@ -1,5 +1,4 @@
 ---
-import AuthNavbar from "../../components/navbar/DocsNavbar";
 import BaseLayout from "../BaseLayout.astro";
 
 interface Props {
@@ -22,8 +21,6 @@ const { title, titleFmt, description, heading, published, modified } =
   published={published}
   modified={modified}
 >
-  <!-- Note that the AuthNavbar does *not* fill the slot `navbar`. It is a client-side override.  -->
-  <AuthNavbar client:only="solid-js" />
   <section class="section">
     <div class="container">
       <div class="columns">

services/console/src/layouts/perf/PerfLayout.astro

@@ -1,6 +1,5 @@
 ---
 import BaseLayout from "../BaseLayout.astro";
-import AuthNavbar from "../../components/navbar/DocsNavbar";
 
 interface Props {
 	title: string;
@@ -17,7 +16,5 @@ const { title, titleFmt, description, published, modified, image, canonical } =
 ---
 
 <BaseLayout title={title} titleFmt={titleFmt} description={description} published={published} modified={modified} perfImage={image} canonical={canonical ?? Astro.url.pathname}>
-  <!-- Note that the AuthNavbar does *not* fill the slot `navbar`. It is a client-side override.  -->
-  <AuthNavbar client:only="solid-js" />
   <slot />
 </BaseLayout>