97df19898f
Merge in DNS/adguard-home from feature/hmr to master
Squashed commit of the following:
commit 952ed1955c2a7a32446d99489f137f02eb47c99e
Merge: 83484931 de92c852
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 13 11:02:10 2020 +0300
Merge branch 'master' into feature/hmr
commit 8348493105d7d63d8b0836a5c272df2b17a6b142
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Wed Aug 5 15:07:31 2020 +0300
Remove empty prop types, remove Services empty container
commit b2fe4a30b79d91e482318ee5deea8e49c7038f7e
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Wed Aug 5 13:56:35 2020 +0300
Move constants
commit f8be4c18c35193ad77bf5e25f311ad834c1d6870
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Wed Aug 5 13:19:02 2020 +0300
Fix Setup bug, update webpack.dev
commit 1d9cc4ddf8af2c979eb707a7f0fc06744eec186c
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Wed Aug 5 12:10:38 2020 +0300
Review changes
commit a1edb21358def21ed1808b081ffc2f0b6755e3da
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Wed Aug 5 11:46:58 2020 +0300
Remove lazy loading, fix updated components
commit 0aa2cf55f8d4206ac9e2f99fc1b990ed8a9c7825
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Aug 4 20:32:19 2020 +0300
Refactor App component, add lazy loading
commit 3c2ba4772a91ff7b06641dba6c6bf3fdcd2fdf7f
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Aug 4 17:12:41 2020 +0300
Simplify App hot loading boilerplate, setup lazy loading, update Header
commit 8df3221f315372b066f2ac0c9a1687f1677b8415
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Aug 4 15:16:06 2020 +0300
+ client: Add Hot Module Replacement
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { shallowEqual, useSelector } from 'react-redux';
|
|
import { Trans } from 'react-i18next';
|
|
import classnames from 'classnames';
|
|
import Menu from './Menu';
|
|
import logo from '../ui/svg/logo.svg';
|
|
import './Header.css';
|
|
|
|
const Header = () => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const {
|
|
protectionEnabled,
|
|
processing,
|
|
isCoreRunning,
|
|
processingProfile,
|
|
name,
|
|
} = useSelector((state) => state.dashboard, shallowEqual);
|
|
|
|
const { pathname } = useLocation();
|
|
|
|
const toggleMenuOpen = () => {
|
|
setIsMenuOpen((isMenuOpen) => !isMenuOpen);
|
|
};
|
|
|
|
const closeMenu = () => {
|
|
setIsMenuOpen(false);
|
|
};
|
|
|
|
const badgeClass = classnames('badge dns-status', {
|
|
'badge-success': protectionEnabled,
|
|
'badge-danger': !protectionEnabled,
|
|
});
|
|
|
|
return (
|
|
<div className="header">
|
|
<div className="header__container">
|
|
<div className="header__row">
|
|
<div
|
|
className="header-toggler d-lg-none ml-lg-0 collapsed"
|
|
onClick={toggleMenuOpen}
|
|
>
|
|
<span className="header-toggler-icon" />
|
|
</div>
|
|
<div className="header__column">
|
|
<div className="d-flex align-items-center">
|
|
<Link to="/" className="nav-link pl-0 pr-1">
|
|
<img src={logo} alt="" className="header-brand-img" />
|
|
</Link>
|
|
{!processing && isCoreRunning && (
|
|
<span className={badgeClass}>
|
|
<Trans>{protectionEnabled ? 'on' : 'off'}</Trans>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Menu
|
|
pathname={pathname}
|
|
isMenuOpen={isMenuOpen}
|
|
closeMenu={closeMenu}
|
|
/>
|
|
<div className="header__column">
|
|
<div className="header__right">
|
|
{!processingProfile && name
|
|
&& <a href="control/logout" className="btn btn-sm btn-outline-secondary">
|
|
<Trans>sign_out</Trans>
|
|
</a>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Header;
|