cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-29 02:10:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Attempted implementation of new sidebar style.

Browse source
This commit is contained in:
Paul 2021-06-27 22:35:36 +01:00
parent 4501a02b5d
commit af9d6fdedf
1 changed files with 72 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/components/navigation/left/ServerListSidebar.tsx
View file

@ -52,7 +52,7 @@ function Icon({ children, unread, size }: { children: Children, unread?: 'mentio
} }
const ServersBase = styled.div` const ServersBase = styled.div`
width: 72px; width: 56px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -68,7 +68,6 @@ const ServerList = styled.div`
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 48px; padding-bottom: 48px;
flex-direction: column; flex-direction: column;
border-inline-end: 2px solid var(--sidebar-active);
scrollbar-width: none; scrollbar-width: none;
@ -82,21 +81,75 @@ const ServerList = styled.div`
`; `;
const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>` const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
height: 44px; height: 58px;
padding: 4px; display: flex;
margin: 2px 0 2px 4px; align-items: center;
justify-content: flex-end;
border-top-left-radius: 4px; > * {
border-bottom-left-radius: 4px; // outline: 1px solid red;
img {
width: 32px;
height: 32px;
} }
${ props => props.active && css` > div, > svg {
background: var(--sidebar-active); width: 46px;
` } height: 46px;
display: grid;
place-items: center;
border-start-start-radius: 50%;
border-end-start-radius: 50%;
${ props => props.active && css`
background: var(--accent);
` }
}
span {
width: 6px;
height: 46px;
${ props => props.active && css`
background: var(--accent);
&::before, &::after {
// outline: 1px solid blue;
}
&::before {
content: "";
display: block;
position: relative;
width: 31px;
height: 72px;
margin-top: -72px;
margin-left: -25px;
z-index: -1;
background: var(--background);
border-bottom-right-radius: 32px;
box-shadow: 0 32px 0 0 var(--accent);
}
/*&::after {
content: "";
display: block;
position: relative;
width: 31px;
height: 72px;
margin-top: 100px;
margin-left: -25px;
z-index: -2;
background: var(--background);
border-bottom-left-radius: 32px;
box-shadow: 0 -32px 0 0 var(--accent);
}*/
` }
}
${ props => props.active && props.invert && css` ${ props => props.active && props.invert && css`
img { img {
@ -159,12 +212,13 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
<ServerList> <ServerList>
<ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}> <ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
<ServerEntry invert active={homeActive}> <ServerEntry invert active={homeActive}>
<Icon size={36} unread={homeUnread}> <Icon size={42} unread={homeUnread}>
<img src={logoSVG} /> <img src={logoSVG} />
</Icon> </Icon>
<span />
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
<LineDivider /> {/*<LineDivider />*/}
{ {
servers.map(entry => { servers.map(entry => {
const active = entry!._id === server?._id; const active = entry!._id === server?._id;
@ -176,10 +230,11 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
active={active} active={active}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}> onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Tooltip content={entry.name} placement="right"> <Tooltip content={entry.name} placement="right">
<Icon size={36} unread={entry.unread}> <Icon size={42} unread={entry.unread}>
<ServerIcon size={32} target={entry} /> <ServerIcon size={32} target={entry} />
</Icon> </Icon>
</Tooltip> </Tooltip>
<span />
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
) )