diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx new file mode 100644 index 00000000..daf9c994 --- /dev/null +++ b/web/src/layouts/Root.tsx @@ -0,0 +1,21 @@ +import { Outlet } from "react-router-dom"; +import Header from "../components/Header"; +import UpdateVersionBanner from "../components/UpdateVersionBanner"; + +function Root() { + return ( +
+
+ +
+
+
+
+ +
+
+
+ ); +} + +export default Root; diff --git a/web/src/less/home-sidebar.less b/web/src/less/home-sidebar.less index e8279076..4cf97bc7 100644 --- a/web/src/less/home-sidebar.less +++ b/web/src/less/home-sidebar.less @@ -1,5 +1,5 @@ .home-sidebar-wrapper { - @apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 md:mr-2 h-full py-4 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar; + @apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 py-4 pr-2 md:mr-2 h-full bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar; &.show { @apply flex translate-x-0 right-0 shadow-2xl sm:shadow-none; diff --git a/web/src/less/home.less b/web/src/less/home.less deleted file mode 100644 index d3577da9..00000000 --- a/web/src/less/home.less +++ /dev/null @@ -1,23 +0,0 @@ -.page-wrapper.home { - @apply w-full h-full overflow-y-auto bg-zinc-100 dark:bg-zinc-800; - - > .banner-wrapper { - @apply w-full flex flex-col justify-start items-center; - } - - > .page-container { - @apply relative w-full h-auto mx-auto flex flex-row justify-start sm:justify-center items-start; - - > .header-wrapper { - @apply flex-shrink-0 h-full; - } - - > .memos-wrapper { - @apply relative flex-grow max-w-2xl w-full h-auto flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4; - - > .memos-editor-wrapper { - @apply w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg; - } - } - } -} diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 1be40dc1..2b093574 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -3,14 +3,11 @@ import { useTranslation } from "react-i18next"; import { useLocation } from "react-router-dom"; import { useGlobalStore, useUserStore } from "../store/module"; import toastHelper from "../components/Toast"; -import Header from "../components/Header"; import MemoEditor from "../components/MemoEditor"; import MemoFilter from "../components/MemoFilter"; import MemoList from "../components/MemoList"; -import UpdateVersionBanner from "../components/UpdateVersionBanner"; import MobileHeader from "../components/MobileHeader"; import HomeSidebar from "../components/HomeSidebar"; -import "../less/home.less"; function Home() { const { t } = useTranslation(); @@ -36,23 +33,17 @@ function Home() { }, [user?.setting.locale]); return ( -
-
- +
+
+ +
+ {!userStore.isVisitorMode() && } + +
+
-
-
-
- -
- {!userStore.isVisitorMode() && } - -
- -
- {!userStore.isVisitorMode() && } -
-
+ {!userStore.isVisitorMode() && } + ); } diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx index 0563bf57..4471070c 100644 --- a/web/src/router/index.tsx +++ b/web/src/router/index.tsx @@ -4,6 +4,7 @@ import { isNullorUndefined } from "../helpers/utils"; import store from "../store"; import { initialGlobalState, initialUserState } from "../store/module"; +const Root = lazy(() => import("../layouts/Root")); const Auth = lazy(() => import("../pages/Auth")); const AuthCallback = lazy(() => import("../pages/AuthCallback")); const Explore = lazy(() => import("../pages/Explore")); @@ -43,24 +44,30 @@ const router = createBrowserRouter([ }, { path: "/", - element: , - loader: async () => { - await initialGlobalStateLoader(); + element: , + children: [ + { + path: "", + element: , + loader: async () => { + await initialGlobalStateLoader(); - try { - await initialUserState(); - } catch (error) { - // do nth - } + try { + await initialUserState(); + } catch (error) { + // do nth + } - const { host, user } = store.getState().user; - if (isNullorUndefined(host)) { - return redirect("/auth"); - } else if (isNullorUndefined(user)) { - return redirect("/explore"); - } - return null; - }, + const { host, user } = store.getState().user; + if (isNullorUndefined(host)) { + return redirect("/auth"); + } else if (isNullorUndefined(user)) { + return redirect("/explore"); + } + return null; + }, + }, + ], }, { path: "/u/:userId", diff --git a/web/yarn.lock b/web/yarn.lock index 8abe9789..3850cf70 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -54,6 +54,13 @@ dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.19.4": + version "7.21.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" + integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/types@^7.18.6": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.20.7.tgz#54ec75e252318423fc07fb644dc6a58a64c09b7f" @@ -1703,6 +1710,13 @@ html-parse-stringify@^3.0.1: dependencies: void-elements "3.1.0" +i18next-browser-languagedetector@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz#ead34592edc96c6c3a618a51cb57ad027c5b5d87" + integrity sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g== + dependencies: + "@babel/runtime" "^7.19.4" + i18next@^21.9.2: version "21.10.0" resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.10.0.tgz#85429af55fdca4858345d0e16b584ec29520197d"