QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-23 16:19:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Dashboar sidebar styled.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-03-26 16:41:22 +02:00
parent c7db1394e7
commit 6c4f86431c
4 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/MenuItem.js
View File

@@ -143,6 +143,7 @@ export default class MenuItem extends AbstractPureComponent2 {
textClassName, textClassName,
tagName = "a", tagName = "a",
dropdownType, dropdownType,
caretIconSize = 16,
...htmlProps ...htmlProps
} = this.props; } = this.props;
const hasSubmenu = children != null; const hasSubmenu = children != null;
@@ -181,7 +182,7 @@ export default class MenuItem extends AbstractPureComponent2 {
{text} {text}
</Text>, </Text>,
this.maybeRenderLabel(labelElement), this.maybeRenderLabel(labelElement),
hasSubmenu ? <Icon icon="caret-right" /> : undefined, hasSubmenu ? <Icon icon="caret-right" iconSize={caretIconSize} /> : undefined,
); );
const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu }); const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });

4
client/src/components/Sidebar/SidebarContainer.js
View File

@@ -3,7 +3,9 @@ import React from 'react';
export default function SidebarContainer(props) { export default function SidebarContainer(props) {
return ( return (
<div className="sidebar" id="sidebar"> <div className="sidebar" id="sidebar">
{props.children} <div class="sidebar__inner">
{props.children}
</div>
</div> </div>
) )
} }

1
client/src/components/Sidebar/SidebarMenu.js
View File

@@ -23,6 +23,7 @@ export default function SidebarMenu() {
disabled={item.disabled} disabled={item.disabled}
children={children} children={children}
dropdownType={item.dropdownType || 'collapse'} dropdownType={item.dropdownType || 'collapse'}
caretIconSize={15}
onClick={() => { onClick={() => {
if (item.href) { if (item.href) {
history.push(item.href); history.push(item.href);

48
client/src/style/views/Sidebar.scss
View File

@@ -11,6 +11,13 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
color: $sidebar-text-color; color: $sidebar-text-color;
width: $sidebar-width; width: $sidebar-width;
&__inner{
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
&__head{ &__head{
padding: 16px 10px; padding: 16px 10px;
@@ -33,6 +40,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
padding: 0; padding: 0;
min-width: $sidebar-width; min-width: $sidebar-width;
border-radius: 0; border-radius: 0;
padding-bottom: 2rem;
.#{$ns}-menu-item{ .#{$ns}-menu-item{
color: $sidebar-menu-item-color; color: $sidebar-menu-item-color;
@@ -56,37 +64,33 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
} }
> .#{$ns}-icon-caret-right{ > .#{$ns}-icon-caret-right{
margin-right: -2px; margin-right: -4px;
margin-top: 2px; margin-top: 3px;
color: #767B9B; color: #5B5F7B;
} }
} }
.#{$ns}-submenu{ .#{$ns}-submenu{
.#{$ns}-menu{ .#{$ns}-collapse{
padding: 10px 0;
margin: 0;
background: $sidebar-popover-submenu-bg;
border-radius: 0;
&-item{ &-body{
padding-top: 7px; background-color: rgb(11, 34, 85);
padding-bottom: 7px; padding-bottom: 6px;
padding-left: 16px; padding-top: 6px;
padding-right: 16px; }
font-size: 14px;
&, .#{$ns}-menu-item{
&:hover, padding: 7px 16px 7px 18px;
&:active, font-size: 15px;
&:focus{ color: #C5CBE3;
color: #fff;
&:hover{
background: transparent; background: transparent;
color: #fff;
} }
} }
} }
.#{$ns}-popover{ .#{$ns}-popover{
padding: 0; padding: 0;
@@ -100,8 +104,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
} }
.#{$ns}-menu-divider{ .#{$ns}-menu-divider{
border-top-color: #183C86; border-top-color: #183C86;
margin-left: 0; color: #6B708C;
margin-right: 0; margin: 4px 0;
} }
} }
} }