adding some of sidebar with navigation

packages/web/pages/me.tsx

@@ -1,12 +1,16 @@
-import { Avatar, Dropdown, Menu, Switch } from "antd";
+import { Avatar, Divider, Dropdown, Menu, Switch } from "antd";
 import { useRouter } from "next/router";
 import { useRef } from "react";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import {
+  FaCheck,
   FaHeadphones,
+  FaImages,
   FaLayerGroup,
   FaMicrophoneAlt,
   FaMoon,
+  FaPlus,
+  FaRegClock,
   FaSearch,
   FaUser,
 } from "react-icons/fa";
@@ -16,8 +20,12 @@ import { UserStatus } from "../models/user";
 
 export default function Me() {
   return (
-    <div className="">
+    <div className="flex flex-col">
       <Header />
+
+      <div className="flex-1 flex flex-row items-baseline">
+        <Sidebar />
+      </div>
     </div>
   );
 }
@@ -107,3 +115,52 @@ function Header() {
     </div>
   );
 }
+
+function Sidebar() {
+  return (
+    <div className="flex flex-col justify-start items-start min-w-[20rem]">
+      {/* new button */}
+      <button className="rounded-full flex flex-row items-center px-5 py-2 ml-8 shadow-lg bg-white space-x-2">
+        <FaPlus className="text-teal-600 text-lg" />
+        <span className="text-slate-500 font-semibold">New</span>
+      </button>
+
+      {/* navigation items */}
+      <div className="flex flex-col my-5 space-y-5 w-full">
+        <span className="flex flex-row items-center hover:cursor-pointer transition-all">
+          <span className="w-5 h-5 -translate-x-4 rounded bg-teal-600"></span>
+          <FaLayerGroup className="ml-8 mr-2 text-teal-600 text-lg" />
+          <span className="text-md text-slate-500 font-semibold">Convos</span>
+        </span>
+
+        <span className="flex flex-row items-center hover:cursor-pointer transition-all">
+          <span className="w-5 h-5 -translate-x-4 rounded bg-teal-600 bg-transparent"></span>
+          <FaRegClock className="ml-8 mr-2 text-slate-400 text-lg" />
+          <span className="text-md text-slate-400 font-semibold">Snooze</span>
+        </span>
+
+        <span className="flex flex-row items-center hover:cursor-pointer transition-all">
+          <span className="w-5 h-5 -translate-x-4 rounded bg-teal-600 bg-transparent"></span>
+          <FaCheck className="ml-8 mr-2 text-slate-400 text-lg" />
+          <span className="text-md text-slate-400 font-semibold">Done</span>
+        </span>
+
+        <Divider />
+
+        <span className="flex flex-row items-center hover:cursor-pointer transition-all">
+          <span className="w-5 h-5 -translate-x-4 rounded bg-teal-600 bg-transparent"></span>
+          <FaImages className="ml-8 mr-2 text-slate-400 text-lg" />
+          <span className="text-md text-slate-400 font-semibold">Drawer</span>
+        </span>
+      </div>
+
+      {/* Live Rooms */}
+      <div className="px-5 mt-10">
+        {/* section title */}
+        <span className="text-md tracking-widest font-semibold text-slate-400 uppercase">
+          Live
+        </span>
+      </div>
+    </div>
+  );
+}