added logo and bagFix
This commit is contained in:
SlimusMinus
268
src/components/NahodkaLogo.jsx
Normal file
268
src/components/NahodkaLogo.jsx
Normal file
@@ -0,0 +1,268 @@
|
||||
import React from "react";
|
||||
|
||||
export default function NahodkaLogo({
|
||||
width = 760,
|
||||
height = 360,
|
||||
className,
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="-40 100 760 200"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* ========================= */}
|
||||
{/* ЦВЕТ БУКВ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="coral"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#E99A78" />
|
||||
<stop offset="100%" stopColor="#D97956" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* РАМКА ЛУПЫ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="magnifier"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#EA9B78" />
|
||||
<stop offset="100%" stopColor="#D57250" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* СТЕКЛО */}
|
||||
{/* ========================= */}
|
||||
|
||||
<radialGradient id="glass">
|
||||
<stop offset="0%" stopColor="#FFFDF8" />
|
||||
<stop offset="100%" stopColor="#F3E9DA" />
|
||||
</radialGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* РУЧКА */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="handle"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="1"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#86A383" />
|
||||
<stop offset="100%" stopColor="#617D68" />
|
||||
</linearGradient>
|
||||
|
||||
{/* ========================= */}
|
||||
{/* ТЕНЬ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<filter
|
||||
id="shadow"
|
||||
x="-30%"
|
||||
y="-30%"
|
||||
width="160%"
|
||||
height="180%"
|
||||
>
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="5"
|
||||
stdDeviation="5"
|
||||
floodColor="#8F4938"
|
||||
floodOpacity="0.25"
|
||||
/>
|
||||
</filter>
|
||||
|
||||
<filter
|
||||
id="magnifierShadow"
|
||||
x="-40%"
|
||||
y="-40%"
|
||||
width="180%"
|
||||
height="200%"
|
||||
>
|
||||
<feDropShadow
|
||||
dx="0"
|
||||
dy="5"
|
||||
stdDeviation="4"
|
||||
floodColor="#8F4938"
|
||||
floodOpacity="0.3"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ЛЕВАЯ ЧАСТЬ — "НАХ" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
<g
|
||||
fill="url(#coral)"
|
||||
filter="url(#shadow)"
|
||||
fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
|
||||
fontSize="135"
|
||||
fontWeight="800"
|
||||
>
|
||||
<text
|
||||
x="30"
|
||||
y="225"
|
||||
letterSpacing="1"
|
||||
>
|
||||
Нах
|
||||
</text>
|
||||
</g>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ЛУПА — "О" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
<g
|
||||
transform="translate(352 190)"
|
||||
filter="url(#magnifierShadow)"
|
||||
>
|
||||
{/* Ручка */}
|
||||
|
||||
<rect
|
||||
x="34"
|
||||
y="70"
|
||||
width="28"
|
||||
height="105"
|
||||
rx="14"
|
||||
transform="rotate(-43 34 70)"
|
||||
fill="url(#handle)"
|
||||
stroke="#D97956"
|
||||
strokeWidth="6"
|
||||
/>
|
||||
|
||||
{/* Внешняя рамка */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="70"
|
||||
fill="url(#magnifier)"
|
||||
/>
|
||||
|
||||
{/* Внутренняя рамка */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="58"
|
||||
fill="#F7EEDF"
|
||||
/>
|
||||
|
||||
{/* Стекло */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="53"
|
||||
fill="url(#glass)"
|
||||
/>
|
||||
|
||||
{/* Блик */}
|
||||
|
||||
<ellipse
|
||||
cx="-22"
|
||||
cy="-25"
|
||||
rx="8"
|
||||
ry="15"
|
||||
transform="rotate(35 -22 -25)"
|
||||
fill="white"
|
||||
opacity="0.65"
|
||||
/>
|
||||
|
||||
{/* ================================================= */}
|
||||
{/* ЛАПКА */}
|
||||
{/* ================================================= */}
|
||||
|
||||
<g transform="translate(0 15)">
|
||||
<path
|
||||
d="
|
||||
M 0 25
|
||||
C -8 18 -25 12 -25 -2
|
||||
C -25 -13 -14 -18 -5 -12
|
||||
L 0 -8
|
||||
L 5 -12
|
||||
C 14 -18 25 -13 25 -2
|
||||
C 25 12 8 18 0 25
|
||||
Z
|
||||
"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-22"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
transform="rotate(-25 -22 -20)"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-7"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="9"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="23"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
transform="rotate(25 23 -20)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
{/* ===================================================== */}
|
||||
{/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
|
||||
{/* ===================================================== */}
|
||||
|
||||
{/* ПРАВАЯ ЧАСТЬ — "ДКА" */}
|
||||
|
||||
<g
|
||||
fill="url(#coral)"
|
||||
filter="url(#shadow)"
|
||||
fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
|
||||
fontSize="135"
|
||||
fontWeight="800"
|
||||
>
|
||||
<text
|
||||
x="436"
|
||||
y="225"
|
||||
letterSpacing="1"
|
||||
>
|
||||
дка
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import LogoIcon from "./icons/LogoIcon";
|
||||
import GlobeIcon from "./icons/GlobeIcon";
|
||||
import SunIcon from "./icons/SunIcon";
|
||||
import MoonIcon from "./icons/MoonIcon";
|
||||
@@ -67,8 +66,6 @@ export default function Sidebar({
|
||||
<div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
|
||||
<div className={`f-sidebar${open ? " open" : ""}`}>
|
||||
<div className="f-sb-head">
|
||||
<div className="f-sb-logo"><LogoIcon /></div>
|
||||
<span className="f-sb-name">{t('app.name')}</span>
|
||||
</div>
|
||||
<nav className="f-sb-nav">
|
||||
{NAV_ITEMS.map(({ icon, key: itemKey, labelKey }) => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import AppTopBar from "../layout/AppTopBar";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import NahodkaLogo from "../NahodkaLogo";
|
||||
|
||||
export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange }) {
|
||||
const { t } = useTranslation();
|
||||
@@ -46,7 +47,7 @@ export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange
|
||||
className="f-topbar-dropdown-btn"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<span>{t("app.name")}</span>
|
||||
<NahodkaLogo className="f-topbar-logo" width={100} height={40} />
|
||||
<svg
|
||||
className={`f-topbar-chevron${open ? " open" : ""}`}
|
||||
viewBox="0 0 24 24"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import NahodkaLogo from "../NahodkaLogo";
|
||||
import GlobeIcon from "../icons/GlobeIcon";
|
||||
import MoonIcon from "../icons/MoonIcon";
|
||||
import SunIcon from "../icons/SunIcon";
|
||||
@@ -12,7 +13,9 @@ export default function Navbar({ onLoginClick }) {
|
||||
|
||||
return (
|
||||
<nav className="nk-nav">
|
||||
<span className="nk-logo">{t('app.name')}</span>
|
||||
<div className="nk-logo">
|
||||
<NahodkaLogo />
|
||||
</div>
|
||||
|
||||
<div className="nk-nav-right">
|
||||
<button className="nk-theme-btn" onClick={toggleTheme} title={theme === 'dark' ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}>
|
||||
|
||||
Reference in New Issue
Block a user