chore: basic navbar style

web/package.json

@@ -11,6 +11,8 @@
     "dev": "NODE_ENV=development webpack serve"
   },
   "dependencies": {
+    "@iconify/iconify": "^2.0.2",
+    "@iconify/react": "^3.0.0-alpha.1",
     "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

web/src/App.tsx

@@ -1,8 +1,19 @@
 import React from 'react';
+import { Icon } from '@iconify/react';
+import clsx, { ClassValue } from 'clsx';
 
-const Icon: React.FC = React.memo(() => {
+const NavItem: React.FC<{
+  className?: ClassValue;
+}> = React.memo((props) => {
   return (
-    <div className="w-10 h-10 hover:rounded-sm bg-gray-300 mb-2 transition-all rounded-1/2 cursor-pointer"></div>
+    <div
+      className={clsx(
+        'w-10 h-10 hover:rounded-sm bg-gray-300 mb-2 transition-all rounded-1/2 cursor-pointer flex items-center justify-center',
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
   );
 });
 
@@ -10,15 +21,30 @@ export const App: React.FC = React.memo(() => {
   return (
     <div className="flex h-screen w-screen">
       <div className="w-16 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
-        <Icon />
+        {/* Navbar */}
+        <div className="flex-1">
+          <NavItem />
           <div className="h-px w-full bg-white mt-4 mb-4"></div>
-        <Icon />
+          <NavItem />
-        <Icon />
+          <NavItem />
-        <Icon />
+          <NavItem />
-        <Icon />
+          <NavItem />
+          <NavItem className="bg-green-500">
+            <Icon className="text-3xl text-white" icon="mdi-plus" />
+          </NavItem>
+        </div>
+        <div>
+          <Icon
+            className="text-3xl text-white cursor-pointer"
+            icon="mdi-dots-horizontal"
+          />
+        </div>
+      </div>
+      <div className="w-56 bg-gray-800">
+        {/* Sidebar */}
+        <div className="w-full h-10 hover:bg-white bg-opacity-40">目标</div>
       </div>
-      <div className="w-56 bg-gray-800"></div>
+      <div className="flex-auto bg-gray-700">{/* Main Content */}</div>
-      <div className="flex-auto bg-gray-700"></div>
     </div>
   );
 });

yarn.lock

@@ -42,6 +42,18 @@
   dependencies:
     purgecss "^4.0.3"
 
+"@iconify/iconify@^2.0.2":
+  version "2.0.2"
+  resolved "http://npm.gllue.net/@iconify%2ficonify/-/iconify-2.0.2.tgz#8e8be6c8f20042ab69324bc6db6fc884be98b418"
+  integrity sha1-jovmyPIAQqtpMkvG22/IhL6YtBg=
+  dependencies:
+    cross-fetch "^3.0.6"
+
+"@iconify/react@^3.0.0-alpha.1":
+  version "3.0.0-alpha.1"
+  resolved "http://npm.gllue.net/@iconify%2freact/-/react-3.0.0-alpha.1.tgz#cdb16cf4f651a8e781e3ea363c4a842077baf10f"
+  integrity sha1-zbFs9PZRqOeB4+o2PEqEIHe68Q8=
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "http://npm.gllue.net/@nodelib%2ffs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1111,6 +1123,13 @@ create-require@^1.1.0:
   resolved "http://npm.gllue.net/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha1-wdfo8eX2z8n/ZfnNNS03NIdWwzM=
 
+cross-fetch@^3.0.6:
+  version "3.1.4"
+  resolved "http://npm.gllue.net/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
+  integrity sha1-lyPzo6JHv4uJA586OAqSROj6Lzk=
+  dependencies:
+    node-fetch "2.6.1"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "http://npm.gllue.net/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2861,6 +2880,11 @@ node-emoji@^1.8.1:
   dependencies:
     lodash.toarray "^4.4.0"
 
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "http://npm.gllue.net/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha1-BFvTI2Mfdu0uK1VXM5RBa2OaAFI=
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "http://npm.gllue.net/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"