feat(web): layouts

yjl9903 · Sep 12, 2024 · a9c44b6 · a9c44b6
1 parent 1f1fae2
commit a9c44b6
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 83 deletions.
diff --git a/apps/frontend/web/app/components/Sidebar/atom.ts b/apps/frontend/web/app/components/Sidebar/atom.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const isOpenSidebar = atom(false);
diff --git a/apps/frontend/web/app/components/Sidebar/index.ts b/apps/frontend/web/app/components/Sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from './atom';
+
+export { Sidebar } from './sidebar';
diff --git a/apps/frontend/web/app/components/Sidebar/sidebar.tsx b/apps/frontend/web/app/components/Sidebar/sidebar.tsx
@@ -0,0 +1,10 @@
+import { useAtom } from "jotai"
+import { isOpenSidebar } from "./atom"
+
+export function Sidebar() {
+  const [isOpen] = useAtom(isOpenSidebar);
+
+  if (!isOpen) return <div></div>
+
+  return <div className="w-[300px] border-r-1 h-[150vh]"></div>
+}
diff --git a/apps/frontend/web/app/layouts/Layout.tsx b/apps/frontend/web/app/layouts/Layout.tsx
@@ -1,4 +1,5 @@
 import Search from '@/components/Search';
+import { Sidebar } from '@/components/Sidebar';
 import { NavLink } from '@remix-run/react';
 import { atom, useAtom } from 'jotai';
 import { useEffect, useRef, useState } from 'react';
@@ -10,8 +11,6 @@ const MaxPaddingTop = 152;
 const MaxPaddingBottom = 36;
 const SearchHeight = NavHeight;
 
