dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Navbar.tsx (1664B)

      1 import Logo from '@/components/elements/Logo'
      2 import Container from '@/components/layout/Container'
      3 import { WikiInfo } from '@/lib/models/wiki_info'
      4 import { getSlugAndPath } from '@/lib/utils/wiki'
      5 import Link from 'next/link'
      6 import { useRouter } from 'next/router'
      7 import { ReactNode, useEffect, useMemo, useState } from 'react'
      8 import styles from './Navbar.module.css'
      9 
     10 interface NavbarProps {
     11   children?: ReactNode
     12 }
     13 
     14 export default function Navbar (props: NavbarProps) {
     15   const router = useRouter()
     16   const [wikiName, setWikiName] = useState<string | null>(null)
     17 
     18   const [slug] = getSlugAndPath(router)
     19 
     20   useEffect(() => {
     21     if (slug == null) {
     22       setWikiName(null)
     23       return
     24     }
     25 
     26     fetch(`/api/wiki/${slug}`, {
     27       method: 'GET'
     28     }).then<{ wiki: WikiInfo }, null>((res) => {
     29       return res.json()
     30     }, (err) => {
     31       console.error('failed to get current wiki information', err)
     32       return null
     33     }).then((data) => {
     34       if (data == null) {
     35         return
     36       }
     37 
     38       setWikiName(data.wiki.title)
     39     })
     40   }, [slug])
     41 
     42   return (
     43     <div className={styles.navbar}>
     44       <Container className={styles.container}>
     45         <nav className={styles.brand}>
     46           <Link href="/" className={styles.item}>
     47             <Logo />
     48           </Link>
     49           {slug != null && (
     50             <>
     51               <div className={styles['branding-divider']}/>
     52               <Link href={`/wiki/${slug}`} className={styles.item}>
     53                 {wikiName}
     54               </Link>
     55             </>
     56           )}
     57         </nav>
     58         <nav className={styles.menu}>
     59           {props.children}
     60         </nav>
     61       </Container>
     62     </div>
     63   )
     64 }