talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding some of sidebar with navigation

Browse Source
This commit is contained in:
Arjun Patel
2022-01-29 17:14:46 -08:00
parent cdf37d9ef8
commit 23673aefc7
1 changed files with 59 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/pages/me.tsx
+59 -2
View File
@@ -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>
);
}