-// const heroHeightAtom = atom((get) => NavHeight + MaxTitleHeight);
-
 export const useHero = () => {
   const { y } = useDocumentScroll();
 
@@ -31,8 +30,10 @@ export default function Layout(props: { children?: React.ReactNode }) {
     <div className="w-full" style={{ '--nav-height': `${NavHeight}px` }}>
       <Hero height={height} paddingTop={paddingTop} paddingBottom={paddingBottom}></Hero>
       <div className="flex" style={{ paddingTop: `${MaxPaddingTop + NavHeight + MaxPaddingBottom}px` }}>
-        <div className="w-[300px] border-r-1 h-[150vh]"></div>
-        <div className="flex-auto">{props.children}</div>
+        <Sidebar></Sidebar>
+        <div className="flex-auto flex items-center">
+          <div className="main">{props.children}</div>
+        </div>
       </div>
     </div>
   );
@@ -43,12 +44,9 @@ function Hero(props: { height: number, paddingTop: number; paddingBottom: number
 
   return (
     <div className="w-full fixed bg-[#fef8f7]" style={{ height: `${height}px` }}>
-      <nav className="px-8 h-$nav-height flex gap-2 z-1">
-        <div className="leading-$nav-height">🌸 Anime Garden</div>
-        <div className="leading-$nav-height">动画</div>
-      </nav>
-      <div className="hero-top w-full pt-4rem pb-3rem text-4xl font-quicksand font-bold text-center select-none outline-none absolute" style={{ top: `${paddingTop - MaxPaddingTop}px` }}>
-        <NavLink to="/">🌸 Anime Garden</NavLink>
+      <Header></Header>
+      <div className="hero-top w-full pt-4rem pb-3rem text-4xl font-quicksand font-bold text-center select-none outline-none absolute pointer-events-none" style={{ top: `${paddingTop - MaxPaddingTop}px` }}>
+        <NavLink to="/" className="pointer-events-auto cursor-pointer">🌸 Anime Garden</NavLink>
       </div>
       <div className="w-full flex justify-center absolute z-10" style={{ top: `${paddingTop}px`, paddingTop: '8px', paddingBottom: '8px' }}>
         <div className="h-[52px]">
@@ -59,3 +57,21 @@ function Hero(props: { height: number, paddingTop: number; paddingBottom: number
     </div>
   );
 }
+
+function Header() {
+  return <nav className="px-8 h-$nav-height flex gap-4 z-1 [&>div]:leading-$nav-height">
+    <div className="text-2xl font-quicksand font-bold"><NavLink to="/">🌸</NavLink></div>
+    <div><NavLink to="/" className="rounded-md p-2 hover:(bg-neutral-200)">动画</NavLink></div>
+    <div><NavLink to="/resources" className="rounded-md p-2 hover:(bg-neutral-200)">资源</NavLink></div>
+    <div className='flex-auto'></div>
+    <div>
+      <a
+        href={''}
+        target="_blank"
+        className="inline cursor-pointer rounded-md p-2 text-[#ee802f] hover:(!text-[#ff7800] !border-b-[#ff7800] bg-neutral-200)"
+      >
+        <span className="i-carbon-rss mr1" /><span>RSS</span>
+      </a>
+    </div>
+  </nav>
+}
diff --git a/apps/frontend/web/app/layouts/index.ts b/apps/frontend/web/app/layouts/index.ts
@@ -0,0 +1,3 @@
+import Layout from './Layout';
+
+export default Layout;
diff --git a/apps/frontend/web/app/routes/resources.$page/route.tsx b/apps/frontend/web/app/routes/resources.$page/route.tsx
@@ -1,48 +1,52 @@
 import type { MetaFunction } from "@remix-run/node";
 
+import Layout from '~/layouts/Layout';
+
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
+    { title: "Anime Garden 動漫花園資源網第三方镜像站" },
+    { name: "description", content: "}Anime Garden 動漫花園資源網第三方镜像站" },
   ];
 };
 
 export default function Resources() {
   return (
-    <div className="font-sans p-4">
-      <h1 className="text-3xl">Welcome to Remix</h1>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
+    <Layout>
+      <div className="font-sans p-4">
+        <h1 className="text-3xl">Welcome to Remix</h1>
+        <ul className="list-disc mt-4 pl-6 space-y-2">
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/quickstart"
+              rel="noreferrer"
+            >
+              5m Quick Start
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/tutorial"
+              rel="noreferrer"
+            >
+              30m Tutorial
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/docs"
+              rel="noreferrer"
+            >
+              Remix Docs
+            </a>
+          </li>
+        </ul>
+      </div>
+    </Layout>
   );
-}
+}
diff --git a/apps/frontend/web/app/routes/resources/route.tsx b/apps/frontend/web/app/routes/resources/route.tsx
@@ -1,39 +1,52 @@
+import type { MetaFunction } from "@remix-run/node";
+
+import Layout from '~/layouts/Layout';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Anime Garden 動漫花園資源網第三方镜像站" },
+    { name: "description", content: "}Anime Garden 動漫花園資源網第三方镜像站" },
+  ];
+};
+
 export default function Resources() {
   return (
-    <div className="font-sans p-4">
-      <h1 className="text-3xl">Welcome to Remix</h1>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
-    </div>
+    <Layout>
+      <div className="font-sans p-4">
+        <h1 className="text-3xl">Welcome to Remix</h1>
+        <ul className="list-disc mt-4 pl-6 space-y-2">
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/quickstart"
+              rel="noreferrer"
+            >
+              5m Quick Start
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/start/tutorial"
+              rel="noreferrer"
+            >
+              30m Tutorial
+            </a>
+          </li>
+          <li>
+            <a
+              className="text-blue-700 underline visited:text-purple-900"
+              target="_blank"
+              href="https://remix.run/docs"
+              rel="noreferrer"
+            >
+              Remix Docs
+            </a>
+          </li>
+        </ul>
+      </div>
+    </Layout>
   );
 }
diff --git a/apps/frontend/web/app/styles/main.css b/apps/frontend/web/app/styles/main.css
@@ -1,2 +1,7 @@
 @import '@onekuma/preset.css';
 @import '@onekuma/reset/tailwind.css';
+
+.main {
+  /* prettier-ignore */
+  @apply: mx-auto lg:w-[80vw] md:w-[46rem] lt-md:w-[95vw];
+}