ui: further style collapsible sidebar

src/components/ResourcesSidebar/index.tsx

@@ -85,7 +85,7 @@ function Folder({ item }: { item: IFolder }) {
     <SC.TreeWrapper>
       <Tree
         collapsed={collapsed}
-        nodeLabel={<div onClick={toggleCollapse}>{item.title}</div>}
+        nodeLabel={<SC.Label onClick={toggleCollapse}>{item.title}</SC.Label>}
       >
         {item.children.map(node => plantTree(node))}
       </Tree>
@@ -100,8 +100,17 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
   return (
     <SC.TreeWrapper>
       <Tree
+        className="firstLevel"
         collapsed={collapsed}
-        nodeLabel={<div onClick={() => setCurrent(index)}>{item.title}</div>}
+        nodeLabel={
+          <SC.FirstLabel
+            className={!collapsed ? "active" : undefined}
+            onClick={() => setCurrent(index)}
+          >
+            {item.title}
+            <SC.CollapseToggler />
+          </SC.FirstLabel>
+        }
       >
         {item.children.map(node => plantTree(node))}
       </Tree>

src/components/ResourcesSidebar/styles.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components"
 import { Link } from "gatsby"
+import ChevronUp from "../../icons/chevron-up.svg"
 
 export const ResourcesSidebarWrapper = styled.div`
   box-sizing: border-box;
@@ -14,20 +15,96 @@ export const Banner = styled.img`
 
 export const TreeWrapper = styled.div`
   width: 100%;
-  padding: 12px 0;
 
   & + & {
     border-top: 1px solid #dbdbdb;
   }
 `
 
+export const Label = styled.div`
+  padding: 4px 0;
+`
+
+export const FirstLabel = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px 15px 12px 0;
+  font-weight: 700;
+  color: #a9a9a9;
+
+  &.active {
+    color: #000;
+  }
+
+  svg {
+    margin-left: auto;
+    transform: rotate(90deg);
+    transition: transform 0.3s;
+
+    path {
+      fill: #a9a9a9;
+    }
+  }
+
+  &.active svg {
+    transform: rotate(0);
+
+    path {
+      fill: #000;
+    }
+  }
+`
+
+export const CollapseToggler = styled(ChevronUp)``
+
 export const Inner = styled.div`
   padding-top: 30px;
   padding-left: 20px;
 
-  /* TODO: change this.. */
+  .tree-view {
-  & > ${TreeWrapper} > .tree-view > .tree-view_item > div {
+    overflow-y: hidden;
-    font-weight: 700;
+  }
+
+  .tree-view_item {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .tree-view_children {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .tree-view_children-collapsed {
+    height: 0px;
+  }
+
+  .tree-view_arrow {
+    cursor: pointer;
+    margin-right: 6px;
+    display: inline-block;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .tree-view_arrow:after {
+    content: "▾";
+  }
+
+  .tree-view_arrow.firstLevel {
+    display: none;
+  }
+
+  .tree-view_arrow-collapsed {
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
   }
 `
 

src/globalStyles.tsx

@@ -34,51 +34,4 @@ export const GlobalStyles = createGlobalStyle`
     padding-left: 2.8em;
     overflow: initial;
   }
-
-  /* TODO: probably extract this */
-  .tree-view {
-    overflow-y: hidden;
-  }
-
-  .tree-view_item {
-    display: flex;
-    cursor: pointer;
-  }
-
-  .tree-view_item,
-  .tree-view_children > div {
-    padding: 4px 0;
-  }
-
-  .tree-view_children {
-    margin-left: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .tree-view_children-collapsed {
-    height: 0px;
-  }
-
-  .tree-view_arrow {
-    cursor: pointer;
-    margin-right: 6px;
-    display: inline-block;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-
-  .tree-view_arrow:after {
-    content: "▾";
-  }
-
-  .tree-view_arrow-collapsed {
-    -webkit-transform: rotate(-90deg);
-    -moz-transform: rotate(-90deg);
-    -ms-transform: rotate(-90deg);
-    transform: rotate(-90deg);
-  }
 `

src/icons/chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.72578 0.21176L0.213835 6.72587C-0.0712782 7.01171 -0.0712782 7.47481 0.213835 7.76136C0.498947 8.0472 0.962045 8.0472 1.24716 7.76136L7.24241 1.76394L13.2377 7.76064C13.5228 8.04648 13.9859 8.04648 14.2717 7.76064C14.5568 7.47481 14.5568 7.01099 14.2717 6.72515L7.75976 0.211038C7.47759 -0.0704669 7.00722 -0.070466 6.72578 0.21176Z" fill="black"/>
+</svg>