114 lines
3.9 KiB
JavaScript
114 lines
3.9 KiB
JavaScript
// Update import paths based on your Argon source location
|
|
import {
|
|
Navbar,
|
|
NavbarBrand,
|
|
UncontrolledCollapse,
|
|
Row,
|
|
Col,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
Container,
|
|
Spinner,
|
|
Button, ButtonGroup, Label, Input
|
|
} from 'reactstrap';
|
|
import { useState, useEffect } from 'react';
|
|
import MediaService from '../../../services/media-service'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faSun, faMoon, faPen } from '@fortawesome/free-solid-svg-icons';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
function Header(props) {
|
|
|
|
const GlobalTheme = props.GlobalTheme;
|
|
const ThemeConfig = props.ThemeConfig;
|
|
const UserData = props.UserData;
|
|
|
|
const [collapseClasses, setCollapseClasses] = useState('');
|
|
const [themeSelected, setThemeSelected] = useState('lightTheme');
|
|
|
|
useEffect(() => {
|
|
props.ThemeSwitcher(themeSelected)
|
|
}, [themeSelected])
|
|
|
|
const onExiting = () => {
|
|
setCollapseClasses('collapsing-out');
|
|
};
|
|
|
|
const onExited = () => {
|
|
setCollapseClasses('');
|
|
};
|
|
|
|
if (GlobalTheme && ThemeConfig && UserData)
|
|
return (
|
|
<header className="header-global">
|
|
<Navbar className={`navbar-horizontal ${ThemeConfig[GlobalTheme].navBar['navBarTheme']} ${ThemeConfig[GlobalTheme].navBar['background']}`}
|
|
expand="lg">
|
|
<Container>
|
|
<NavbarBrand>
|
|
<Link to="/">
|
|
{
|
|
UserData.profilePhoto !== "" ?
|
|
<img
|
|
style={{ width: '40px', height: '40px', objectFit: 'cover', 'marginRight': '10px' }}
|
|
className="rounded-circle"
|
|
src={MediaService.getMedia(UserData.profilePhoto)}
|
|
/> : ""
|
|
}
|
|
|
|
<Button color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`} size="lg">
|
|
{ UserData ? UserData.name : <Spinner> Loading... </Spinner> }
|
|
</Button>
|
|
</Link>
|
|
</NavbarBrand>
|
|
<button
|
|
aria-controls="navbar-default"
|
|
aria-expanded={false}
|
|
aria-label="Toggle navigation"
|
|
className="navbar-toggler"
|
|
data-target="#navbar-default"
|
|
data-toggle="collapse"
|
|
id="navbar-default"
|
|
type="button"
|
|
>
|
|
<span className="navbar-toggler-icon" />
|
|
</button>
|
|
|
|
<UncontrolledCollapse navbar toggler="#navbar-default" className={collapseClasses} onExiting={onExiting} onExited={onExited}>
|
|
<Nav className="ml-lg-auto" navbar>
|
|
<NavItem>
|
|
<ButtonGroup style={{marginTop: '15px', marginBottom: '15px'}}>
|
|
<Button color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
|
>
|
|
<Link to="/categories">
|
|
|
|
<FontAwesomeIcon icon={faPen} /> Blogs
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
|
outline
|
|
onClick={() => {setThemeSelected('lightTheme')}}
|
|
active={themeSelected === 'lightTheme'}
|
|
>
|
|
<FontAwesomeIcon icon={faSun} /> Light Theme
|
|
</Button>
|
|
<Button
|
|
color={`${ThemeConfig ? ThemeConfig[GlobalTheme].navBar['buttonColor'] : ""}`}
|
|
outline
|
|
onClick={() => {setThemeSelected('darkTheme')}}
|
|
active={themeSelected === 'darkTheme'}
|
|
>
|
|
<FontAwesomeIcon icon={faMoon}/> Dark Theme
|
|
</Button>
|
|
</ButtonGroup>
|
|
</NavItem>
|
|
</Nav>
|
|
</UncontrolledCollapse>
|
|
</Container>
|
|
</Navbar>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header; |