Add collapsible section component.

Can now collapse server categories.
Client remembers collapse state, incl. advanced appearance settings.
This commit is contained in:
Paul
2021-07-04 15:53:06 +01:00
parent 476c521b92
commit 08c338ea1c
13 changed files with 157 additions and 78 deletions

View File

@@ -1,16 +1,29 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
export default styled.details`
export default styled.details<{ sticky?: boolean, large?: boolean }>`
summary {
${ props => props.sticky && css`
top: -1px;
z-index: 10;
position: sticky;
` }
${ props => props.large && css`
padding: 5px 0;
` }
outline: none;
display: flex;
cursor: pointer;
list-style: none;
align-items: center;
transition: .2s opacity;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
> svg {
flex-shrink: 0;
transition: .2s ease transform;
}