Navbar and Footer

Now that we have light and dark mode, let’s add a navigation bar to our site. We’ll use the <HeaderWithSearch /> component that is included with the Epic Stack.

Importing HeaderWithSearch

First, let’s add the component to our app/root.tsx file.

app/root.tsx

import { type LinksFunction } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import Document from '~/components/shared-layout/Document'
import ThemeSwitch from '~/components/shared-layout/ThemeSwitch'
import { useNonce } from '~/utils/nonce-provider.ts'
import rootLinkElements from '~/utils/providers/rootLinkElements'
import { loader } from './__root.server'
import useTheme from './hooks/useTheme.tsx'
import HeaderWithSearch from './components/organisms/HeaderWithSearch'

export const links: LinksFunction = () => {
  return rootLinkElements
}
export { headers, meta } from './__root.client.tsx'
export { action, loader } from './__root.server.tsx'

export default function App() {
  const data = useLoaderData<typeof loader>()
  const nonce = useNonce()
  const theme = useTheme()

  return (
    <Document nonce={nonce} theme={theme}>
      <div className="flex h-screen flex-col justify-between">
        <HeaderWithSearch />

        <div className="flex-1">
          <main className="grid h-full place-items-center">
            <h1 className="text-mega">Welcome to Epic News!</h1>
          </main>
        </div>

        <div className="container flex justify-between pb-5">
          <ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
        </div>
      </div>
    </Document>
  )
}

Check the browser

Head across to your browser and you should see the navigation bar at the top of the page. It should look something like this:

You’ll notice that if you click the Log in button, nothing happens. This is because we haven’t implemented the login functionality yet. We’ll do that in a later section. For now, let’s add a footer to our site.

Challenge

Adding a Footer

Now that we have a navigation bar, let’s add a footer by importing one from our components folder .

If you look closely inside the app/components/organisms/Footer directory, you’ll see three different footer components.

Using the same techniques we learned about to add the navigation bar above, add a footer to your site yourself.

You can choose any of the three above to get started (i.e. Basic, FooterLogoCentre or FooterRight). You will be customising them later.

After you’ve tried this yourself, or if you get stuck, you can find the solution below.

For this solution, I’m going to use the FooterMenuRight component, but you can choose whatever you like.

Import the component

First, let’s import the component at the top of our root.tsx file:

app/root.tsx

import { type LinksFunction } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import Document from '~/components/shared-layout/Document'
import ThemeSwitch from '~/components/shared-layout/ThemeSwitch'
import { useNonce } from '~/utils/nonce-provider.ts'
import rootLinkElements from '~/utils/providers/rootLinkElements'
import { loader } from './__root.server'
import useTheme from './hooks/useTheme.tsx'
import HeaderWithSearch from './components/organisms/HeaderWithSearch'
import FooterMenuRight from './components/organisms/Footer/FooterMenuRight'

Add FooterMenuRight to the UI

Next, let’s slot the FooterMenuRight component towards the bottom of our App component. Take care to place this just above the final closing </div> tag:

app/root.tsx

export default function App() {
  const data = useLoaderData<typeof loader>()
  const nonce = useNonce()
  const theme = useTheme()

  return (
    <Document nonce={nonce} theme={theme}>
      <div className="flex h-screen flex-col justify-between">
        <HeaderWithSearch />

        <div className="flex-1">
          <main className="grid h-full place-items-center">
            <h1 className="text-mega">Welcome to Epic News!</h1>
          </main>
        </div>

        <div className="container flex justify-between pb-5">
          <ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
        </div>

        <FooterMenuRight />
      </div>
    </Document>
  )
}

Check the browser

Save your work and check the browser. Scroll the page down, and you should see a footer at the bottom of the page:

Finally, remember to tidy up your imports at the top of the file using the VS Code keyboard shortcut Shift + Alt + O (on Windows) or Shift + Option + O (on Mac).

Adding a footer

🎉 Congratulations! 🎉

You now have a professional navigation bar and footer on your site! 😎

How can we start to customise it?

Summary

In this tutorial we:

• Revised how to import components into our root.tsx file.
• Added a navigation bar to our site using the <HeaderWithSearch /> component.
• Added a footer to our site using the <FooterMenuRight /> component.

What’s next?

In the next section, we’ll look at how we can begin to customise the colours and content of our navigation bar and footer.