Refactor AppSideBar to use styled components

Author: devklick

src/components/AppSideBar/AppSideBar.scss

@@ -1,4 +1,8 @@
-import "./AppSideBar.scss";
+import {
+  StyledItem,
+  StyledItemContainer,
+  StyledSideBar,
+} from "./Styled.AppSideBar";
 
 interface SideBarItem {
   title: string;
@@ -12,21 +16,15 @@ interface AppSideBarProps {
 
 function AppSideBar({ items }: AppSideBarProps) {
   return (
-    <div className="app-side-bar">
-      <div className="app-side-bar__items">
-        {items.map((item) => {
-          return (
-            <div
-              className={`app-side-bar__item ${item.isActive ? "active" : ""} `}
-              onClick={item.onClick}
-              key={item.title}
-            >
-              {item.title}
-            </div>
-          );
-        })}
-      </div>
-    </div>
+    <StyledSideBar>
+      <StyledItemContainer>
+        {items.map((item) => (
+          <StyledItem onClick={item.onClick} key={item.title}>
+            {item.title}
+          </StyledItem>
+        ))}
+      </StyledItemContainer>
+    </StyledSideBar>
   );
 }
 

src/components/AppSideBar/AppSideBar.tsx

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+
+export const StyledSideBar = styled.div`
+  grid-area: side-bar;
+  width: 100%;
+  height: 100%;
+`;
+
+export const StyledItemContainer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+export const StyledItem = styled.div`
+  border-radius: 10px;
+  padding: 6px 10px;
+  box-sizing: border-box;
+  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0);
+  &:hover {
+    backdrop-filter: brightness(150%);
+    transition: ease-in 0.2s;
+  }
+  &:active {
+    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5) inset;
+  }
+`;