added logo

src/components/AppBar/AppBar-styled.jsx

@@ -25,8 +25,7 @@ export const NavWrap = styled.nav`
   height: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
-  gap: 10px;
+  gap: 24px;
 `;
 
 export const NavList = styled.ul`
@@ -56,21 +55,11 @@ export const NavLinkStyled = styled(NavLink)`
   transition: var(--main-transition);
 
   &:hover {
-    color: var(--accent-color);
+    color: var(--accent-hover-color);
   }
 
   &.active {
-    color: var(--accent-color);
+    color: var(--accent-hover-color);
     cursor: default;
   }
 `;
-
-export const Logo = styled.h1`
-  min-width: 120px;
-  font-family: "Manrope";
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--primary-black-color);
-`;

src/components/AppBar/AppBar.jsx

@@ -1,9 +1,9 @@
+import { Logo } from "../Logo/Logo";
 import {
   NavItem,
   NavLinkStyled,
   NavList,
   NavWrap,
-  Logo,
   Header,
 } from "./AppBar-styled";
 
@@ -12,7 +12,9 @@ export const AppBar = () => {
     <>
       <Header>
         <NavWrap>
-          <Logo>100 Club</Logo>
+          <NavLinkStyled to="/">
+            <Logo />
+          </NavLinkStyled>
           <NavList>
             <NavItem>
               <NavLinkStyled to="/members">Учасники</NavLinkStyled>

src/components/Logo/Logo-styled.jsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const LogoSvg = styled.svg`
+  width: 80px;
+  height: 80px;
+  fill: currentColor;
+`;
+
+

src/components/Logo/Logo.jsx

@@ -0,0 +1,12 @@
+import sprite from "../../sprite.svg";
+import { LogoSvg } from "./Logo-styled";
+
+export const Logo = () => {
+  return (
+    <>
+      <LogoSvg>
+        <use href={sprite + "#logo-full"}></use>
+      </LogoSvg>
+    </>
+  );
+};