Menu component updated
This commit is contained in:
tmshv committed
1 parent
11d628fd50
commit
be9f07bdb7
4 files changed
+80
-141
No files matched your search
@@ -0,0 +1,15 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
export interface ActiveLinkProps {
|
||||
href?: string
|
||||
activeStyle?: React.CSSProperties
|
||||
}
|
||||
|
||||
export const ActiveLink: React.FC<ActiveLinkProps> = props => props.href
|
||||
? (
|
||||
<Link href={props.href}>
|
||||
<a>{props.children}</a>
|
||||
</Link>
|
||||
) : (
|
||||
<span style={props.activeStyle}>{props.children}</span>
|
||||
)
|
||||
@@ -1,33 +0,0 @@
|
||||
import * as React from 'react'
|
||||
|
||||
export interface IMenuItemProps {
|
||||
active: boolean
|
||||
text: string
|
||||
url: string
|
||||
}
|
||||
|
||||
export const MenuItem: React.FC<IMenuItemProps> = ({ active, text, url }) => (
|
||||
<>
|
||||
<style jsx>{`
|
||||
a {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-color: var(--dark-color);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{active
|
||||
? (
|
||||
<span>{text}</span>
|
||||
) : (
|
||||
<a href={url}>{text}</a>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
+13
-108
@@ -1,9 +1,7 @@
|
||||
import * as React from 'react'
|
||||
import cx from 'classnames'
|
||||
import { getPathWithNoTrailingSlash } from '../../lib/url'
|
||||
import { MenuItem } from './MenuItem'
|
||||
import './styles.css'
|
||||
|
||||
const itemUrl = (url: string) => getPathWithNoTrailingSlash(url)
|
||||
import cx from 'classnames'
|
||||
import { ActiveLink } from './ActiveLink'
|
||||
|
||||
export interface IMenuProps {
|
||||
layout: 'desktop' | 'mobile'
|
||||
@@ -12,113 +10,20 @@ export interface IMenuProps {
|
||||
|
||||
export const Menu: React.FC<IMenuProps> = props => (
|
||||
<div className={cx('menu', props.layout)}>
|
||||
<style jsx>{`
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div.desktop {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div.mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li{
|
||||
position: relative;
|
||||
border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
li.desktop {
|
||||
padding: 0.3em 0.2em 0;
|
||||
margin-right: 1em;
|
||||
|
||||
font-size: var(--normal-font-size);
|
||||
}
|
||||
|
||||
li.mobile {
|
||||
padding: 0.3em 0.5em;
|
||||
margin-bottom: var(--half-margin);
|
||||
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.desktop.selected.blue {
|
||||
border-top-color: var(--blue-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.orange {
|
||||
border-top-color: var(--orange-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.green {
|
||||
border-top-color: var(--green-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.yellow {
|
||||
border-top-color: var(--yellow-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.pink {
|
||||
border-top-color: var(--pink-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.red {
|
||||
border-top-color: var(--red-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.blue {
|
||||
background-color: var(--blue-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.orange {
|
||||
background-color: var(--orange-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.green {
|
||||
background-color: var(--green-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.yellow {
|
||||
background-color: var(--yellow-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.pink {
|
||||
background-color: var(--pink-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.red {
|
||||
background-color: var(--red-color);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{props.items.map((item, index) => (
|
||||
<li key={index}
|
||||
className={cx(
|
||||
props.layout,
|
||||
item.color, {
|
||||
selected: item.highlighted,
|
||||
className={cx('menuItem', props.layout, {
|
||||
selected: item.highlighted
|
||||
})}
|
||||
>
|
||||
<MenuItem
|
||||
url={itemUrl(item.url)}
|
||||
text={item.text}
|
||||
active={item.active}
|
||||
/>
|
||||
<ActiveLink
|
||||
href={!item.active ? item.url : null}
|
||||
activeStyle={{
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{item.text}
|
||||
</ActiveLink>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div.desktop {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
div.mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
position: relative;
|
||||
border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.menuItem.desktop {
|
||||
padding: 0.3em 0.2em 0;
|
||||
margin-right: 1em;
|
||||
|
||||
font-size: var(--normal-font-size);
|
||||
}
|
||||
|
||||
.menuItem.mobile {
|
||||
padding: 0.3em 0.5em;
|
||||
margin-bottom: var(--half-margin);
|
||||
|
||||
font-size: 1.25em;
|
||||
/* color: white; */
|
||||
color: var(--color-text-opposite);
|
||||
}
|
||||
|
||||
.menuItem:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.menuItem.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menuItem.mobile.selected {
|
||||
background-color: var(--color-back-opposite);
|
||||
}
|
||||
|
||||
.menuItem.desktop.selected {
|
||||
border-top-color: var(--color-back-opposite);
|
||||
}
|
||||
Reference in new issue
Block a user