feat: add version tag on the sidebar.

This commit is contained in:
a.bouhuolia
2021-04-06 22:48:24 +02:00
parent d4174bff16
commit 56dc4603ae
3 changed files with 32 additions and 8 deletions

View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { Menu, MenuItem } from '@blueprintjs/core';
import SidebarContainer from 'components/Sidebar/SidebarContainer'; import SidebarContainer from 'components/Sidebar/SidebarContainer';
import SidebarHead from 'components/Sidebar/SidebarHead'; import SidebarHead from 'components/Sidebar/SidebarHead';
import SidebarMenu from 'components/Sidebar/SidebarMenu'; import SidebarMenu from 'components/Sidebar/SidebarMenu';
@@ -13,6 +14,10 @@ export default function Sidebar() {
<div className="sidebar__menu"> <div className="sidebar__menu">
<SidebarMenu /> <SidebarMenu />
</div> </div>
<div class="sidebar__version">
0.0.1-beta version.
</div>
</SidebarContainer> </SidebarContainer>
) )
} }

View File

@@ -24,8 +24,8 @@
padding: 0.7rem 0.5rem; padding: 0.7rem 0.5rem;
background: #f5f5f5; background: #f5f5f5;
font-size: 14px; font-size: 14px;
color: #505e71; color: #3b495d;
font-weight: 500; font-weight: 600;
border-bottom: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224);
> div{ > div{

View File

@@ -23,6 +23,12 @@
} }
} }
.ScrollbarsCustom-Content{
display: flex;
flex-direction: column;
height: 100%;
}
&:hover { &:hover {
.ScrollbarsCustom-Thumb { .ScrollbarsCustom-Thumb {
@@ -102,6 +108,19 @@
&__scroll-wrapper { &__scroll-wrapper {
height: 100%; height: 100%;
} }
&__version{
margin-top: auto;
padding: 0 20px 20px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
&__inner{
height: 100%;
display: flex;
flex-direction: column;
}
&-menu { &-menu {
background: transparent; background: transparent;
@@ -227,7 +246,8 @@
} }
} }
.sidebar__menu { .sidebar__menu,
.sidebar__version {
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
opacity: 0; opacity: 0;
} }
@@ -248,11 +268,10 @@
opacity: 0; opacity: 0;
transition-delay: 0s; transition-delay: 0s;
} }
.sidebar__head-organization{
opacity: 1; .sidebar__head-organization,
} .sidebar__menu,
.sidebar__version {
.sidebar__menu {
opacity: 1; opacity: 1;
} }