feat: add root layout (#1294)

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 (
+    <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;

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;

web/src/less/home.less

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

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

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,6 +44,10 @@ const router = createBrowserRouter([
   },
   {
     path: "/",
+    element: <Root />,
+    children: [
+      {
+        path: "",
         element: <Home />,
         loader: async () => {
           await initialGlobalStateLoader();
@@ -62,6 +67,8 @@ const router = createBrowserRouter([
           return null;
         },
       },
+    ],
+  },
   {
     path: "/u/:userId",
     element: <Home />,

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"