kopia lustrzana https://github.com/Stopka/fedisearch
35 wiersze
1.6 KiB
TypeScript
35 wiersze
1.6 KiB
TypeScript
'use client'
|
|
import React, { ReactElement, useState } from 'react'
|
|
import NavItem from './NavItem'
|
|
import { faUser, faServer, faChartPie } from '@fortawesome/free-solid-svg-icons'
|
|
import FallbackImage from '../FallbackImage'
|
|
|
|
export default function NavBar (): ReactElement {
|
|
const [showMenu, setShowMenu] = useState<boolean>(false)
|
|
return (
|
|
<nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
|
|
<div className="container-fluid">
|
|
<a className="navbar-brand" href={'/'}>
|
|
<FallbackImage
|
|
src="/fedisearch.svg"
|
|
alt={'FediSearch logo'}
|
|
className="d-inline-block align-text-top logo"
|
|
/>
|
|
<span>FediSearch</span>
|
|
</a>
|
|
<button className="navbar-toggler" type="button" aria-controls="navbarSupportedContent"
|
|
aria-expanded="false" aria-label="Toggle navigation" onClick={() => setShowMenu(!showMenu)}>
|
|
<span className="navbar-toggler-icon"/>
|
|
</button>
|
|
<div className={'collapse navbar-collapse' + (showMenu ? ' show' : '')}>
|
|
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<NavItem path={'/feeds'} label={'People'} icon={faUser} />
|
|
<NavItem path={'/nodes'} label={'Servers'} icon={faServer} />
|
|
<NavItem path={'/stats'} label={'Stats'} icon={faChartPie} />
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|