diff --git a/package.json b/package.json
index 2e22723..488ee49 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
"@kokateam/router-vkminiapps": "^0.2.6",
"@vkontakte/icons": "^2.139.0",
"@vkontakte/vk-bridge": "^2.15.0",
- "@vkontakte/vkui": "4.41.0",
+ "@vkontakte/vkui": "^6.7.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hot-toast": "^2.4.1",
diff --git a/src/App.jsx b/src/App.jsx
index 5483c41..2607e38 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,10 @@
import { useEffect, useState } from "react";
import { useRecoilState } from "recoil";
import {
- AppearanceProvider,
AppRoot,
ConfigProvider,
- usePlatform,
- withAdaptivity,
+ useAdaptivityWithJSMediaQueries,
+ usePlatform
} from "@vkontakte/vkui";
import Navigation from "/src/Navigation";
@@ -13,55 +12,47 @@ import bridge from "@vkontakte/vk-bridge";
import main from "/src/storage/atoms/main";
import SnackbarProvider from "./components/__global/SnackbarProvider";
-const App = withAdaptivity(
- ({ viewWidth }) => {
- const [theme, setTheme] = useState("light");
- const [mainCoil, updateMainCoil] = useRecoilState(main);
-
- const platform = usePlatform();
-
- const isDesktop =
- viewWidth > 3 ||
- new URLSearchParams(window.location.search).get("vk_platform") ===
- "desktop_web";
-
- useEffect(() => {
- bridge.subscribe(({ detail: { type, data } }) => {
- if (type === "VKWebAppUpdateConfig")
- setTheme(data?.scheme.includes("light") ? "light" : "dark");
- });
- }, []);
-
- useEffect(() => {
- bridge.send("VKWebAppInit").then(() => console.log("VKWebAppInit"));
-
- updateMainCoil({
- ...mainCoil,
- isDesktop,
- platform,
- });
- }, []);
-
- return (
-
-
-
-
-
-
-
-
-
- );
- },
- {
- viewWidth: true,
- },
-);
+bridge.send("VKWebAppInit").then(() => console.log("VKWebAppInit"));
+
+const App = () => {
+ const [theme, setTheme] = useState("light");
+ const [mainCoil, updateMainCoil] = useRecoilState(main);
+
+ const platform = usePlatform();
+ const { viewWidth } = useAdaptivityWithJSMediaQueries();
+
+ const isDesktop = viewWidth >= 3 || platform === "vkcom";
+
+ useEffect(() => {
+ bridge.subscribe(({ detail: { type, data } }) => {
+ if (type === "VKWebAppUpdateConfig" && data?.appearance)
+ setTheme(data.appearance);
+ });
+ }, []);
+
+ useEffect(() => {
+ updateMainCoil({
+ ...mainCoil,
+ isDesktop,
+ platform
+ });
+ }, [isDesktop, platform]);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
export default App;
diff --git a/src/Main.jsx b/src/Main.jsx
index 4f63c6f..184681c 100644
--- a/src/Main.jsx
+++ b/src/Main.jsx
@@ -1,8 +1,8 @@
import "/src/assets/css/global.scss";
import { createRoot } from "react-dom/client";
-import { AdaptivityProvider } from "@vkontakte/vkui";
import { RouterRoot } from "@kokateam/router-vkminiapps";
+import { AdaptivityProvider } from "@vkontakte/vkui";
import App from "/src/App";
diff --git a/src/Navigation.jsx b/src/Navigation.jsx
index 0bbece5..8ed14de 100644
--- a/src/Navigation.jsx
+++ b/src/Navigation.jsx
@@ -1,39 +1,48 @@
-import { PanelHeader, SplitCol, SplitLayout } from "@vkontakte/vkui";
+import {
+ PanelHeader,
+ SplitCol,
+ SplitLayout
+} from "@vkontakte/vkui";
import { Epic, View, useRouterPopout } from "@kokateam/router-vkminiapps";
import PageConstructor from "/src/components/__global/PageConstructor";
import Home from "./panels/home/home";
import MainStack from "./modals/MainStack";
import DesktopNavigation from "./components/__navigation/Desktop";
import MobileNavigation from "./components/__navigation/Mobile";
+import Profile from "./panels/profile/profile";
const Navigation = ({ isDesktop }) => {
const [popout] = useRouterPopout();
return (
}
- className={"jcc"}
+ header={}
modal={}
popout={popout}
>
{isDesktop ? : null}
-
- : null}>
+
+ : null
+ }
+ >
-
+
+
+
+
+
+
+
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 768c010..7517b54 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -1,10 +1,5 @@
@import "@vkontakte/vkui/dist/vkui.css", "variables.scss";
-body,
-.Header {
- user-select: none;
-}
-
body[scheme="bright_dark"],
[scheme="bright_dark"],
.vkuibright_dark,
@@ -18,6 +13,10 @@ body[scheme="vkcom_dark"],
}
}
+.vkuiSplitLayout {
+ height: auto;
+}
+
.vkuiTabbarItem {
.vkuiTappable {
display: none;
@@ -34,7 +33,11 @@ body[scheme="vkcom_dark"],
}
.navigation__item-selected {
- background-color: var(--vkui--color_background--hover);
+ background-color: var(--vkui--color_field_background);
+}
+
+.vkuiFormItem--withPadding {
+ padding: 10px 0 0;
}
.panelPadding {
@@ -46,3 +49,9 @@ body[scheme="vkcom_dark"],
margin-top: 30px;
}
}
+
+.header {
+ margin-left: var(--vkui--size_split_col_padding_horizontal--regular);
+
+ background: var(--vkui--color_background_content);
+}
\ No newline at end of file
diff --git a/src/assets/css/variables.scss b/src/assets/css/variables.scss
index a1b2e1a..0deddd2 100644
--- a/src/assets/css/variables.scss
+++ b/src/assets/css/variables.scss
@@ -6,8 +6,12 @@
margin-top: 10px;
}
-.jcc {
- justify-content: center;
+.p16 {
+ padding: 16px;
+}
+
+.mb5 {
+ margin-bottom: 5px;
}
.mt5 {
diff --git a/src/components/__global/ModalConstructor.jsx b/src/components/__global/ModalConstructor.jsx
index 1fa3f36..05c5f07 100644
--- a/src/components/__global/ModalConstructor.jsx
+++ b/src/components/__global/ModalConstructor.jsx
@@ -1,9 +1,7 @@
import { useRecoilValue } from "recoil";
import {
- ANDROID,
Group,
- IOS,
ModalPage,
ModalPageHeader,
PanelHeaderButton,
@@ -34,7 +32,7 @@ const ModalConstructor = ({
+ platform === "android" &&
}
>
{title}
}
>
- {children}
+ {children}
);
};
diff --git a/src/components/__global/PageConstructor.jsx b/src/components/__global/PageConstructor.jsx
index 0228d13..668332f 100644
--- a/src/components/__global/PageConstructor.jsx
+++ b/src/components/__global/PageConstructor.jsx
@@ -1,7 +1,6 @@
import { Suspense } from "react";
import { useRecoilValue } from "recoil";
import { useRouterBack } from "@kokateam/router-vkminiapps";
-
import { Group, Panel, PanelHeader, PanelHeaderBack } from "@vkontakte/vkui";
import { getIsDesktop } from "/src/storage/selectors/main";
@@ -26,7 +25,7 @@ const Page = ({
before={
isBack ? toBack(-1)} /> : undefined
}
- separator={isDesktop}
+ delimiter={isDesktop ? "none" : "separator"}
>
{name}
diff --git a/src/components/__global/SnackbarProvider.jsx b/src/components/__global/SnackbarProvider.jsx
index 58750d9..32443da 100644
--- a/src/components/__global/SnackbarProvider.jsx
+++ b/src/components/__global/SnackbarProvider.jsx
@@ -13,8 +13,8 @@ export default function SnackbarProvider({ children }) {
toastOptions={{
className: "toast",
}}
- gutter={isDesktop ? 8 : -20}
- position={isDesktop ? "bottom-left" : "top-center"}
+ gutter={8}
+ position={isDesktop ? "bottom-left" : "bottom-center"}
reverseOrder={false}
/>
>
diff --git a/src/components/__navigation/Desktop.jsx b/src/components/__navigation/Desktop.jsx
index 3d3d397..c7f73c2 100644
--- a/src/components/__navigation/Desktop.jsx
+++ b/src/components/__navigation/Desktop.jsx
@@ -1,30 +1,42 @@
import { useRouterView } from "@kokateam/router-vkminiapps";
-import { Panel, PanelHeader, SimpleCell, SplitCol } from "@vkontakte/vkui";
+import {
+ Card,
+ Panel,
+ PanelHeader,
+ SimpleCell,
+ SplitCol
+} from "@vkontakte/vkui";
import navigationItems from "/src/components/__navigation/items";
const DesktopNavigation = () => {
- const { view, toView } = useRouterView();
+ const [view, toView] = useRouterView();
return (
-
+
Boilerplate
- {navigationItems.map((el, key) => (
- toView(el.id)}
- disabled={view === el.id}
- before={el.icon}
- multiline
- description={el.description}
- >
- {el.title}
-
- ))}
+
+ {navigationItems.map((el, key) => (
+ {
+ if (view !== el.id)
+ toView(el.id);
+ }}
+ hasActive={view !== el.id}
+ hasHover={view !== el.id}
+ before={el.icon}
+ multiline
+ description={el.description}
+ >
+ {el.title}
+
+ ))}
+
);
diff --git a/src/modals/FullModal.jsx b/src/modals/FullModal.jsx
new file mode 100644
index 0000000..2aae36b
--- /dev/null
+++ b/src/modals/FullModal.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Button, Card, FormItem, Input, Text } from "@vkontakte/vkui";
+import { useRouterBack } from "@kokateam/router-vkminiapps";
+
+const FullModal = () => {
+ const toBack = useRouterBack();
+
+ return (
+ <>
+
+ Это модалка в виде страницы.
Полезно, если нужен ввод от юзера в
+ какую-нибудь форму.
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default FullModal;
\ No newline at end of file
diff --git a/src/modals/Hello.jsx b/src/modals/Hello.jsx
index 7a701fe..f881c51 100644
--- a/src/modals/Hello.jsx
+++ b/src/modals/Hello.jsx
@@ -1,12 +1,17 @@
import { Button, Text } from "@vkontakte/vkui";
+import { useRouterModal } from "@kokateam/router-vkminiapps";
const Hello = () => {
+ const [, toModal] = useRouterModal();
+
return (
<>
- Какое-то крутое описание и кнопка!
+ Это базовая модалка в виде карточки. Полезно, если нужно отобразить, например, какое-то описание.
-