Menu component update
This commit is contained in:
tmshv committed
1 parent
feb59b8b8e
commit
ddd6c9daa3
1 file changed
+92
-93
@@ -10,117 +10,116 @@ export interface IMenuProps {
|
||||
items: any[]
|
||||
}
|
||||
|
||||
export const Menu: React.FC<IMenuProps> = props => {
|
||||
return (
|
||||
<div className={cx(props.layout)}>
|
||||
<style jsx>{`
|
||||
div {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
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;
|
||||
}
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
div.desktop {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li{
|
||||
position: relative;
|
||||
border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
div.desktop {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li.desktop {
|
||||
padding: 0.3em 0.2em 0;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
div.mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
li{
|
||||
position: relative;
|
||||
border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
font-size: var(--normal-font-size);
|
||||
}
|
||||
li.desktop {
|
||||
padding: 0.3em 0.2em 0;
|
||||
margin-right: 1em;
|
||||
|
||||
li.mobile {
|
||||
padding: 0.3em 0.5em;
|
||||
margin-bottom: var(--half-margin);
|
||||
font-size: var(--normal-font-size);
|
||||
}
|
||||
|
||||
font-size: 1.25em;
|
||||
}
|
||||
li.mobile {
|
||||
padding: 0.3em 0.5em;
|
||||
margin-bottom: var(--half-margin);
|
||||
|
||||
li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
font-size: 1.25em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
li.desktop.selected.blue {
|
||||
border-top-color: var(--blue-color);
|
||||
}
|
||||
li.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.desktop.selected.orange {
|
||||
border-top-color: var(--orange-color);
|
||||
}
|
||||
li.desktop.selected.blue {
|
||||
border-top-color: var(--blue-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.green {
|
||||
border-top-color: var(--green-color);
|
||||
}
|
||||
li.desktop.selected.orange {
|
||||
border-top-color: var(--orange-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.yellow {
|
||||
border-top-color: var(--yellow-color);
|
||||
}
|
||||
li.desktop.selected.green {
|
||||
border-top-color: var(--green-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.pink {
|
||||
border-top-color: var(--pink-color);
|
||||
}
|
||||
li.desktop.selected.yellow {
|
||||
border-top-color: var(--yellow-color);
|
||||
}
|
||||
|
||||
li.desktop.selected.red {
|
||||
border-top-color: var(--red-color);
|
||||
}
|
||||
li.desktop.selected.pink {
|
||||
border-top-color: var(--pink-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.blue {
|
||||
background-color: var(--blue-color);
|
||||
}
|
||||
li.desktop.selected.red {
|
||||
border-top-color: var(--red-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.orange {
|
||||
background-color: var(--orange-color);
|
||||
}
|
||||
li.mobile.selected.blue {
|
||||
background-color: var(--blue-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.green {
|
||||
background-color: var(--green-color);
|
||||
}
|
||||
li.mobile.selected.orange {
|
||||
background-color: var(--orange-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.yellow {
|
||||
background-color: var(--yellow-color);
|
||||
}
|
||||
li.mobile.selected.green {
|
||||
background-color: var(--green-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.pink {
|
||||
background-color: var(--pink-color);
|
||||
}
|
||||
li.mobile.selected.yellow {
|
||||
background-color: var(--yellow-color);
|
||||
}
|
||||
|
||||
li.mobile.selected.red {
|
||||
background-color: var(--red-color);
|
||||
}
|
||||
`}</style>
|
||||
li.mobile.selected.pink {
|
||||
background-color: var(--pink-color);
|
||||
}
|
||||
|
||||
{props.items.map((item, index) => (
|
||||
<li key={index}
|
||||
className={cx(
|
||||
props.layout,
|
||||
item.color, {
|
||||
selected: item.highlighted,
|
||||
})}
|
||||
>
|
||||
<MenuItem
|
||||
url={itemUrl(item.url)}
|
||||
text={item.text}
|
||||
active={item.active}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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,
|
||||
})}
|
||||
>
|
||||
<MenuItem
|
||||
url={itemUrl(item.url)}
|
||||
text={item.text}
|
||||
active={item.active}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
Reference in new issue
Block a user