degmods.com/src/layout/header.tsx

import navStyles from '../styles/nav.module.scss'
import mainStyles from '../styles//main.module.scss'
import { Banner } from '../components/Banner'
import { Link } from 'react-router-dom'
import { appRoutes } from '../routes'
import {
  init as initNostrLogin,
  launch as launchNostrLoginDialog
} from 'nostr-login'
import { useEffect } from 'react'
import { useAppDispatch, useAppSelector } from '../hooks'
import { setIsAuth, setUser } from '../store/reducers/user'
import { MetadataController } from '../controllers'
import { npubToHex } from '../utils'

export const Header = () => {
  const dispatch = useAppDispatch()
  const userState = useAppSelector((state) => state.user)

  useEffect(() => {
    initNostrLogin({
      darkMode: true,
      localSignup: true,
      noBanner: true,
      onAuth: (npub, opts) => {
        if (opts.type === 'logout') {
          dispatch(setIsAuth(false))
          dispatch(setUser(null))
        } else {
          dispatch(setIsAuth(true))
          dispatch(setUser({ npub }))
          MetadataController.getInstance().then((metadataController) => {
            metadataController.findMetadata(npub).then((userProfile) => {
              if (userProfile) {
                dispatch(
                  setUser({
                    npub,
                    pubkey: npubToHex(npub)!,
                    ...userProfile
                  })
                )
              }
            })
          })
        }
      }
    })
  }, [dispatch])

  const handleLogin = () => {
    launchNostrLoginDialog()
  }

  return (
    <div className={navStyles.NavMain}>
      <Banner />
      <div className={navStyles.NavMainTop}>
        <div className={mainStyles.ContainerMain}>
          <div className={navStyles.NavMainTopInside}>
            <div className={navStyles.NMTI_Sec}>
              <Link
                to={appRoutes.index}
                className={navStyles.NMTI_Sec_HomeLink}
              >
                <div className={navStyles.NMTI_Sec_HomeLink_Logo}>
                  <img
                    className={navStyles.NMTI_Sec_HomeLink_LogoImg}
                    src='/assets/img/DEG%20Mods%20Logo%20With%20Text.svg'
                  />
                </div>
              </Link>
            </div>
            <div className={navStyles.NMTI_Sec}>
              <div className={navStyles.NMTI_SecInside}>
                <a
                  className={`${navStyles.NMTI_SecInside_Link} ${navStyles.NMTI_SI_LinkTip}`}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='-64 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M240.5 224H352C365.3 224 377.3 232.3 381.1 244.7C386.6 257.2 383.1 271.3 373.1 280.1L117.1 504.1C105.8 513.9 89.27 514.7 77.19 505.9C65.1 497.1 60.7 481.1 66.59 467.4L143.5 288H31.1C18.67 288 6.733 279.7 2.044 267.3C-2.645 254.8 .8944 240.7 10.93 231.9L266.9 7.918C278.2-1.92 294.7-2.669 306.8 6.114C318.9 14.9 323.3 30.87 317.4 44.61L240.5 224z'></path>
                  </svg>
                  Tip
                </a>
                <Link
                  to={appRoutes.submitMod}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z'></path>
                  </svg>
                  Submit Mod
                </Link>
                <Link
                  to={appRoutes.write}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M467.1 241.1L351.1 288h94.34c-7.711 14.85-16.29 29.28-25.87 43.01l-132.5 52.99h85.65c-59.34 52.71-144.1 80.34-264.5 52.82l-68.13 68.13c-9.38 9.38-24.56 9.374-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l253.4-253.4c4.846-6.275 4.643-15.19-1.113-20.95c-6.25-6.25-16.38-6.25-22.62 0l-168.6 168.6C24.56 58 366.9 8.118 478.9 .0846c18.87-1.354 34.41 14.19 33.05 33.05C508.7 78.53 498.5 161.8 467.1 241.1z'></path>
                  </svg>
                  Write
                </Link>
                <Link
                  to={appRoutes.settingsProfile}
                  className={navStyles.NMTI_SecInside_Link}
                >
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 512 512'
                    width='1em'
                    height='1em'
                    fill='currentColor'
                  >
                    <path d='M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z'></path>
                  </svg>
                  Settings
                </Link>
                {!userState.isAuth && (
                  <a
                    id='loginNav'
                    className={navStyles.NMTI_SecInside_Link}
                    onClick={handleLogin}
                  >
                    <img
                      className={navStyles.NMTI_SecInside_LinkImg}
                      src='/assets/img/DEG%20Mods%20Default%20PP.png'
                    />
                    Login
                  </a>
                )}
                {userState.isAuth && userState.user && (
                  <div className={navStyles.NMTI_SecInside_Link}>
                    {userState.user.image && (
                      <img
                        src={userState.user.image}
                        alt='Profile Avatar'
                        className={navStyles.NMTI_SecInside_LinkImg}
                      />
                    )}
                    <span className={navStyles.NMTI_SecInside_Username}>
                      {userState.user.name ||
                        userState.user.displayName ||
                        userState.user.npub}
                    </span>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={navStyles.NavMainBottom}>
        <div className={mainStyles.ContainerMain}>
          <div className={navStyles.NavMainBottomInside}>
            <Link
              to={appRoutes.games}
              className={navStyles.NavMainBottomInsideLink}
            >
              Games
            </Link>
            <Link
              to={appRoutes.mods}
              className={navStyles.NavMainBottomInsideLink}
            >
              Mods
            </Link>
            <Link
              to={appRoutes.about}
              className={navStyles.NavMainBottomInsideLink}
            >
              About
            </Link>
            <Link
              to={appRoutes.blog}
              className={navStyles.NavMainBottomInsideLink}
            >
              Blog
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}