Skip to content

Commit

Permalink
change menu design
Browse files Browse the repository at this point in the history
  • Loading branch information
@romanbutora
romanbutora committed Sep 10, 2023
1 parent f4da9b1 commit c70b670
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 84 deletions.
12 changes: 12 additions & 0 deletions src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ html, body {
body {
font-family: 'Cardo', serif;
}

.bg-body-tertiary, .mb-3, .navbar, .navbar-expand-md, .navbar-light {
margin-bottom: '0%';
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
Expand Down Expand Up @@ -279,3 +283,11 @@ a.claims:hover {
max-width: 100%;
}

.offcanvas {
max-width: 80%;
}

.offcanvas-start {
max-width: 80%;
}

206 changes: 122 additions & 84 deletions src/layouts/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@ import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import {
Col, Row,
} from 'antd';
import Offcanvas from 'react-bootstrap/Offcanvas';
import authAtom from '../../_state/auth';

const CustomHeader : React.FC = () => {
const auth = useRecoilValue(authAtom);
const { t } = useTranslation();
const location = useLocation();
const expand = 'md';

const navItems = (auth?.user?.email !== undefined)
? (
<Container fluid style={{ zIndex: 1 }}>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Container fluid style={{ zIndex: 1, margin: '0px' }}>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Brand className="mx-auto" style={{ color: 'white', margin: '0px' }}>
<Link to="/" style={{ textDecoration: 'none', color: 'white' }}>
<img
Expand All @@ -38,50 +40,68 @@ const CustomHeader : React.FC = () => {
{' '}
</Link>
</Navbar.Brand>
<Navbar.Collapse id="responsive-navbar-nav" style={{ paddingRight: '10px' }}>
<Nav className="me-auto" activeKey={location.pathname}>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav.Link as={Link} to="/claims" id="claimsLink" active={location.pathname === '/claims'} style={{ color: 'white', fontWeight: '500' }}>{t('claims')}</Nav.Link>
</Link>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav className="me-auto" activeKey={location.pathname}>
<Nav.Link as={Link} to="/articles" id="articlesLink" active={location.pathname === '/articles'} style={{ color: 'white', fontWeight: '500' }}>{t('articles')}</Nav.Link>
</Nav>
</Link>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav.Link as={Link} to="/profile" id="profileLink" active={location.pathname === '/claims'} style={{ color: 'white', fontWeight: '500' }}>{t('scoreboard')}</Nav.Link>
</Link>
</Nav>
<Nav activeKey={location.pathname} style={{ float: 'left' }}>
<Nav.Item style={{ color: 'white' }}>
<Button
onClick={() => i18next.changeLanguage('en')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex', paddingLeft: '0px',
}}
>
<span className="fi fi-gb" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('cz')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-cz" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('sk')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-sk" style={{ whiteSpace: 'nowrap' }} />
</Button>
</Nav.Item>
<Navbar.Offcanvas
style={{ paddingRight: '10px', backgroundColor: '#d86e3d' }}
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="start"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
<Link to="/" style={{ textDecoration: 'none', color: 'white' }}>
<img
alt=""
src={`${process.env.PUBLIC_URL}/pictures/image44.png`}
style={{ width: '70%', maxHeight: '20%' }}
/>
</Link>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="me-auto" activeKey={location.pathname}>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav.Link as={Link} to="/claims" id="claimsLink" active={location.pathname === '/claims'} style={{ color: 'white', fontWeight: '500' }}>{t('claims')}</Nav.Link>
</Link>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav className="me-auto" activeKey={location.pathname}>
<Nav.Link as={Link} to="/articles" id="articlesLink" active={location.pathname === '/articles'} style={{ color: 'white', fontWeight: '500' }}>{t('articles')}</Nav.Link>
</Nav>
</Link>
<Link to="/" style={{ textDecoration: 'none' }}>
<Nav.Link as={Link} to="/profile" id="profileLink" active={location.pathname === '/claims'} style={{ color: 'white', fontWeight: '500' }}>{t('scoreboard')}</Nav.Link>
</Link>
</Nav>
<Nav activeKey={location.pathname} style={{ float: 'left' }}>
<Nav.Item style={{ color: 'white' }}>
<Button
onClick={() => i18next.changeLanguage('en')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex', paddingLeft: '0px',
}}
>
<span className="fi fi-gb" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('cz')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-cz" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('sk')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-sk" style={{ whiteSpace: 'nowrap' }} />
</Button>
</Nav.Item>

</Nav>
</Navbar.Collapse>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
) : (
<Container fluid style={{ zIndex: 1 }}>
Expand All @@ -98,39 +118,56 @@ const CustomHeader : React.FC = () => {
{' '}
</Link>
</Navbar.Brand>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto" activeKey={location.pathname}>
{' '}
</Nav>
<Nav activeKey={location.pathname}>
<Nav.Item style={{ color: 'white' }}>
<Button
onClick={() => i18next.changeLanguage('en')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex', paddingLeft: '0px',
}}
>
<span className="fi fi-gb" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('cz')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-cz" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('sk')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-sk" style={{ whiteSpace: 'nowrap' }} />
</Button>
</Nav.Item>
</Nav>
</Navbar.Collapse>
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement="start"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
<Link to="/" style={{ textDecoration: 'none', color: 'white' }}>
<img
alt=""
src={`${process.env.PUBLIC_URL}/pictures/image44.png`}
style={{ width: '70%', maxHeight: '20%' }}
/>
</Link>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="me-auto" activeKey={location.pathname}>
{' '}
</Nav>
<Nav activeKey={location.pathname}>
<Nav.Item style={{ color: 'white' }}>
<Button
onClick={() => i18next.changeLanguage('en')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex', paddingLeft: '0px',
}}
>
<span className="fi fi-gb" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('cz')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-cz" style={{ whiteSpace: 'nowrap' }} />
</Button>
<Button
onClick={() => i18next.changeLanguage('sk')}
style={{
background: 'none', border: 'none', alignItems: 'flex-end', display: 'inline-flex',
}}
>
<span className="fi fi-sk" style={{ whiteSpace: 'nowrap' }} />
</Button>
</Nav.Item>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
);

Expand Down Expand Up @@ -219,19 +256,20 @@ const CustomHeader : React.FC = () => {
);

return (
<Row style={{ width: '100%', background: '#d86e3d' }}>
<Col xs={20} sm={21} md={21} lg={22} xl={22} xxl={23}>
<Row style={{ width: '100%', background: '#d86e3d', marginBottom: '0px' }}>
<Col xs={20} sm={21} md={21} lg={22} xl={22} xxl={23} style={{ marginBottom: '0px' }}>
<Navbar
collapseOnSelect
expand="md"
key={expand}
expand={expand}
className="bg-body-tertiary mb-3"
style={{
backgroundColor: '#d86e3d', fontWeight: 'bold', color: 'white', fontSize: 'medium', width: '100%',
backgroundColor: '#d86e3d', fontWeight: 'bold', color: 'white', fontSize: 'medium', width: '100%', marginBottom: '0px',
}}
>
{navItems}
</Navbar>
</Col>
<Col xs={4} sm={3} md={3} lg={2} xl={2} xxl={1}>
<Col xs={4} sm={3} md={3} lg={2} xl={2} xxl={1} style={{ marginBottom: '0px' }}>
{profileIsLoggedIn}
</Col>
</Row>
Expand Down

0 comments on commit c70b670

Please sign in to comment.