Sidebar assignment

package.json

@@ -14,8 +14,10 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.5.1",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",

src/App.jsx

@@ -1,14 +1,20 @@
-import React from 'react'
+import React from "react";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import Sidebar from "./components/Sidebar";
+import { ThemeProvider } from "./theme/ThemeContext";
+import ThemeToggle from "./components/ThemeToggle";
 
 library.add(fas);
 
-export default class App extends React.Component{
-  render () {
-      return (
-          <Sidebar color='light' />
-      )
+export default class App extends React.Component {
+  render() {
+    return (
+      <ThemeProvider>
+        <ThemeToggle />
+        {/* <Sidebar color={"light"} /> В зависимости от prop color  */}
+        <Sidebar />
+      </ThemeProvider>
+    );
   }
 }

src/components/Sidebar/CollapseButton.jsx

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const CollapseButtonStyled = styled.button`
+  position: absolute;
+  right: ${({ $collapsed }) => ($collapsed ? "-48px" : "-18px")};
+  top: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: ${({ theme }) => theme.buttonBackground};
+  color: ${({ theme }) => theme.textDefault};
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: right 0.3s ease, background 0.3s, color 0.3s;
+  z-index: 2;
+  &:hover {
+    background: ${({ theme }) => theme.buttonBackgroundActive};
+    color: ${({ theme }) => theme.textHover};
+  }
+`;
+
+const CollapseButton = ({ $collapsed, theme, onClick }) => (
+  <CollapseButtonStyled
+    $collapsed={$collapsed}
+    theme={theme}
+    onClick={onClick}
+    aria-label={$collapsed ? "Expand sidebar" : "Collapse sidebar"}
+  >
+    {$collapsed ? (
+      <FontAwesomeIcon icon="fa-solid fa-chevron-right" />
+    ) : (
+      <FontAwesomeIcon icon="fa-solid fa-chevron-left" />
+    )}
+  </CollapseButtonStyled>
+);
+
+CollapseButton.propTypes = {
+  $collapsed: PropTypes.bool.isRequired,
+  theme: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default CollapseButton;

src/components/Sidebar/LogoSection.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import logo from "../../assets/logo.png";
+
+const LogoSectionStyled = styled.div`
+  display: flex;
+  align-items: center;
+  padding-top: 24px;
+  img {
+    width: 32px;
+    margin-right: 12px;
+  }
+  span {
+    color: ${({ theme }) => theme.logoText};
+    font-weight: bold;
+    font-size: 1.2rem;
+    opacity: ${({ $collapsed }) => ($collapsed ? "0" : "1")};
+    transition: opacity 0.3s;
+  }
+`;
+
+const LogoSection = ({ theme, $collapsed }) => (
+  <LogoSectionStyled theme={theme} $collapsed={$collapsed}>
+    <img src={logo} alt="TensorFlow logo" />
+    <span>TensorFlow</span>
+  </LogoSectionStyled>
+);
+
+LogoSection.propTypes = {
+  theme: PropTypes.object.isRequired,
+  $collapsed: PropTypes.bool.isRequired,
+};
+
+export default LogoSection;