kitten.sh
1import styled from 'styled-components';
2import { NavLink } from 'react-router-dom';
3
4import ChevronIcon from '../assets/chevron';
5
6export const SidebarContainer = styled.div`
7 display: ${p => (p.hidden ? 'none' : 'block')};
8 position: absolute;
9 left: 0;
10 right: 0;
11 bottom: 0;
12 min-height: 100%;
13 width: ${p => p.theme.layout.sidebar};
14
15 @media ${({ theme }) => theme.media.sm} {
16 display: block;
17 position: relative;
18 margin-left: calc(2 * ${p => p.theme.layout.stripes});
19 }
20`;
21
22export const SideBarStripes = styled.div`
23 border-left: ${p => p.theme.layout.stripes} solid #8196ff;
24 border-right: ${p => p.theme.layout.stripes} solid #bcc6fa;
25 position: absolute;
26 height: 100%;
27 width: 0;
28 left: 0;
29 top: 0;
30 bottom: 0;
31`;
32
33export const SidebarWrapper = styled.aside`
34 position: fixed;
35 bottom: 0;
36 top: ${p => p.theme.layout.header};
37 -webkit-overflow-scrolling: touch;
38 overflow-y: scroll;
39
40 display: flex;
41 flex-direction: column;
42 z-index: 1;
43 overflow-y: scroll;
44 min-height: 100%;
45 line-height: ${p => p.theme.lineHeights.body};
46 font-size: ${p => p.theme.fontSizes.small};
47
48 padding: ${p => p.theme.spacing.sm} ${p => p.theme.spacing.md};
49 background-color: ${p => p.theme.colors.bg};
50 border-right: 1px solid ${p => p.theme.colors.border};
51 border-top: 1px solid ${p => p.theme.colors.border};
52 width: ${p => p.theme.layout.sidebar};
53
54 @media ${({ theme }) => theme.media.sm} {
55 border: none;
56 background: none;
57 padding-top: ${p => p.theme.spacing.md};
58 }
59`;
60
61export const SidebarNavItem = styled(NavLink).attrs(() => ({
62 activeClassName: 'active',
63}))`
64 display: block;
65 margin: ${p => p.theme.spacing.xs} 0;
66 color: ${p => p.theme.colors.text};
67 font-weight: ${p => p.theme.fontWeights.heading};
68 text-decoration: none;
69 width: 100%;
70
71 &:hover {
72 color: ${p => p.theme.colors.accent};
73 }
74
75 &.active {
76 color: ${p => p.theme.colors.accent};
77 }
78`;
79
80export const ChevronItem = styled(ChevronIcon).attrs(() => ({
81 'aria-hidden': 'true',
82}))`
83 display: inline-block;
84 color: inherit;
85 vertical-align: baseline;
86 margin-top: 0.08em;
87 margin-left: 0.3em;
88 padding: 0.08em;
89 width: 1em;
90 height: 1em;
91
92 position: relative;
93 top: 0.16em;
94
95 ${SidebarNavItem}.active & {
96 transform: rotate(180deg);
97 }
98`;
99
100export const SidebarNavSubItemWrapper = styled.div`
101 padding-left: ${p => p.theme.spacing.sm};
102 margin-bottom: ${p => p.theme.spacing.xs};
103`;
104
105export const SidebarNavSubItem = styled(NavLink).attrs(() => ({}))`
106 display: block;
107 color: ${p => p.theme.colors.passive};
108 font-weight: ${p => p.theme.fontWeights.body};
109 text-decoration: none;
110 margin: ${p =>
111 `${p.theme.spacing.xs} 0 0 ${p.nested ? p.theme.spacing.sm : 0}`};
112
113 &:first-child {
114 margin-top: 0;
115 }
116
117 &:hover {
118 color: ${p => p.theme.colors.accent};
119 }
120
121 &.active {
122 color: ${p => p.theme.colors.accent};
123 font-weight: ${p => p.theme.fontWeights.heading};
124 }
125`;