style(navbar): 完善导航栏样式

MetaBubble207 · Apr 3, 2024 · b6da486 · b6da486
1 parent 9aeb9cb
commit b6da486
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 18 deletions.
diff --git a/public/images/nav/book.svg b/public/images/nav/book.svg
diff --git a/public/images/nav/book_active.svg b/public/images/nav/book_active.svg
diff --git a/public/images/nav/find.svg b/public/images/nav/find.svg
diff --git a/public/images/nav/find_active.svg b/public/images/nav/find_active.svg
diff --git a/public/images/nav/user.svg b/public/images/nav/user.svg
diff --git a/public/images/nav/user_active.svg b/public/images/nav/user_active.svg
diff --git a/src/app/_components/common/Navbar.jsx b/src/app/_components/common/Navbar.jsx
@@ -1,26 +1,24 @@
+"use client"
 import React from 'react';
 import Link from 'next/link';
 
 const Navbar = () => {
     return (
-        <nav>
-            <ul>
-                <li>
-                    <Link href="find">
-                        发现
-                    </Link>
-                </li>
-                <li>
-                    <Link href="subscribe">
-                        订阅
-                    </Link>
-                </li>
-                <li>
-                    <Link href="user">
-                        我的
-                    </Link>
-                </li>
-            </ul>
+        <nav className='flex justify-center'>
+            <div className='flex flex-row justify-center w-65% h-20.8 text-center text-4 bg-[#FFF] border-rd-13 shadow-[0px_1px_4px_2px_rgba(0,0,0,0.05)] overflow-hidden'>
+                <Link href="find" className='flex-1 text-[#b5b5b5] font-500 mt-1.2'>
+                    <img src={"/images/nav/find.svg"} alt={"find"} className='m-auto mb-1.2 w-9.6 h-9.6'></img>
+                    发现
+                </Link>
+                <Link href="subscribe" className='flex-1 text-[#b5b5b5] font-500 mt-1.2'>
+                    <img src={"/images/nav/book.svg"} alt={"subscribe"} className='m-auto mb-1.2 w-9.6 h-9.6'></img>
+                    订阅
+                </Link>
+                <Link href="user" className='flex-1 text-[#b5b5b5] font-500 mt-1.2'>
+                    <img src={"/images/nav/user.svg"} alt={"use"} className='m-auto mb-1.2 w-9.6 h-9.6'></img>
+                    我的
+                </Link>
+            </div>
         </nav>
     );
 };