165 lines
4.0 KiB
JavaScript
165 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Link } from 'react-router';
|
|
import styled from 'styled-components';
|
|
import { remSize, prop, common } from '../theme';
|
|
|
|
|
|
// <ul className="nav__dropdown">
|
|
|
|
|
|
// <ul className="nav__dropdown">
|
|
|
|
// <li className="nav__dropdown-item">
|
|
// <button
|
|
// onFocus={this.handleFocusForLang}
|
|
// onBlur={this.handleBlur}
|
|
// value="it"
|
|
// onClick={e => this.handleLangSelection(e)}
|
|
// >
|
|
// Italian (Test Fallback)
|
|
// </button>
|
|
// </li>
|
|
// <li className="nav__dropdown-item">
|
|
// <button
|
|
// onFocus={this.handleFocusForLang}
|
|
// onBlur={this.handleBlur}
|
|
// value="en-US"
|
|
// onClick={e => this.handleLangSelection(e)}
|
|
// >English
|
|
// </button>
|
|
// </li>
|
|
// <li className="nav__dropdown-item">
|
|
// <button
|
|
// onFocus={this.handleFocusForLang}
|
|
// onBlur={this.handleBlur}
|
|
// value="es-419"
|
|
// onClick={e => this.handleLangSelection(e)}
|
|
// >
|
|
// Español
|
|
// </button>
|
|
// </li>
|
|
// </ul>
|
|
|
|
// 'nav__item--open'
|
|
|
|
// %dropdown-open {
|
|
// @include themify() {
|
|
// background-color: map-get($theme-map, 'modal-background-color');
|
|
// border: 1px solid map-get($theme-map, 'modal-border-color');
|
|
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
|
|
// color: getThemifyVariable('primary-text-color');
|
|
// }
|
|
// text-align: left;
|
|
// width: #{180 / $base-font-size}rem;
|
|
// display: flex;
|
|
// position: absolute;
|
|
// flex-direction: column;
|
|
// top: 95%;
|
|
// height: auto;
|
|
// z-index: 9999;
|
|
// border-radius: #{6 / $base-font-size}rem;
|
|
// -------------
|
|
// & li:first-child {
|
|
// border-radius: #{5 / $base-font-size}rem #{5 / $base-font-size}rem 0 0;
|
|
// }
|
|
// & li:last-child {
|
|
// border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
|
|
// }
|
|
// & li {
|
|
// & button,
|
|
// & a {
|
|
// @include themify() {
|
|
// color: getThemifyVariable('primary-text-color');
|
|
// }
|
|
// width: 100%;
|
|
// text-align: left;
|
|
// padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
|
|
// }
|
|
// height: #{35 / $base-font-size}rem;
|
|
// cursor: pointer;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// }
|
|
// & li:hover {
|
|
// @include themify() {
|
|
// background-color: getThemifyVariable('button-background-hover-color');
|
|
// color: getThemifyVariable('button-hover-color')
|
|
// }
|
|
// & button, & a {
|
|
// @include themify() {
|
|
// color: getThemifyVariable('button-hover-color');
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// %dropdown-open-left {
|
|
// @extend %dropdown-open;
|
|
// left: 0;
|
|
// }
|
|
|
|
// %dropdown-open-right {
|
|
// @extend %dropdown-open;
|
|
// right: 0;
|
|
// }
|
|
|
|
|
|
const DropdownWrapper = styled.div`
|
|
background-color: ${prop('Modal.background')};
|
|
border: 1px solid ${prop('Modal.border')};
|
|
box-shadow: 0 0 18px 0 ${common.shadowColor};
|
|
color: ${prop('primaryTextColor')};
|
|
|
|
text-align: left;
|
|
width: ${remSize(180)};
|
|
display: flex;
|
|
position: absolute;
|
|
flex-direction: column;
|
|
top: 95%;
|
|
height: auto;
|
|
z-index: 9999;
|
|
border-radius: ${remSize(6)};
|
|
`;
|
|
|
|
|
|
// @include themify() {
|
|
// background-color: map-get($theme-map, 'modal-background-color');
|
|
// border: 1px solid map-get($theme-map, 'modal-border-color');
|
|
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
|
|
// color: getThemifyVariable('primary-text-color');
|
|
// }
|
|
|
|
|
|
const Dropdown = ({ items }) => (
|
|
<DropdownWrapper>
|
|
<h1>space</h1>
|
|
<h1>space</h1>
|
|
<h1>space</h1>
|
|
<h1>space</h1>
|
|
{/* className="nav__items-left" */}
|
|
<ul className="nav__items-left nav__dropdown nav__item nav__item--open">
|
|
<h1 className="nav__dropdown-item">hello</h1>
|
|
<h1 className="nav__dropdown-item">hello</h1>
|
|
{items && items.map(({ title }) => (
|
|
<li className="nav__dropdown-item" key={`nav-${title && title.toLowerCase()}`}>
|
|
<h1>space</h1>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</DropdownWrapper>
|
|
);
|
|
|
|
Dropdown.propTypes = {
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
action: PropTypes.func
|
|
}))
|
|
};
|
|
|
|
Dropdown.defaultProps = {
|
|
items: []
|
|
};
|
|
|
|
export default Dropdown;
|