87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'gatsby'
|
|
|
|
import dcLogo from '../../images/dclogo.png'
|
|
|
|
import { Container } from '../shared'
|
|
import { logoStyles, CustomNavBar, ulStyles, Li, StyledLink } from './style'
|
|
|
|
import { pathPrefix } from '../../../gatsby-config'
|
|
|
|
import type { NavibarProps } from '../../types'
|
|
|
|
interface NaviLink {
|
|
name: string
|
|
url: string
|
|
active: 'yes' | 'no'
|
|
}
|
|
|
|
const naviLinks: NaviLink[] = [
|
|
{ name: 'Home', url: '/', active: 'no' },
|
|
{ name: 'About', url: '/about/', active: 'no' },
|
|
{ name: 'Blog', url: '/blog/', active: 'no' },
|
|
{ name: 'Feed', url: '/feed/', active: 'no' },
|
|
{ name: 'FAQ', url: '/faq/', active: 'no' },
|
|
{
|
|
name: 'Docs',
|
|
url: 'https://docs.datacontroller.io/',
|
|
active: 'no'
|
|
},
|
|
{ name: 'Pricing', url: '/pricing/', active: 'no' },
|
|
{ name: 'Book Demo', url: '/contact/', active: 'no' },
|
|
{
|
|
name: 'Source Code',
|
|
url: 'https://git.datacontroller.io/dc/dc',
|
|
active: 'no'
|
|
}
|
|
]
|
|
|
|
const Navibar: React.FC<NavibarProps> = ({ location }) => {
|
|
naviLinks.forEach((link) => (link.active = 'no'))
|
|
const currentLink = naviLinks.find(
|
|
(link) => pathPrefix + link.url === location?.pathname
|
|
)
|
|
if (currentLink) currentLink.active = 'yes'
|
|
return (
|
|
<CustomNavBar className="navbar navbar-expand-lg">
|
|
<Container>
|
|
<Link to="/">
|
|
<img src={dcLogo} style={logoStyles} alt="Data Controller Logo" />
|
|
</Link>
|
|
<button
|
|
className="navbar-toggler collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<div className="navbar-toggler-icon" id="nav-icon4">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav mb-2 mb-lg-0" style={ulStyles}>
|
|
{naviLinks.map((link, index) => (
|
|
<Li key={index} className="nav-item">
|
|
<StyledLink
|
|
to={link.url}
|
|
className="nav-link"
|
|
active={link.active}
|
|
>
|
|
{link.name}
|
|
</StyledLink>
|
|
</Li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</Container>
|
|
</CustomNavBar>
|
|
)
|
|
}
|
|
|
|
export default Navibar
|