2019-11-12 04:09:29 +01:00
import React , { StatelessComponent , ReactElement } from 'react' ;
2019-11-08 03:40:20 +01:00
import SearchBox from './SearchBox' ;
2019-11-12 04:09:29 +01:00
import { Link , navigate } from 'gatsby' ;
2019-11-08 03:40:20 +01:00
import logo from '../images/silverstripe-logo.svg' ;
2019-12-18 23:54:23 +01:00
import useDocContext from '../hooks/useDocContext' ;
import useHierarchy from '../hooks/useHierarchy' ;
2019-11-08 03:40:20 +01:00
interface HeaderProps {
2019-11-12 04:09:29 +01:00
handleSidebarToggle ( e : EventTarget ) : void
}
2019-12-18 23:54:23 +01:00
const Header : StatelessComponent < HeaderProps > = ( { handleSidebarToggle } ) : ReactElement = > {
const { getNodes , getHomePage , getCurrentNode , getCurrentVersion } = useHierarchy ( ) ;
const home = getHomePage ( ) ;
const currentNode = getCurrentNode ( ) || home ;
const context = useDocContext ( ) ;
2019-11-12 05:05:31 +01:00
2019-12-18 23:54:23 +01:00
const handleNavigate = ( e : any ) : void = > {
if ( typeof window === 'undefined' ) {
return ;
}
const ver = e . target . value ;
if ( currentNode ) {
const newPath = currentNode . slug . replace ( /^\/en\/[0-9]+\// , ` /en/ ${ ver } / ` ) ;
const otherNode = getNodes ( ) . find ( n = > n . slug === newPath ) ;
// This has to be a hard refresh, because the sidebar needs to unmount
if ( otherNode ) {
navigate ( otherNode . slug ) ;
} else {
navigate ( ` /en/ ${ ver } ` ) ;
}
}
} ;
2019-11-12 04:09:29 +01:00
2019-12-18 23:54:23 +01:00
const title = context === 'user' ? 'CMS Help' : 'CMS Docs' ;
2019-11-08 03:40:20 +01:00
return (
2019-11-19 23:46:39 +01:00
< header role = "banner" className = "header fixed-top" >
2019-11-08 03:40:20 +01:00
< div className = "branding docs-branding" >
< div className = "container position-relative py-2 d-flex" >
< div className = "docs-logo-wrapper" >
< div className = "site-logo" >
2019-12-18 23:54:23 +01:00
< Link style = { { backgroundImage : ` url( ${ logo } ) ` } } className = "navbar-brand" to = { home ? home . slug : '/' } title = "Go to the home page" >
Silverstripe CMS Documentation
2019-11-08 03:40:20 +01:00
< / Link >
2019-12-18 23:54:23 +01:00
< span / >
< span > { title } < / span >
2019-11-08 03:40:20 +01:00
< / div >
< / div >
< div className = "docs-top-utilities d-flex justify-content-between justify-content-lg-end align-items-center" >
< div className = "top-search-box d-none d-lg-flex" >
2019-12-18 23:54:23 +01:00
{ process . env . GATSBY_DOCSEARCH_API_KEY && (
2019-11-08 03:40:20 +01:00
< form className = "search-form" >
< SearchBox identifier = "header-search" / >
< / form >
2019-12-18 23:54:23 +01:00
) }
2019-11-08 03:40:20 +01:00
< / div >
2019-12-18 23:54:23 +01:00
< ul className = "social-list list-inline d-flex flex-grow-1 flex-lg-grow-0 align-items-center justify-content-lg-center justify-content-end justify-content-lg-end" >
2019-11-08 03:40:20 +01:00
< li className = "list-inline-item version-select" >
2022-07-22 02:16:07 +02:00
< select id = "version-select" value = { getCurrentVersion ( ) } onChange = { handleNavigate } >
< option value = '5' > V5 < / option >
2019-12-18 23:54:23 +01:00
< option value = '4' > V4 < / option >
< option value = '3' > V3 < / option >
2019-11-08 03:40:20 +01:00
< / select >
< i className = "fas fa-chevron-down" > < / i >
< / li >
< li className = "d-none d-sm-inline list-inline-item" > < a title = "Go to the Github repository" href = "https://github.com/silverstripe/silverstripe-framework" > < i className = "fab fa-github fa-fw" / > < / a > < / li >
< / ul >
< / div >
< button onClick = { handleSidebarToggle } id = "docs-sidebar-toggler" className = "docs-sidebar-toggler docs-sidebar-visible mr-2 d-xl-none" type = "button" >
< span / >
< span / >
< span / >
< / button >
< / div >
< / div >
< / header >
) ;
} ;
export default Header ;