mobile header styles

diff --git a/resources/js/components/app/Header.js b/resources/js/components/app/Header.js
index ed9af60b78ec8228f88c3de8357fdc0aa3a98224..bd0e50b8450507e2f5799508bda423eb12c1388d 100644 (file)
--- 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 (file)
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 022de69f0d2c97e5816a3ec4adfd78a8187c63c6..e1c4d46016104dbaa259540fdde56558348097e3 100644 (file)
--- 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');