mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Added burguer icon to show sidebar on mobile devices
This commit is contained in:
parent
a00f59bab3
commit
cb3186395d
7 changed files with 97 additions and 37 deletions
|
@ -16,6 +16,7 @@
|
|||
"axios": "^0.18.0",
|
||||
"bootstrap": "^4.1.1",
|
||||
"chart.js": "^2.7.2",
|
||||
"classnames": "^2.2.6",
|
||||
"moment": "^2.22.2",
|
||||
"promise": "8.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus';
|
||||
import arrowIcon from '@fortawesome/fontawesome-free-solid/faChevronDown';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import React from 'react';
|
||||
import { Link, withRouter } from 'react-router-dom'
|
||||
|
@ -6,6 +7,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
|
|||
import ServersDropdown from '../servers/ServersDropdown';
|
||||
import './MainHeader.scss';
|
||||
import shlinkLogo from './shlink-logo-white.png';
|
||||
import classnames from 'classnames';
|
||||
|
||||
export class MainHeader extends React.Component {
|
||||
state = { isOpen: false };
|
||||
|
@ -24,13 +26,20 @@ export class MainHeader extends React.Component {
|
|||
render() {
|
||||
const { location } = this.props;
|
||||
const createServerPath = '/server/create';
|
||||
const toggleClass = classnames('main-header__toggle-icon', {
|
||||
'main-header__toggle-icon--opened': this.state.isOpen,
|
||||
});
|
||||
|
||||
return (
|
||||
<Navbar color="primary" dark fixed="top" className="main-header" expand="md">
|
||||
<NavbarBrand tag={Link} to="/">
|
||||
<img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo"/> Shlink
|
||||
</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggle} />
|
||||
|
||||
<NavbarToggler onClick={this.toggle}>
|
||||
<FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
|
||||
</NavbarToggler>
|
||||
|
||||
<Collapse navbar isOpen={this.state.isOpen}>
|
||||
<Nav navbar className="ml-auto">
|
||||
<NavItem>
|
||||
|
|
|
@ -13,3 +13,11 @@
|
|||
width: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.main-header__toggle-icon {
|
||||
width: 20px;
|
||||
transition: transform 300ms;
|
||||
}
|
||||
.main-header__toggle-icon--opened {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
|
|
@ -9,6 +9,9 @@ import ShortUrlsVisits from '../short-urls/ShortUrlVisits';
|
|||
import AsideMenu from './AsideMenu';
|
||||
import { pick } from 'ramda';
|
||||
import Swipeable from 'react-swipeable';
|
||||
import burgerIcon from '@fortawesome/fontawesome-free-solid/faBars';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import classnames from 'classnames';
|
||||
import './MenuLayout.scss';
|
||||
|
||||
export class MenuLayout extends React.Component {
|
||||
|
@ -31,8 +34,18 @@ export class MenuLayout extends React.Component {
|
|||
|
||||
render() {
|
||||
const { selectedServer } = this.props;
|
||||
const burgerClasses = classnames('menu-layout__burger-icon', {
|
||||
'menu-layout__burger-icon--active': this.state.showSideBar,
|
||||
});
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<FontAwesomeIcon
|
||||
icon={burgerIcon}
|
||||
className={burgerClasses}
|
||||
onClick={() => this.setState({ showSideBar: !this.state.showSideBar })}
|
||||
/>
|
||||
|
||||
<Swipeable
|
||||
delta={40}
|
||||
onSwipedLeft={() => this.setState({ showSideBar: false })}
|
||||
|
@ -69,6 +82,7 @@ export class MenuLayout extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</Swipeable>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import '../utils/base';
|
||||
|
||||
.menu-layout__swipeable {
|
||||
$offset: 15px;
|
||||
height: 100%;
|
||||
|
@ -10,3 +12,22 @@
|
|||
.menu-layout__swipeable-inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-layout__burger-icon {
|
||||
display: none;
|
||||
transition: color 300ms;
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
z-index: 1035;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: rgba(255,255,255,.5);
|
||||
|
||||
@media (max-width: $smMax) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-layout__burger-icon--active {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
@ -42,3 +42,10 @@ body,
|
|||
.react-datepicker-wrapper {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@media (max-width: $smMax) {
|
||||
margin-right: auto !important; // This is needed to override a third party style
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1555,7 +1555,7 @@ class-utils@^0.3.5:
|
|||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.2.3, classnames@^2.2.5:
|
||||
classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
|
||||
|
|
Loading…
Reference in a new issue