usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-19 00:51:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add root layout (#1294)

Browse Source
This commit is contained in:
boojack 2023-03-06 21:13:35 +08:00 committed by GitHub
parent 003161ea54
commit 595dbdb0ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/layouts/Root.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Outlet } from "react-router-dom";
import Header from "../components/Header";
import UpdateVersionBanner from "../components/UpdateVersionBanner";
function Root() {
return (
<section className="w-full h-full overflow-y-auto bg-zinc-100 dark:bg-zinc-800">
<div className="w-full flex flex-col justify-start items-center">
<UpdateVersionBanner />
</div>
<div className="grid grid-cols-1 sm:grid-cols-[14rem_1fr] relative w-full max-w-6xl h-full mx-auto">
<Header />
<main className="relative w-full h-auto flex flex-col justify-start items-start">
<Outlet />
</main>
</div>
</section>
);
}
export default Root;

2
web/src/less/home-sidebar.less
View File

@ -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;

23
web/src/less/home.less
View File

@ -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;
}
}
}
}

29
web/src/pages/Home.tsx
View File

@ -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 (
<section className="page-wrapper home">
<div className="banner-wrapper">
<UpdateVersionBanner />
<div className="relative w-full min-h-full flex flex-row justify-start items-start">
<div className="flex-grow w-auto max-w-2xl px-4 sm:px-2 sm:pt-4">
<MobileHeader />
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
{!userStore.isVisitorMode() && <MemoEditor />}
<MemoFilter />
</div>
<MemoList />
</div>
<div className="page-container">
<Header />
<main className="memos-wrapper">
<MobileHeader />
<div className="memos-editor-wrapper">
{!userStore.isVisitorMode() && <MemoEditor />}
<MemoFilter />
</div>
<MemoList />
</main>
{!userStore.isVisitorMode() && <HomeSidebar />}
</div>
</section>
{!userStore.isVisitorMode() && <HomeSidebar />}
</div>
);
}

39
web/src/router/index.tsx
View File

@ -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: <Home />,
loader: async () => {
await initialGlobalStateLoader();
element: <Root />,
children: [
{
path: "",
element: <Home />,
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",

14
web/yarn.lock
View File

@ -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"