Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

navbars finalized

Browse source
This commit is contained in:
nklhrstv 2020-02-25 16:27:25 +02:00
parent 5aeec1a315
commit 818f6c20ca
4 changed files with 11 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js
View file

@ -14,7 +14,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
window.history.back();
}, []);
const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
const renderNavBarLabel = React.useMemo(() => ({ ref, className, onClick, children, }) => (
const renderNavMenuLabel = React.useMemo(() => ({ ref, className, onClick, children, }) => (
<Button ref={ref} className={classnames(className, styles['button-container'])} tabIndex={-1} onClick={onClick}>
<Icon className={styles['icon']} icon={'ic_more'} />
{children}
@ -45,18 +45,14 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
<div className={styles['spacing']} />
{
searchBar ?
<SearchBar
className={styles['search-bar']}
query={query}
active={route === 'search'}
/>
<SearchBar className={styles['search-bar']} query={query} active={route === 'search'} />
:
null
}
<div className={styles['spacing']} />
{
addonsButton ?
<Button className={styles['button-container']} href={'#/addons'} tabIndex={-1}>
<Button className={styles['button-container']} href={'#/addons'} title={'Addons'} tabIndex={-1}>
<Icon className={styles['icon']} icon={'ic_addons'} />
</Button>
:
@ -72,7 +68,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
}
{
navMenu ?
<NavMenu renderLabel={renderNavBarLabel} />
<NavMenu renderLabel={renderNavMenuLabel} />
:
null
}

2
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenu.js
View file

@ -38,7 +38,7 @@ const NavMenu = (props) => {
onClick: popupLabelOnClick,
children,
})
), [menuOpen, popupLabelOnClick]);
), [menuOpen, popupLabelOnClick, props.renderLabel]);
const renderMenu = React.useMemo(() => () => (
<div className={styles['nav-menu-container']} onClick={popupMenuOnClick}>
<div className={styles['user-info-container']}>

4
src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -63,7 +63,7 @@
}
.nav-menu-section {
border-top: thin solid @color-surface-dark5;
border-top: thin solid @color-surface-light5-20;
.nav-menu-option-container {
display: flex;
@ -72,7 +72,7 @@
height: 4rem;
&:hover {
background-color: @color-background-dark1;
background-color: @color-background-light2;
}
.icon {

9
src/common/NavBar/VerticalNavBar/VerticalNavBar.js
View file

@ -4,7 +4,7 @@ const classnames = require('classnames');
const NavTabButton = require('./NavTabButton');
const styles = require('./styles');
const VerticalNavBar = React.memo(({ className, route, tabs }) => {
const VerticalNavBar = React.memo(({ className, selected, tabs }) => {
return (
<nav className={classnames(className, styles['vertical-nav-bar-container'])}>
{
@ -13,11 +13,10 @@ const VerticalNavBar = React.memo(({ className, route, tabs }) => {
<NavTabButton
key={index}
className={styles['nav-tab-button']}
selected={tab.route === route}
selected={tab.id === selected}
href={tab.href}
icon={tab.icon}
label={tab.label}
route={tab.route}
onClick={tab.onClick}
/>
))
@ -32,9 +31,9 @@ VerticalNavBar.displayName = 'VerticalNavBar';
VerticalNavBar.propTypes = {
className: PropTypes.string,
route: PropTypes.string,
selected: PropTypes.string,
tabs: PropTypes.arrayOf(PropTypes.shape({
route: PropTypes.string,
id: PropTypes.string,
label: PropTypes.string,
icon: PropTypes.string,
href: PropTypes.string,