Voldemar/honey-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add navbar
All checks were successful
Deploy to VPS (dist) / deploy (push) Successful in 1m34s
Details

Browse Source
This commit is contained in:
Hewston Fox
2026-03-18 03:26:43 +02:00
parent f93bc7d3e0
commit 1cadf7f1d2
14 changed files with 255 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>honey-fe</title> <title>honey-fe</title>
</head> </head>
<body> <body>

10
public/locales/en.d.ts vendored
View File

@@ -1 +1,9 @@
export declare const resources: { hello: "Hello World!"; "actionModal.close": "Close" }; export declare const resources: {
hello: "Hello World!";
"actionModal.close": "Close";
"nav.shop": "Shop";
"nav.apiary": "Apiary";
"nav.game": "Game";
"nav.cashdesk": "Cashdesk";
"nav.menu": "Menu";
};

7
public/locales/en.json
View File

@@ -1,4 +1,9 @@
{ {
"hello": "Hello World!", "hello": "Hello World!",
"actionModal.close": "Close" "actionModal.close": "Close",
"nav.shop": "Shop",
"nav.apiary": "Apiary",
"nav.game": "Game",
"nav.cashdesk": "Cashdesk",
"nav.menu": "Menu"
} }

10
public/locales/ru.d.ts vendored
View File

@@ -1 +1,9 @@
export declare const resources: { hello: "Привет мир"; "actionModal.close": "Закрыть" }; export declare const resources: {
hello: "Привет мир";
"actionModal.close": "Закрыть";
"nav.shop": "Магазин";
"nav.apiary": "Пасека";
"nav.game": "Игра";
"nav.cashdesk": "Касса";
"nav.menu": "Меню";
};

7
public/locales/ru.json
View File

@@ -1,4 +1,9 @@
{ {
"hello": "Привет мир", "hello": "Привет мир",
"actionModal.close": "Закрыть" "actionModal.close": "Закрыть",
"nav.shop": "Магазин",
"nav.apiary": "Пасека",
"nav.game": "Игра",
"nav.cashdesk": "Касса",
"nav.menu": "Меню"
} }

22
src/routes/-/Header/Header.module.css Normal file
View File

@@ -0,0 +1,22 @@
:root {
--header-height: 90px;
--header-total: calc(
var(--header-height) + var(--tg-safe-area-inset-top, 0px) +
var(--tg-content-safe-area-inset-top, 0px)
);
}
@layer base {
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
height: var(--header-total);
padding-top: calc(
var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)
);
background: rgb(59 130 246 / 0.3);
}
}

5
src/routes/-/Header/Header.tsx Normal file
View File

@@ -0,0 +1,5 @@
import classes from "./Header.module.css";
export default function Header() {
return <header className={classes.header} />;
}

1
src/routes/-/Header/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Header";

79
src/routes/-/Navigation/Navigation.module.css Normal file
View File

@@ -0,0 +1,79 @@
:root {
--navigation-height: 74px;
--navigation-total: calc(var(--navigation-height) + var(--tg-safe-area-inset-bottom, 0px));
}
@layer base {
.navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
overflow: hidden;
}
.barContainer {
display: flex;
align-items: flex-end;
}
.barWrapper {
display: flex;
align-items: flex-end;
}
.bar {
width: 54px;
border-radius: 27px 27px 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
}
.barActive {
}
.barInactive {
}
.safeContent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 64px;
}
.iconPlaceholder {
width: 20px;
height: 20px;
background: rgb(255 255 255 / 0.4);
border-radius: 4px;
flex-shrink: 0;
margin-top: -6px;
margin-bottom: -6px;
}
.label {
font-size: 11px;
text-align: center;
-webkit-text-stroke: 1px #331b01;
text-shadow: 0px 1px 2px 0px #0000008c;
line-height: 1;
}
.labelInactive {
color: white;
}
.labelActive {
color: #ffbd42;
}
}

