added button back from map and fix post on map
This commit is contained in:
SlimusMinus
@@ -1,8 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
/**
|
||||
* Логотип «Находка» — одно слово, без лупы (лупа заменена буквой «о»).
|
||||
*/
|
||||
export default function NahodkaLogo({
|
||||
width = 760,
|
||||
height = 360,
|
||||
width = 600,
|
||||
height = 200,
|
||||
className,
|
||||
}) {
|
||||
return (
|
||||
@@ -10,15 +13,11 @@ export default function NahodkaLogo({
|
||||
className={className}
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="-40 115 760 205"
|
||||
viewBox="0 0 600 200"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* ========================= */}
|
||||
{/* ЦВЕТ БУКВ */}
|
||||
{/* ========================= */}
|
||||
|
||||
<linearGradient
|
||||
id="coral"
|
||||
x1="0"
|
||||
@@ -26,53 +25,10 @@ export default function NahodkaLogo({
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor="#E99A78" />
|
||||
<stop offset="100%" stopColor="#D97956" />
|
||||
<stop offset="0%" stopColor="#FF8E6B" />
|
||||
<stop offset="100%" stopColor="#F1503A" />
|
||||
</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%"
|
||||
@@ -88,181 +44,21 @@ export default function NahodkaLogo({
|
||||
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)"
|
||||
<text
|
||||
x="300"
|
||||
y="134"
|
||||
textAnchor="middle"
|
||||
fill="url(#coral)"
|
||||
filter="url(#shadow)"
|
||||
fontFamily="Nunito, Arial Rounded MT Bold, Arial, sans-serif"
|
||||
fontSize="130"
|
||||
fontWeight="800"
|
||||
letterSpacing="1"
|
||||
>
|
||||
{/* Ручка */}
|
||||
|
||||
<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="none"
|
||||
stroke="url(#magnifier)"
|
||||
strokeWidth="12"
|
||||
/>
|
||||
|
||||
{/* Внутренняя рамка */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="58"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
{/* Стекло */}
|
||||
|
||||
<circle
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="53"
|
||||
fill="none"
|
||||
/>
|
||||
|
||||
{/* ================================================= */}
|
||||
{/* ЛАПКА */}
|
||||
{/* ================================================= */}
|
||||
|
||||
<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"
|
||||
stroke="#D97956"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-22"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
stroke="#D97956"
|
||||
strokeWidth="4"
|
||||
transform="rotate(-25 -22 -20)"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="-7"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
stroke="#D97956"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="9"
|
||||
cy="-29"
|
||||
rx="7"
|
||||
ry="11"
|
||||
fill="#E8D3B0"
|
||||
stroke="#D97956"
|
||||
strokeWidth="4"
|
||||
/>
|
||||
|
||||
<ellipse
|
||||
cx="23"
|
||||
cy="-20"
|
||||
rx="7"
|
||||
ry="10"
|
||||
fill="#E8D3B0"
|
||||
stroke="#D97956"
|
||||
strokeWidth="4"
|
||||
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>
|
||||
Находка
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,14 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import AppTopBar from "../layout/AppTopBar";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import MenuIcon from "../icons/MenuIcon";
|
||||
import NahodkaLogo from "../NahodkaLogo";
|
||||
|
||||
/**
|
||||
* TopBar ленты (Telegram-style):
|
||||
* слева — круглая стеклянная кнопка-логотип (открывает фильтр типа),
|
||||
* справа — squircle-кнопка-гамбургер (открывает SideBar).
|
||||
*/
|
||||
export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange }) {
|
||||
const { t } = useTranslation();
|
||||
const [open, setOpen] = useState(false);
|
||||
@@ -37,31 +42,42 @@ export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange
|
||||
|
||||
return (
|
||||
<div className="f-topbar-dropdown-wrap">
|
||||
<AppTopBar
|
||||
onMenuClick={onMenuClick}
|
||||
hideProfile
|
||||
hideWordmark
|
||||
centerContent={
|
||||
<button
|
||||
ref={btnRef}
|
||||
className="f-topbar-dropdown-btn"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
<div className="f-topbar">
|
||||
<button
|
||||
type="button"
|
||||
className="f-menu-btn"
|
||||
onClick={onMenuClick}
|
||||
aria-label={t("feed.openMenu")}
|
||||
>
|
||||
<MenuIcon />
|
||||
</button>
|
||||
|
||||
<button
|
||||
ref={btnRef}
|
||||
type="button"
|
||||
className="f-logo-btn"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
aria-label={t("feed.openFilter")}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<NahodkaLogo className="f-topbar-logo" />
|
||||
<svg
|
||||
className={`f-topbar-chevron${open ? " open" : ""}`}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<NahodkaLogo className="f-topbar-logo" width={130} height={52} />
|
||||
<svg
|
||||
className={`f-topbar-chevron${open ? " open" : ""}`}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<span className="f-topbar-spacer" />
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
@@ -89,6 +105,7 @@ export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange
|
||||
{options.map((opt) => (
|
||||
<button
|
||||
key={opt.key ?? "all"}
|
||||
type="button"
|
||||
className={`f-topbar-dropdown-item${typeFilter === opt.key ? " active" : ""}`}
|
||||
onClick={() => handleSelect(opt.key)}
|
||||
>
|
||||
@@ -100,4 +117,4 @@ export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
export default function MenuIcon () {
|
||||
export default function MenuIcon ({ className }) {
|
||||
return (
|
||||
<svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" opacity="0.8">
|
||||
<span className={className || undefined}>
|
||||
<svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user