Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(resources): improve UX of sidebar

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2019-09-14 19:35:16 -04:00
parent 7da34cc143
commit 3377944ac8
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ResourcesSidebar/styles.tsx
+31 -2
View File
@@ -41,10 +41,18 @@ export const Children = styled.div`
export const Label = styled.div` export const Label = styled.div`
user-select: none; user-select: none;
position: relative; position: relative;
padding: 8px 0; padding: 8px 0 4px;
margin-bottom: 2px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 2px solid transparent;
align-self: flex-start;
&:hover {
border-color: ${props =>
transparentize(0.7, props.theme.sidebar.foreground)};
}
svg { svg {
position: absolute; position: absolute;
@@ -65,6 +73,14 @@ export const FirstLabel = styled.div`
color: ${props => transparentize(0.5, props.theme.sidebar.foreground)}; color: ${props => transparentize(0.5, props.theme.sidebar.foreground)};
cursor: pointer; cursor: pointer;
&:hover {
color: ${props => props.theme.sidebar.foreground};
svg path {
fill: ${props => props.theme.sidebar.foreground};
}
}
&.active { &.active {
color: ${props => props.theme.sidebar.foreground}; color: ${props => props.theme.sidebar.foreground};
} }
@@ -89,6 +105,8 @@ export const FirstLabel = styled.div`
` `
export const TreeWrapper = styled.div<{ collapsed: boolean }>` export const TreeWrapper = styled.div<{ collapsed: boolean }>`
display: flex;
flex-direction: column;
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
@@ -101,7 +119,7 @@ export const TreeWrapper = styled.div<{ collapsed: boolean }>`
} }
${Children} { ${Children} {
display: ${props => (props.collapsed ? "none" : "block")}; display: ${props => (props.collapsed ? "none" : "flex")};
/* height: ${props => (props.collapsed ? 0 : "auto")}; */ /* height: ${props => (props.collapsed ? 0 : "auto")}; */
} }
@@ -121,7 +139,14 @@ export const PageLink = styled(Link)`
display: block; display: block;
padding: 4px 0; padding: 4px 0;
color: ${props => props.theme.sidebar.foreground}; color: ${props => props.theme.sidebar.foreground};
align-self: flex-start;
text-decoration: none; text-decoration: none;
border-bottom: 2px solid transparent;
&:hover {
border-color: ${props =>
transparentize(0.7, props.theme.sidebar.foreground)};
}
& + & { & + & {
margin-top: 4px; margin-top: 4px;
@@ -131,6 +156,10 @@ export const PageLink = styled(Link)`
font-weight: 700; font-weight: 700;
color: ${props => props.theme.sidebar.active}; color: ${props => props.theme.sidebar.active};
} }
&.active:hover {
border-color: ${props => transparentize(0.7, props.theme.sidebar.active)};
}
` `
export const Menu = styled.nav` export const Menu = styled.nav`