Responsive navbar

web/src/Routes.tsx

@@ -7,12 +7,17 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Router, Route, Set } from '@redwoodjs/router'
+
+import NavbarLayout from './layouts/NavbarLayout/NavbarLayout'
 
 const Routes = () => {
   return (
     <Router>
-      <Route path="/" page={HomePage} name="home" />
+      <Set wrap={NavbarLayout}>
+        <Route path="/" page={HomePage} name="home" />
+      </Set>
+
       <Route notfound page={NotFoundPage} />
     </Router>
   )

web/src/layouts/NavbarLayout/NavbarLayout.stories.tsx

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

web/src/layouts/NavbarLayout/NavbarLayout.test.tsx

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

web/src/layouts/NavbarLayout/NavbarLayout.tsx

@@ -0,0 +1,85 @@
+import { mdiMenu } from '@mdi/js'
+import Icon from '@mdi/react'
+
+import { Link, routes } from '@redwoodjs/router'
+
+import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
+
+interface NavbarRoute {
+  name: string
+  path: string
+}
+
+type NavbarLayoutProps = {
+  children?: React.ReactNode
+}
+
+const NavbarLayout = ({ children }: NavbarLayoutProps) => {
+  // TODO: populate with buttons to other page
+  const navbarRoutes: NavbarRoute[] = [
+    {
+      name: 'Test',
+      path: routes.home(),
+    },
+  ]
+
+  const navbarButtons = () =>
+    navbarRoutes.map((route, i) => (
+      <Link key={i} to={route.path} className="btn btn-ghost btn-sm">
+        {route.name}
+      </Link>
+    ))
+
+  return (
+    <>
+      <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">
+            <div className="dropdown">
+              <div
+                tabIndex={0}
+                role="button"
+                className="btn btn-ghost lg:hidden"
+              >
+                <Icon
+                  path={mdiMenu}
+                  className="text-base-content-100 h-8 w-8"
+                />
+              </div>
+              <div
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={0}
+                className="menu dropdown-content -ml-2 mt-4 w-36 space-y-2 rounded-box bg-base-200 shadow-xl"
+              >
+                {navbarButtons()}
+              </div>
+            </div>
+            <Link
+              to={routes.home()}
+              className="btn btn-ghost hidden font-syne text-xl sm:flex"
+            >
+              Ahmed Al-Taiar
+            </Link>
+          </div>
+          <div className="navbar-center">
+            <Link
+              to={routes.home()}
+              className="btn btn-ghost font-syne text-xl sm:hidden"
+            >
+              Ahmed Al-Taiar
+            </Link>
+          </div>
+          <div className="navbar-center hidden lg:flex">
+            <div className="space-x-2 font-syne">{navbarButtons()}</div>
+          </div>
+          <div className="navbar-end">
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+      <div className="font-inter">{children}</div>
+    </>
+  )
+}
+
+export default NavbarLayout