diff --git a/index.html b/index.html index 3284e99..c1ed1b0 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + honey-fe diff --git a/public/locales/en.d.ts b/public/locales/en.d.ts index e667571..8d4f107 100644 --- a/public/locales/en.d.ts +++ b/public/locales/en.d.ts @@ -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"; +}; diff --git a/public/locales/en.json b/public/locales/en.json index c57b965..f5f8395 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -1,4 +1,9 @@ { "hello": "Hello World!", - "actionModal.close": "Close" + "actionModal.close": "Close", + "nav.shop": "Shop", + "nav.apiary": "Apiary", + "nav.game": "Game", + "nav.cashdesk": "Cashdesk", + "nav.menu": "Menu" } diff --git a/public/locales/ru.d.ts b/public/locales/ru.d.ts index 94b80d7..af8df85 100644 --- a/public/locales/ru.d.ts +++ b/public/locales/ru.d.ts @@ -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": "Меню"; +}; diff --git a/public/locales/ru.json b/public/locales/ru.json index 16ae368..e655116 100644 --- a/public/locales/ru.json +++ b/public/locales/ru.json @@ -1,4 +1,9 @@ { "hello": "Привет мир", - "actionModal.close": "Закрыть" + "actionModal.close": "Закрыть", + "nav.shop": "Магазин", + "nav.apiary": "Пасека", + "nav.game": "Игра", + "nav.cashdesk": "Касса", + "nav.menu": "Меню" } diff --git a/src/routes/-/Header/Header.module.css b/src/routes/-/Header/Header.module.css new file mode 100644 index 0000000..12ee669 --- /dev/null +++ b/src/routes/-/Header/Header.module.css @@ -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); + } +} diff --git a/src/routes/-/Header/Header.tsx b/src/routes/-/Header/Header.tsx new file mode 100644 index 0000000..36e8a19 --- /dev/null +++ b/src/routes/-/Header/Header.tsx @@ -0,0 +1,5 @@ +import classes from "./Header.module.css"; + +export default function Header() { + return
; +} diff --git a/src/routes/-/Header/index.ts b/src/routes/-/Header/index.ts new file mode 100644 index 0000000..2764567 --- /dev/null +++ b/src/routes/-/Header/index.ts @@ -0,0 +1 @@ +export { default } from "./Header"; diff --git a/src/routes/-/Navigation/Navigation.module.css b/src/routes/-/Navigation/Navigation.module.css new file mode 100644 index 0000000..118b967 --- /dev/null +++ b/src/routes/-/Navigation/Navigation.module.css @@ -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; + } +} diff --git a/src/routes/-/Navigation/Navigation.tsx b/src/routes/-/Navigation/Navigation.tsx new file mode 100644 index 0000000..dcd5ccb --- /dev/null +++ b/src/routes/-/Navigation/Navigation.tsx @@ -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
; +} + +type BarProps = { + labelKey: string; + active: boolean; + entranceDelay: number; +}; + +function NavBar({ labelKey, active, entranceDelay }: BarProps) { + const { t } = useTranslation(); + + return ( + + +
+ + + {t(labelKey)} + + +
+ + + ); +} + +export default function Navigation() { + const matchRoute = useMatchRoute(); + + return ( + + ); +} diff --git a/src/routes/-/Navigation/index.ts b/src/routes/-/Navigation/index.ts new file mode 100644 index 0000000..f8785c3 --- /dev/null +++ b/src/routes/-/Navigation/index.ts @@ -0,0 +1 @@ +export { default } from "./Navigation"; diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index e42a063..a62918f 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -5,6 +5,22 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"; import { useEffect } from "react"; import { Route as GameRoute } from "./game"; +import Header from "./-/Header"; +import Navigation from "./-/Navigation"; + +function AppLayout() { + return ( +
+
+ +
+ +
+ + +
+ ); +} export const Route = createRootRoute({ notFoundComponent: () => { @@ -13,7 +29,7 @@ export const Route = createRootRoute({ }, component: () => ( <> - + + diff --git a/src/styles/index.css b/src/styles/index.css index dd52991..440e253 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -13,6 +13,7 @@ body { #root { @apply w-full h-full max-w-150 m-auto overflow-hidden relative; + overflow: hidden; } button {