diff --git a/README.md b/README.md index 89d5b3cf..7230fee3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Cards

- logo + logo

React + TypeScript SPA 🚀 diff --git a/src/assets/LogoVariantsSVG/cardMemoSmallLogoCards.svg b/src/assets/LogoVariantsSVG/cardMemoSmallLogoCards.svg new file mode 100644 index 00000000..332961a7 --- /dev/null +++ b/src/assets/LogoVariantsSVG/cardMemoSmallLogoCards.svg @@ -0,0 +1 @@ +cardMemoSmallLogoCards \ No newline at end of file diff --git a/src/assets/icons/svg/CardMemo/CardMemoMiniLogoCards.tsx b/src/assets/icons/svg/CardMemo/CardMemoMiniLogoCards.tsx new file mode 100644 index 00000000..056d0da1 --- /dev/null +++ b/src/assets/icons/svg/CardMemo/CardMemoMiniLogoCards.tsx @@ -0,0 +1,169 @@ +import type { SVGProps } from 'react' +import { Ref, forwardRef, memo } from 'react' + +const SvgCardMemoLogoMinimalisticGolden = ( + props: SVGProps, + ref: Ref +) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + cardMemoLogoGoldenPreviewCardsSVG20240614 + + + + + + + + + + +) +const ForwardRef = forwardRef(SvgCardMemoLogoMinimalisticGolden) +const Memo = memo(ForwardRef) + +export default Memo diff --git a/src/components/Layout/Header/Header.tsx b/src/components/Layout/Header/Header.tsx index 68080df6..892722ef 100644 --- a/src/components/Layout/Header/Header.tsx +++ b/src/components/Layout/Header/Header.tsx @@ -1,7 +1,9 @@ +import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' import { Link, useLocation } from 'react-router-dom' import CardMemoLogoGolden from '@/assets/icons/svg/CardMemo/CardMemoLogoGolden' +import CardMemoMiniLogoCards from '@/assets/icons/svg/CardMemo/CardMemoMiniLogoCards' import LogOut from '@/assets/icons/svg/LogOut' import PersonOutline from '@/assets/icons/svg/PersonOutline' import CardMemoLogoGoldenPng from '@/assets/img/cardMemoLogoGolden.png' @@ -33,13 +35,30 @@ const Header = ({ data }: HeaderProps) => { } const theme = localStorage.getItem('theme') + const [isSmallScreen, setIsSmallScreen] = useState(false) + + useEffect(() => { + const handleResize = () => { + setIsSmallScreen(window.innerWidth < 480) + } + + window.addEventListener('resize', handleResize) + handleResize() // Проверяем при первой загрузке + + return () => window.removeEventListener('resize', handleResize) + }, []) + return (
- + {isSmallScreen ? ( + + ) : ( + + )}