#11 Avoid duplicate code

package.json

@@ -9,6 +9,8 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-draft-wysiwyg": "^1.13.4",
+    "classnames": "^2.3.1",
+    "cx": "^22.8.1",
     "gh-pages": "^4.0.0",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",

src/components/SidebarHeader.tsx

@@ -1,6 +1,7 @@
 import { Bookmarks, List, Notepad, Scales } from "phosphor-react"
 import { useState } from "react"
 import { Button } from "./Button"
+import cx from "classnames"
 
 export const SidebarHeader = () => {
     const [isNotesActive, setIsNotesActive] = useState<boolean>(false);
@@ -9,7 +10,10 @@ export const SidebarHeader = () => {
     const [sidebarOpen, setSidebarOpen] = useState<boolean>(true);
 
     return (
-        <div className={sidebarOpen ? "flex flex-row justify-between" : "flex flex-row justify-end"}>
+        <div className={cx("flex flex-row", {
+            "justify-between": sidebarOpen,
+            "justify-end": !sidebarOpen,
+            })}>
             <div className={sidebarOpen ? "transition duration-300 rotate-90" : "transition duration-300 rotate-0"}
                 onClick={() => setSidebarOpen(!sidebarOpen)}>
                 <Button bgColor="None"