feat: header rwd 做好

sexyoung · Jul 10, 2023 · e836a30 · e836a30
1 parent f1940a3
commit e836a30
Show file tree

Hide file tree

Showing 2 changed files with 356 additions and 6 deletions.
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -3,11 +3,33 @@ import Links from "./links";
 
 export default function Header() {
   return (
-    <header className="container fixed py-5 text-right">
-      <img src={logo} className="mr-5 inline-block w-[60px]" alt="Home" />
-      <ul className="inline-block [&>*]:mx-2 [&>*]:inline-block">
-        <Links />
-      </ul>
+    <header className="fixed inset-x-0 top-0 z-50 md:absolute">
+      <nav className="container mx-auto flex flex-wrap items-start justify-between px-5 py-5 text-right md:block md:px-0">
+        <img src={logo} className="mr-5 inline-block w-[60px]" alt="Home" />
+        <label htmlFor="menu-toggle" className="pointer-cursor block md:hidden">
+          <svg
+            className="fill-current text-gray-900"
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+          >
+            <title>menu</title>
+            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+          </svg>
+        </label>
+        <input
+          className="hidden [&:checked~#menu]:block"
+          type="checkbox"
+          id="menu-toggle"
+        />
+        <ul
+          id="menu"
+          className="mx-auto hidden w-full text-center md:inline-block md:w-auto [&>*]:mx-2 md:[&>*]:inline"
+        >
+          <Links />
+        </ul>
+      </nav>
     </header>
   );
 }