Add nav avatar

components/NavBar.tsx

@@ -1,7 +1,18 @@
-import { FC } from 'react';
+import { FC, useCallback, useState } from 'react';
 import cn from 'classnames';
+import { FiHome } from 'react-icons/fi';
+import Image from 'next/image';
+import UseAnimations from 'react-useanimations';
+import menu3 from 'react-useanimations/lib/menu3';
+
+import NavAvatar from 'components/nav/NavAvatar';
 
 const NavBar: FC = () => {
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const onToggle = useCallback(() => {
+    setMenuIsOpen((menuIsOpen) => !menuIsOpen);
+  }, []);
+
   return (
     <>
       <div
@@ -10,7 +21,23 @@ const NavBar: FC = () => {
           'md:col-span-3 lg:col-span-2 xl:col-span-1'
         )}
       >
-        this is nav
+        <div className="flex justify-between">
+          <NavAvatar />
+
+          <div className="cursor-pointer md:hidden">
+            <UseAnimations
+              reverse={menuIsOpen}
+              size={40}
+              animation={menu3}
+              speed={2}
+              onClick={onToggle}
+            />
+          </div>
+        </div>
+
+        <div className={cn({ hidden: !menuIsOpen }, 'md:block')}>
+          this is nav
+        </div>
       </div>
     </>
   );

components/nav/NavAvatar.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import cn from 'classnames';
+import Image from 'next/image';
+
+const NavAvatar: FC = () => {
+  return (
+    <>
+      <div>
+        <div className={cn('w-32 h-32 shadow-lg', 'rounded-full relative')}>
+          <Image
+            className="rounded-full overflow-hidden"
+            width="128"
+            height="128"
+            src="/images/img/avatar.svg"
+            alt=""
+          />
+          <div
+            className={cn(
+              'w-10 h-10 rounded-full bg-white',
+              'absolute right-0 bottom-0',
+              'flex justify-center items-center'
+            )}
+          >
+            <Image
+              width="20"
+              height="17"
+              src="/images/img/sparkling-heart.png"
+              alt=""
+            />
+          </div>
+        </div>
+
+        <h1 className={cn('text-3xl font-semibold mt-4 mb-2')}>肥羊</h1>
+        <span className="text-gray-400">恐惧是思维杀手..</span>
+      </div>
+    </>
+  );
+};
+
+export default NavAvatar;

layouts/MainLayout.tsx

@@ -7,7 +7,7 @@ const MainLayout: FC = ({ children }) => {
     <>
       <div
         className={cn(
-          'grid grid-cols-12 container mx-auto p-2 items-stretch',
+          'grid grid-cols-12 container mx-auto px-4 py-8 items-stretch',
           'md:gap-4',
           'xl:grid-cols-8'
         )}

package.json

@@ -15,7 +15,9 @@
     "@next/mdx": "^12.0.8",
     "next": "12.0.8",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-useanimations": "^2.0.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.1",