97
src/routes/-/Navigation/Navigation.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { Link, useMatchRoute } from "@tanstack/react-router";
import { motion } from "motion/react";
import { useTranslation } from "react-i18next";
import GlassSurface from "@components/surface/GlassSurface";
import classes from "./Navigation.module.css";
const ENTRANCE_DELAYS = [0.2, 0.1, 0, 0.1, 0.2];
const SPRING_ENTRANCE = { type: "spring" as const, stiffness: 400, damping: 20 };
const SPRING_HEIGHT = { type: "spring" as const, stiffness: 500, damping: 25 };
type NavItem =
| { key: string; route: string; isMenu?: false }
| { key: string; route?: undefined; isMenu: true };
const NAV_ITEMS: NavItem[] = [
{ key: "nav.shop", route: "/shop/" },
{ key: "nav.apiary", route: "/apiary/" },
{ key: "nav.game", route: "/game/" },
{ key: "nav.cashdesk", route: "/cashdesk/" },
{ key: "nav.menu", isMenu: true },
];
function IconPlaceholder() {
return <div className={classes.iconPlaceholder} />;
}
type BarProps = {
labelKey: string;
active: boolean;
entranceDelay: number;
};
function NavBar({ labelKey, active, entranceDelay }: BarProps) {
const { t } = useTranslation();
return (
<motion.div
className={classes.barWrapper}
initial={{ translateY: "100%" }}
animate={{ translateY: "0%" }}
transition={{ ...SPRING_ENTRANCE, delay: entranceDelay }}
>
<GlassSurface
className={[classes.bar, active ? classes.barActive : classes.barInactive]}
animate={{ minHeight: active ? 74 : 64 }}
transition={SPRING_HEIGHT}
>
<div className={classes.safeContent}>
<IconPlaceholder />
<span
className={
active
? `${classes.label} ${classes.labelActive}`
: `${classes.label} ${classes.labelInactive}`
}
>
{t(labelKey)}
</span>
<IconPlaceholder />
</div>
</GlassSurface>
</motion.div>
);
}
export default function Navigation() {
const matchRoute = useMatchRoute();
return (
<nav className={classes.navigation}>
{NAV_ITEMS.map((item, index) => {
const active = item.isMenu ? false : !!matchRoute({ to: item.route });
const bar = (
<NavBar labelKey={item.key} active={active} entranceDelay={ENTRANCE_DELAYS[index]} />
);
if (item.isMenu) {
return (
<div key={item.key} className={classes.barContainer}>
{bar}
</div>
);
}
return (
<Link key={item.key} to={item.route} className={classes.barContainer}>
{bar}
</Link>
);
})}
</nav>
);
}

1
src/routes/-/Navigation/index.ts Normal file
View File

@@ -0,0 +1 @@
export { default } from "./Navigation";

18
src/routes/__root.tsx
View File

@@ -5,6 +5,22 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { useEffect } from "react"; import { useEffect } from "react";
import { Route as GameRoute } from "./game"; import { Route as GameRoute } from "./game";
import Header from "./-/Header";
import Navigation from "./-/Navigation";
function AppLayout() {
return (
<div className="relative h-full w-full">
<Header />
<main className="h-full overflow-y-auto overflow-x-hidden pt-[calc(var(--header-total)+16px)] pb-[calc(var(--navigation-total)+16px)]">
<Outlet />
</main>
<Navigation />
</div>
);
}
export const Route = createRootRoute({ export const Route = createRootRoute({
notFoundComponent: () => { notFoundComponent: () => {
@@ -13,7 +29,7 @@ export const Route = createRootRoute({
}, },
component: () => ( component: () => (
<> <>
<Outlet /> <AppLayout />
<TanStackDevtools <TanStackDevtools
config={{ config={{
defaultOpen: false, defaultOpen: false,

2
src/routes/game/-/GameRoute.tsx
View File

@@ -30,7 +30,7 @@ export default function GameRoute() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
return ( return (
<SectionSurface className="relative flex flex-col gap-4 w-full overflow-auto max-h-dvh"> <SectionSurface className="relative flex flex-col gap-4 w-full">
<TabSelector tabs={TABS} value={activeTab} onChange={setActiveTab} /> <TabSelector tabs={TABS} value={activeTab} onChange={setActiveTab} />
<SwitchInput value={switchValue} onChange={setSwitchValue} /> <SwitchInput value={switchValue} onChange={setSwitchValue} />
<ContentSurface className="rounded-2xl"> <ContentSurface className="rounded-2xl">

1
src/styles/index.css
View File

@@ -13,6 +13,7 @@ body {
#root { #root {
@apply w-full h-full max-w-150 m-auto overflow-hidden relative; @apply w-full h-full max-w-150 m-auto overflow-hidden relative;
overflow: hidden;
} }
button { button {