From a0bca4306e882d77ba192eed889bd7ed52896dad Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 20 Aug 2023 15:01:09 +0200
Subject: [PATCH] mobile header styles

---
 resources/js/components/app/Header.js  | 105 +++++++++----------------
 resources/js/components/app/User.js    |  58 ++++++++++++++
 resources/js/components/common/Icon.js |   1 +
 3 files changed, 94 insertions(+), 70 deletions(-)
 create mode 100644 resources/js/components/app/User.js

diff --git a/resources/js/components/app/Header.js b/resources/js/components/app/Header.js
index ed9af60..bd0e50b 100644
--- a/resources/js/components/app/Header.js
+++ b/resources/js/components/app/Header.js
@@ -1,96 +1,61 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Container, Nav, Navbar } from 'react-bootstrap';
+import { Container, Nav, Navbar } from 'react-bootstrap';
 import { LinkContainer } from 'react-router-bootstrap';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import LanguageSwitcher from './LanguageSwitcher';
+import User from './User';
 import Icon from '../common/Icon';
-import { getAvatarUrl } from '../../helpers/User';
-import { withUser } from '../../helpers/UserContext';
 
-const Header = ({ doLogout, user }) => {
+const Header = ({ doLogout }) => {
 	const { pathname } = useLocation();
 	const { t } = useTranslation();
 
-	return <Navbar id="header" bg="dark" variant="dark">
+	return <Navbar id="header" bg="dark" expand="md" variant="dark">
 		<Container fluid>
 			<LinkContainer to="/">
 				<Navbar.Brand>
 					ALttP
 				</Navbar.Brand>
 			</LinkContainer>
-			<Nav activeKey={pathname}>
-				<LinkContainer to="/tournaments/6">
-					<Nav.Link href="/tournaments/6">
-						ALttPR Weekly
-					</Nav.Link>
-				</LinkContainer>
-			</Nav>
-			<Nav activeKey={pathname} className="ms-auto">
-				<LinkContainer to="/tech">
-					<Nav.Link href="/tech">
-						{t('menu.tech')}
-					</Nav.Link>
-				</LinkContainer>
-				<LinkContainer to="/map/lw">
-					<Nav.Link href="/map/lw">
-						{t('menu.map')}
-					</Nav.Link>
-				</LinkContainer>
-			</Nav>
-			<Navbar.Text className="mx-2">
-				<LanguageSwitcher />
-			</Navbar.Text>
-			<Nav>
-				{user ?
-					<>
-						<LinkContainer to={`/users/${user.id}`}>
-							<Nav.Link>
-								<img alt="" src={getAvatarUrl(user)} />
-								{user.username}
-								{user.discriminator && user.discriminator !== '0' ?
-									<span className="text-muted">#{user.discriminator}</span>
-								: null}
-							</Nav.Link>
-						</LinkContainer>
-						<Button
-							onClick={doLogout}
-							title={t('button.logout')}
-							variant="outline-secondary"
-						>
-							<Icon.LOGOUT title="" />
-						</Button>
-					</>
-				:
-					<Button
-						href="/login"
-						onClick={() => {
-							if (location.pathname.length > 1) {
-								localStorage.setItem('returnPath', location.pathname.substr(1));
-							}
-						}}
-						variant="discord"
-					>
-						<Icon.DISCORD />
-						{' '}
-						{t('button.login')}
-					</Button>
-				}
-			</Nav>
+			<Navbar.Toggle aria-controls="header-nav" label={t('button.menu')}>
+				<Icon.MENU title="" />
+			</Navbar.Toggle>
+			<Navbar.Collapse id="header-nav">
+				<Nav activeKey={pathname}>
+					<LinkContainer to="/tournaments/6">
+						<Nav.Link href="/tournaments/6">
+							ALttPR Weekly
+						</Nav.Link>
+					</LinkContainer>
+				</Nav>
+				<Nav activeKey={pathname} className="ms-auto">
+					<LinkContainer to="/tech">
+						<Nav.Link href="/tech">
+							{t('menu.tech')}
+						</Nav.Link>
+					</LinkContainer>
+					<LinkContainer to="/map/lw">
+						<Nav.Link href="/map/lw">
+							{t('menu.map')}
+						</Nav.Link>
+					</LinkContainer>
+				</Nav>
+				<div className="d-flex align-items-center">
+					<Navbar.Text className="mx-2">
+						<LanguageSwitcher />
+					</Navbar.Text>
+					<User doLogout={doLogout} />
+				</div>
+			</Navbar.Collapse>
 		</Container>
 	</Navbar>;
 };
 
 Header.propTypes = {
 	doLogout: PropTypes.func,
-	user: PropTypes.shape({
-		avatar: PropTypes.string,
-		discriminator: PropTypes.string,
-		id: PropTypes.string,
-		username: PropTypes.string,
-	}),
 };
 
-export default withUser(Header);
+export default Header;
diff --git a/resources/js/components/app/User.js b/resources/js/components/app/User.js
new file mode 100644
index 0000000..6f58926
--- /dev/null
+++ b/resources/js/components/app/User.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Nav } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '../common/Icon';
+import { useUser } from '../../helpers/UserContext';
+import { getAvatarUrl } from '../../helpers/User';
+
+const User = ({ doLogout }) => {
+	const { t } = useTranslation();
+	const user = useUser();
+
+	return user
+		? <>
+			<Nav className="ms-auto">
+				<LinkContainer to={`/users/${user.id}`}>
+					<Nav.Link>
+						<img alt="" src={getAvatarUrl(user)} />
+						{user.username}
+						{user.discriminator && user.discriminator !== '0' ?
+							<span className="text-muted">#{user.discriminator}</span>
+						: null}
+					</Nav.Link>
+				</LinkContainer>
+			</Nav>
+			<Button
+			className="ms-2"
+				onClick={doLogout}
+				title={t('button.logout')}
+				variant="outline-secondary"
+			>
+				<Icon.LOGOUT title="" />
+			</Button>
+		</>
+		: <Button
+			className="ms-auto"
+			href="/login"
+			onClick={() => {
+				if (location.pathname.length > 1) {
+					localStorage.setItem('returnPath', location.pathname.substr(1));
+				}
+			}}
+			title={t('button.login')}
+			variant="discord"
+		>
+			<Icon.DISCORD />
+			{' '}
+			{t('button.login')}
+		</Button>;
+};
+
+User.propTypes = {
+	doLogout: PropTypes.func,
+};
+
+export default User;
diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 022de69..e1c4d46 100644
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -76,6 +76,7 @@ Icon.INVERT = makePreset('InveretIcon', 'circle-half-stroke');
 Icon.LANGUAGE = makePreset('LanguageIcon', 'language');
 Icon.LOCKED = makePreset('LockedIcon', 'lock');
 Icon.LOGOUT = makePreset('LogoutIcon', 'sign-out-alt');
+Icon.MENU = makePreset('MenuIcon', 'bars');
 Icon.MICROPHONE = makePreset('MicrophoneIcon', 'microphone');
 Icon.MONITOR = makePreset('MonitorIcon', 'tv');
 Icon.MOUSE = makePreset('MouseIcon', 'arrow-pointer');
-- 
2.39.2