Singular (admin) account system

web/src/layouts/AccountbarLayout/AccountbarLayout.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AccountbarLayout from './AccountbarLayout'
+
+const meta: Meta<typeof AccountbarLayout> = {
+  component: AccountbarLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof AccountbarLayout>
+
+export const Primary: Story = {}

web/src/layouts/AccountbarLayout/AccountbarLayout.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import AccountbarLayout from './AccountbarLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('AccountbarLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<AccountbarLayout />)
+    }).not.toThrow()
+  })
+})

web/src/layouts/AccountbarLayout/AccountbarLayout.tsx

@@ -0,0 +1,35 @@
+import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
+import ToasterWrapper from 'src/components/ToasterWrapper/ToasterWrapper'
+
+type AccountbarLayoutProps = {
+  title: string
+  children?: React.ReactNode
+}
+
+const AccountbarLayout = ({ title, children }: AccountbarLayoutProps) => {
+  return (
+    <>
+      <ToasterWrapper />
+      <div className="sticky top-0 z-50 p-2">
+        <div className="navbar rounded-xl bg-base-300 shadow-xl">
+          <div className="navbar-start">
+            <p className="btn btn-ghost font-syne text-xl sm:hidden">{title}</p>
+          </div>
+          <div className="navbar-center">
+            <p className="btn btn-ghost hidden font-syne text-xl sm:flex">
+              {title}
+            </p>
+          </div>
+          <div className="navbar-end">
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+      <div className="font-inter">
+        <main>{children}</main>
+      </div>
+    </>
+  )
+}
+
+export default AccountbarLayout

web/src/layouts/NavbarLayout/NavbarLayout.tsx

@@ -1,11 +1,11 @@
-import { mdiMenu } from '@mdi/js'
+import { mdiMenu, mdiLogout } from '@mdi/js'
 import Icon from '@mdi/react'
 
 import { Link, routes } from '@redwoodjs/router'
-import { Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
 import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
-import ToastNotification from 'src/components/ToastNotification/ToastNotification'
+import ToasterWrapper from 'src/components/ToasterWrapper/ToasterWrapper'
 
 interface NavbarRoute {
   name: string
@@ -17,6 +17,8 @@ type NavbarLayoutProps = {
 }
 
 const NavbarLayout = ({ children }: NavbarLayoutProps) => {
+  const { isAuthenticated, logOut } = useAuth()
+
   // TODO: populate with buttons to other page
   const navbarRoutes: NavbarRoute[] = [
     {
@@ -34,22 +36,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
 
   return (
     <>
-      <Toaster
-        position="top-right"
-        containerClassName="-mr-2 mt-16"
-        containerStyle={{
-          zIndex: 50, // "z-50" does not work
-        }}
-        gutter={8}
-      >
-        {(t) => (
-          <ToastNotification
-            t={t}
-            type={t.type}
-            message={t.message.toString()}
-          />
-        )}
-      </Toaster>
+      <ToasterWrapper />
       <div className="sticky top-0 z-50 p-2">
         <div className="navbar rounded-xl bg-base-300 shadow-xl">
           <div className="navbar-start space-x-2 lg:first:space-x-0">
@@ -76,7 +63,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
               to={routes.home()}
               className="btn btn-ghost hidden font-syne text-xl sm:flex"
             >
-              Ahmed Al-Taiar
+              {process.env.NAME}
             </Link>
           </div>
           <div className="navbar-center">
@@ -84,13 +71,20 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
               to={routes.home()}
               className="btn btn-ghost font-syne text-xl sm:hidden"
             >
-              Ahmed Al-Taiar
+              {process.env.NAME}
             </Link>
           </div>
           <div className="navbar-center hidden lg:flex">
             <div className="space-x-2 font-syne">{navbarButtons()}</div>
           </div>
-          <div className="navbar-end">
+          <div className="navbar-end space-x-2">
+            {isAuthenticated ? (
+              <button className="btn btn-square btn-ghost" onClick={logOut}>
+                <Icon path={mdiLogout} className="h-8 w-8" />
+              </button>
+            ) : (
+              <></>
+            )}
             <ThemeToggle />
           </div>
         </div>