Logo Design

Now that we have a navigation bar and footer, let’s customise them by adding:

A logo to the navigation bar and footer
A custom footer message
Links to other pages in the website

Adding a Logo

To add a logo to the navigation bar, we need to update the HeaderWithSearch component.

Open the HeaderWithSearch component in your code editor. This is found at app/components/organisms/HeaderWithSearch.tsx.

Adding a section for the logo

Look carefully at your navbar header in the browser, and think carefully where you want to place the logo.

Typically, the logo is placed on the left side of the navigation bar:

Look carefully at the HeaderWithSearch component and decide where you should place a new div to encapsulate the new logo.

import { useMatches, Link } from 'react-router'
import { SearchBar } from '#app/components/search-bar.tsx'
import { Button } from '#app/components/ui/button.tsx'
import { UserDropdown } from '#app/components/user-dropdown.tsx'
import { useOptionalUser } from '#app/utils/user.ts'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find((m) => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />
  const user = useOptionalUser()

  return (
    <header className="container py-6">
      <nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          {user ? (
            <UserDropdown />
          ) : (
            <Button asChild variant="default" size="lg">
              <Link to="/login">Log In</Link>
            </Button>
          )}
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

When you have added your text, compare your solution with the one below:

1
import { useMatches } from '@remix-run/react'
2
import { SearchBar } from '../molecules/SearchBar'
3
import LoginOrUserDropdown from './LoginOrUserDropdown'
4

5
export default function HeaderWithSearch() {
6
  const matches = useMatches()
7
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
8
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />
9

10
  return (
11
    <header className="dark:bg-dark-primary/10 bg-primary/10 py-6">
12
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
13
        <div>
14
          <span className="text-sm text-foreground">Epic News</span>
15
        </div>
16
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
17
          {searchBar}
18
        </div>
19
        <div className="flex items-center gap-10">
20
          <LoginOrUserDropdown />
21
        </div>
22
        <div className="block w-full sm:hidden">{searchBar}</div>
23
      </nav>
24
    </header>
25
  )
26
}

With this in place, your navbar should look something like this:

Add logo placeholder

Create a logo

Now that we have a placeholder for our logo, let’s create a logo for our site. Figma is perfect for this.

Summary

In this tutorial we have:

Added a placeholder for the logo in the navigation bar
Created a logo for the site using Figma
Exported the logo as a PNG file

Next Steps

In the next section, we will add the logo to the navigation bar and footer.