Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 20:34:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Switch to hamburger menu for phones

Browse Source
This commit is contained in:
Infinite
2020-02-17 21:53:58 +01:00
parent 49354d571b
commit 960d5c7000
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/v2.5/src/components/MainNavbar.tsx
View File

@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
import { Nav, Navbar, Button } from "react-bootstrap"; import { Nav, Navbar, Button } from "react-bootstrap";
import { IconName } from "@fortawesome/fontawesome-svg-core"; import { IconName } from "@fortawesome/fontawesome-svg-core";
import { LinkContainer } from "react-router-bootstrap"; import { LinkContainer } from "react-router-bootstrap";
import { Link, useLocation } from "react-router-dom"; import { NavLink, Link, useLocation } from "react-router-dom";
import { Icon } from "src/components/Shared"; import { Icon } from "src/components/Shared";
@@ -67,8 +67,8 @@ export const MainNavbar: React.FC = () => {
); );
return ( return (
<Navbar fixed="top" variant="dark" bg="dark" className="top-nav"> <Navbar collapseOnSelect fixed="top" variant="dark" bg="dark" className="top-nav" expand="sm">
<Navbar.Brand as="div"> <Navbar.Brand as="div" className="order-1 order-sm-0">
<Link to="/"> <Link to="/">
<Button className="minimal brand-link d-none d-sm-inline-block"> <Button className="minimal brand-link d-none d-sm-inline-block">
Stash Stash
@@ -78,24 +78,29 @@ export const MainNavbar: React.FC = () => {
</Button> </Button>
</Link> </Link>
</Navbar.Brand> </Navbar.Brand>
<Nav className="mr-md-auto"> <Navbar.Toggle className="order-0" />
{menuItems.map(i => ( <Navbar.Collapse className="order-3 order-sm-1">
<LinkContainer <Nav className="mr-md-auto">
activeClassName="active" {menuItems.map(i => (
exact <Nav.Link eventKey={i.href} as="div">
to={i.href} <LinkContainer
key={i.href} activeClassName="active"
> exact
<Button className="minimal"> to={i.href}
<Icon icon={i.icon} /> key={i.href}
<span className="d-none d-sm-inline"> >
<FormattedMessage id={i.messageID} /> <Button className="minimal w-100">
</span> <Icon icon={i.icon} />
</Button> <span>
</LinkContainer> <FormattedMessage id={i.messageID} />
))} </span>
</Nav> </Button>
<Nav> </LinkContainer>
</Nav.Link>
))}
</Nav>
</Navbar.Collapse>
<Nav className="order-2">
<div className="d-none d-sm-block">{newButton}</div> <div className="d-none d-sm-block">{newButton}</div>
<LinkContainer exact to="/settings"> <LinkContainer exact to="/settings">
<Button className="minimal"> <Button className="minimal">