Use bootstrap

site/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^1.8.0",
+    "bootstrap": "^5.1.3",
     "normalize.css": "^8.0.1"
   }
 }

site/src/components/Header.astro

@@ -0,0 +1,6 @@
+---
+import HeaderNav from "./HeaderNav.astro";
+---
+<header>
+    <HeaderNav />
+</header>

site/src/components/Header/index.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { Auth0Provider } from "@auth0/auth0-react";
-import LoginButton from "../LoginButton";
-import LogoutButton from "../LogoutButton";
-import config from "../../config";
-import Styles from "./styles.module.scss";
-
-const Header = () => {
-  return (
-    <header>      
-      <Auth0Provider
-        domain={config.auth0.domain}
-        clientId={config.auth0.clientId}
-        redirectUri={window.location.origin}
-        audience={config.auth0.audience}
-        scope="read:stuff"
-      >
-        <LoginButton />
-        <LogoutButton />
-      </Auth0Provider>
-    </header>
-  );
-};
-
-export default Header;

site/src/components/Header/styles.module.scss

@@ -1,4 +0,0 @@
-header {
-    display: flex;
-    justify-content: flex-end;
-}

site/src/components/HeaderAuth.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Auth0Provider } from "@auth0/auth0-react";
+import config from "../config";
+import LoginButton from "./LoginButton";
+import LogoutButton from "./LogoutButton";
+
+const HeaderAuth = () => {
+    return (
+        <div class="d-flex">
+            <Auth0Provider
+                domain={config.auth0.domain}
+                clientId={config.auth0.clientId}
+                redirectUri={window.location.origin}
+                audience={config.auth0.audience}
+                scope="read:stuff">
+                    <LoginButton />
+                    <LogoutButton />
+            </Auth0Provider>
+        </div>
+    );
+};
+
+export default HeaderAuth;

site/src/components/HeaderNav.astro

@@ -0,0 +1,10 @@
+---
+import HeaderAuth from "./HeaderAuth.jsx";
+---
+<nav class="navbar navbar-expand-lg navbar-light" tabIndex="-1">
+    <div class="container-fluid">
+        <a href="#" class="navbar-brand">forget me not</a>
+        
+        <HeaderAuth client:only />
+    </div>
+</nav>

site/src/components/LoginButton.jsx

@@ -5,7 +5,12 @@ const LoginButton = () => {
   const { loginWithRedirect, isAuthenticated } = useAuth0();
 
   return (
-    !isAuthenticated && <button onClick={() => loginWithRedirect()}>Log In</button>
+    !isAuthenticated &&
+    <button
+      class="btn btn-link"
+      onClick={() => loginWithRedirect()}>
+        Log In
+    </button>
   );
 };
 

site/src/components/LogoutButton.jsx

@@ -5,12 +5,12 @@ const LogoutButton = () => {
   const { logout, isAuthenticated } = useAuth0();
 
   return (
-    (
+    isAuthenticated &&
-      isAuthenticated &&
+    <button
-      <button onClick={() => logout({ returnTo: window.location.origin })}>
+      class="btn btn-link" 
+      onClick={() => logout({ returnTo: window.location.origin })}>
         Log Out
-      </button>
+    </button>
-    )
   );
 };
 

site/src/layouts/BaseLayout.astro

@@ -1,14 +1,35 @@
 ---
-import Header from "../components/Header/index.jsx";
+import Header from "../components/Header.astro";
 let { title } = Astro.props;
 ---
-<style lang="scss">
+<style global lang="scss">
-    @use "../styles/base";
+    @import "../../node_modules/bootstrap/scss/functions";
-    @use "../styles/global";
+
+    // bootstrap variable overrides
+    $body-bg: #fff;
+
+    // required bootstrap modules
+    @import "../../node_modules/bootstrap/scss/variables";
+    @import "../../node_modules/bootstrap/scss/mixins";
+    @import "../../node_modules/bootstrap/scss/root";
+
+    // optional bootstrap modules
+    @import "../../node_modules/bootstrap/scss/utilities";
+    @import "../../node_modules/bootstrap/scss/reboot";
+    @import "../../node_modules/bootstrap/scss/type";
+    @import "../../node_modules/bootstrap/scss/containers";
+    @import "../../node_modules/bootstrap/scss/nav";
+    @import "../../node_modules/bootstrap/scss/navbar";
+    @import "../../node_modules/bootstrap/scss/forms";
+    @import "../../node_modules/bootstrap/scss/buttons";
+    @import "../../node_modules/bootstrap/scss/helpers";
+    
+    @import "../node_modules/bootstrap/scss/utilities/api";
+
+    // local styles
+    @import "../styles/_typography";
 
     body {
-        background-color: base.$bg-color;
-        padding: 10px;
         font-family: 'NotoSerif';
     }
 </style>
@@ -16,13 +37,13 @@ let { title } = Astro.props;
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{title}</title>
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 </head>
 <body>
-    <Header client:only />
+    <Header />
-    <main>
+    <main class="container">
         <slot/>
     </main>
 </body>

site/src/styles/_base.scss

@@ -1 +0,0 @@
-$bg-color: #fff;

site/src/styles/global.scss

@@ -1,8 +0,0 @@
-@use "normalize.css/normalize.css";
-@use "base";
-@use "tokens";
-@use "typography";
-@use "utils";
-
-body {
-}