Add styles to sidebar

Author: good3n

src/assets/styles/global.js

@@ -155,7 +155,7 @@ const GlobalStyle = createGlobalStyle`
 
   .wrapper {
     display: grid;
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: 1.2fr 3fr;
     gap: 50px;
 
     @media (max-width: 991px) {

src/components/Sidebar/Sidebar.component.js

@@ -4,33 +4,35 @@ import { AnchorLink } from 'gatsby-plugin-anchor-links'
 import { StyledSidebar } from './Sidebar.styles'
 
 const Sidebar = ({ data, page }) => (
-  <StyledSidebar>
-    {data.map(
-      ({
-        label: { id: labelId, name: labelName, categories: labelCategories },
-      }) => {
-        return (
-          <div key={labelId}>
-            <h2 key={labelId}>{labelName}</h2>
-            <ul>
-              {labelCategories.map(
-                ({ category: { id: categoryId, name: categoryName } }) => (
-                  <li key={categoryId}>
-                    <AnchorLink
-                      title={categoryName}
-                      to={`/${page}#${categoryId}`}
-                    >
-                      {categoryName}
-                    </AnchorLink>
-                  </li>
-                )
-              )}
-            </ul>
-          </div>
-        )
-      }
-    )}
-  </StyledSidebar>
+  <div>
+    <StyledSidebar>
+      {data.map(
+        ({
+          label: { id: labelId, name: labelName, categories: labelCategories },
+        }) => {
+          return (
+            <div key={labelId}>
+              <h2 key={labelId}>{labelName}</h2>
+              <ul>
+                {labelCategories.map(
+                  ({ category: { id: categoryId, name: categoryName } }) => (
+                    <li key={categoryId}>
+                      <AnchorLink
+                        title={categoryName}
+                        to={`/${page}#${categoryId}`}
+                      >
+                        {categoryName}
+                      </AnchorLink>
+                    </li>
+                  )
+                )}
+              </ul>
+            </div>
+          )
+        }
+      )}
+    </StyledSidebar>
+  </div>
 )
 
 Sidebar.propTypes = {

src/components/Sidebar/Sidebar.styles.js

@@ -1,6 +1,10 @@
 import styled from 'styled-components'
 
 export const StyledSidebar = styled.aside`
+  border: 2px solid rgba(255, 255, 255, 0.15);
+  padding: 3rem 30px;
+  border-radius: 10px;
+
   h2 {
     font-weight: 600;
     margin: 0;
@@ -19,7 +23,10 @@ export const StyledSidebar = styled.aside`
 
   a {
     color: var(--color__green);
-    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   > div:last-of-type ul {