explosion/spaCy
1
1
Fork 0
mirror of https://github.com/explosion/spaCy.git synced 2024-12-26 18:06:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Use dropdown for collapsed sidebar menu

Browse Source
This commit is contained in:
Ines Montani 2019-02-26 13:02:48 +01:00
parent 322af644c7
commit 3abe935245
4 changed files with 53 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
website/src/components/sidebar.js
View File

@ -4,8 +4,26 @@ import classNames from 'classnames'
import { window } from 'browser-monads'
import Link from './link'
import Dropdown from './dropdown'
import classes from '../styles/sidebar.module.sass'
const DropdownNavigation = ({ items, defaultValue }) => {
return (
<div className={classes.dropdown}>
<Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}>
<option disabled>Select page...</option>
{items.map((section, i) =>
section.items.map(({ text, url }, j) => (
<option value={url} key={j}>
{section.label} &rsaquo; {text}
</option>
))
)}
</Dropdown>
</div>
)
}
const Sidebar = ({ items, pageMenu, slug }) => {
const [initialized, setInitialized] = useState(false)
const [activeSection, setActiveSection] = useState(null)
@ -27,6 +45,7 @@ const Sidebar = ({ items, pageMenu, slug }) => {
return (
<menu className={classNames('sidebar', classes.root)}>
<DropdownNavigation items={items} defaultValue={slug} />
{items.map((section, i) => (
<ul className={classes.section} key={i}>
<li className={classNames('h0', classes.label)}>{section.label}</li>

3
website/src/styles/dropdown.module.sass
View File

@ -1,4 +1,5 @@
.root
--dropdown-text-color: var(--color-front)
font: inherit
background: transparent
border: none
@ -11,5 +12,5 @@
padding: 0 1.4em 0 0.5em
&:-moz-focusring
text-shadow: 0 0 0 var(--color-theme)
text-shadow: 0 0 0 var(--dropdown-text-color)
color: transparent

1
website/src/styles/navigation.module.sass
View File

@ -69,6 +69,7 @@
padding-right: 2rem
.dropdown
--dropdown-text-color: var(--color-theme)
font-family: var(--font-secondary)
font-size: 1.6rem
font-weight: bold

63
website/src/styles/sidebar.module.sass
View File

@ -7,27 +7,14 @@ $crumb-bar: 2px
overflow-y: auto
font: var(--font-size-md)/var(--line-height-md) var(--font-primary)
@include breakpoint(min, md)
.root
@include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
position: fixed
top: 0
left: 0
width: var(--width-sidebar)
height: calc(100vh - 3px)
flex: 0 0 var(--width-sidebar)
padding-top: calc(var(--height-nav) + 1.5rem)
z-index: 10
padding-bottom: 5rem
.dropdown
padding: 1rem 0
border-bottom: 1px solid var(--color-subtle)
width: 100%
@include breakpoint(max, sm)
.root
flex: 100%
width: 100%
margin-top: var(--height-nav)
display: flex
flex-flow: row wrap
width: 100%
.dropdown-select
width: 100%
padding-left: 1rem
.section
margin-bottom: var(--spacing-sm)
@ -35,16 +22,6 @@ $crumb-bar: 2px
& > *
padding: 0 2rem 0.35rem
@include breakpoint(max, sm)
.section
flex: 1 1 0
padding: 1.25rem 0
border-bottom: 1px solid var(--color-subtle)
margin: 0
&:not(:last-child)
border-right: 1px solid var(--color-subtle)
.label
color: var(--color-dark)
font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
@ -113,6 +90,28 @@ $crumb-bar: 2px
&:after
background: var(--color-dark)
@include breakpoint(max, sm)
.crumbs
@include breakpoint(min, md)
.root
@include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
position: fixed
top: 0
left: 0
width: var(--width-sidebar)
height: calc(100vh - 3px)
flex: 0 0 var(--width-sidebar)
padding-top: calc(var(--height-nav) + 1.5rem)
z-index: 10
padding-bottom: 5rem
.dropdown
display: none
@include breakpoint(max, sm)
.root
flex: 100%
width: 100%
margin-top: var(--height-nav)
display: block
.section
display: none