Merge pull request #21 from qoretechnologies/bugfix/sidebar-theme-fixes

Bugfix/sidebar theme fixes
qoretechnologies · Jan 12, 2021 · 34affd4 · 34affd4
2 parents 75522bc + 814fb0e
commit 34affd4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -1,5 +1,6 @@
 import { Icon, IconName, MaybeElement } from '@blueprintjs/core';
 import classnames from 'classnames';
+import { size } from 'lodash';
 import map from 'lodash/map';
 import { darken } from 'polished';
 import React, { useState } from 'react';
@@ -154,8 +155,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       span.bp3-icon:not(.favorite) {
         color: ${({ theme }) =>
           theme.sidebar?.icon?.activeColor ||
-          theme.sidebar?.icon?.color ||
           theme.sidebar?.item?.activeColor ||
+          theme.sidebar?.icon?.color ||
           theme.sidebar?.item?.color ||
           'inherit'};
       }
@@ -173,10 +174,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       span.bp3-icon:not(.favorite) {
         color: ${({ theme }) =>
           theme.sidebar?.icon?.activeColor ||
-          theme.sidebar?.icon?.color ||
           theme.sidebar?.subItem?.activeColor ||
-          theme.sidebar?.subItem?.color ||
           theme.sidebar?.item?.activeColor ||
+          theme.sidebar?.icon?.color ||
+          theme.sidebar?.subItem?.color ||
           theme.sidebar?.item?.color ||
           'inherit'};
       }
@@ -221,8 +222,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
         span.bp3-icon:not(.favorite) {
           color: ${({ theme }) =>
             theme.sidebar?.icon?.hoverColor ||
-            theme.sidebar?.icon?.color ||
             theme.sidebar?.item?.hoverColor ||
+            theme.sidebar?.icon?.color ||
             theme.sidebar?.item?.color ||
             'inherit'};
         }
@@ -264,8 +265,8 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
         span.bp3-icon:not(.favorite) {
           color: ${({ theme }) =>
             theme.sidebar?.icon?.hoverColor ||
-            theme.sidebar?.icon?.color ||
             theme.sidebar?.subItem?.hoverColor ||
+            theme.sidebar?.icon?.color ||
             theme.sidebar?.subItem?.color ||
             'inherit'};
         }
@@ -276,6 +277,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
     .sidebarSubItem {
       cursor: pointer;
       transition: all 0.2s ease-in-out;
+
+      &.active {
+        font-weight: 500;
+      }
     }
   }
 `;
@@ -290,8 +295,9 @@ const StyledDivider = styled.div<{ theme?: any }>`
   align-items: center;
 
   &:first-child {
+    letter-spacing: 1.5px;
     margin-top: 0;
-    padding: 1px;
+    padding: 0.5px;
   }
 
   background-color: ${({ theme }) =>
@@ -357,30 +363,34 @@ const QorusSidebar: React.FC<IQorusSidebarProps> = ({
         role='qorus-sidebar-wrapper'
       >
         <Scroll horizontal={false} className='sidebarScroll'>
-          {map(menu, ({ title, items }, sectionId: string) => (
-            <div
-              className='sidebarSection'
-              key={sectionId}
-              role='qorus-sidebar-section-title'
-            >
-              <StyledDivider>{!_isCollapsed ? title || '' : ''}</StyledDivider>
-              {map(items, (itemData, key) => (
-                <SidebarItem
-                  itemData={itemData}
-                  key={key}
-                  isCollapsed={_isCollapsed}
-                  expandedSection={expandedSection}
-                  onSectionToggle={handleSectionToggle}
-                  bookmarks={bookmarks}
-                  currentPath={path}
-                  onFavoriteClick={handleFavoriteClick}
-                  onUnfavoriteClick={handleUnfavoriteClick}
-                  sectionName={sectionId}
-                  hasFavorites={!!onBookmarksChange}
-                />
-              ))}
-            </div>
-          ))}
+          {map(menu, ({ title, items }, sectionId: string) =>
+            size(items) ? (
+              <div
+                className='sidebarSection'
+                key={sectionId}
+                role='qorus-sidebar-section-title'
+              >
+                <StyledDivider>
+                  {!_isCollapsed ? title || '' : ''}
+                </StyledDivider>
+                {map(items, (itemData, key) => (
+                  <SidebarItem
+                    itemData={itemData}
+                    key={key}
+                    isCollapsed={_isCollapsed}
+                    expandedSection={expandedSection}
+                    onSectionToggle={handleSectionToggle}
+                    bookmarks={bookmarks}
+                    currentPath={path}
+                    onFavoriteClick={handleFavoriteClick}
+                    onUnfavoriteClick={handleUnfavoriteClick}
+                    sectionName={sectionId}
+                    hasFavorites={!!onBookmarksChange}
+                  />
+                ))}
+              </div>
+            ) : null
+          )}
         </Scroll>
         <div className='sidebarSection' id='menuCollapse'>
           <StyledDivider />