Skip to content

Commit b7c3b78

Browse files
rasyidcoderasyidcode
committed
done with menu
1 parent fa49d1b commit b7c3b78

File tree

8 files changed

+274
-59
lines changed

8 files changed

+274
-59
lines changed

‎app/layout.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,8 @@ export default function RootLayout({
1616
}) {
1717
return (
1818
<html lang="en">
19-
<body className={`${inter.className} flex flex-col h-screen overflow-hidden`}>
20-
<div className='absolute w-full h-full z-0 bg-[#DAD7D3]'>
21-
<div className='h-30 bg-[#00A783]'></div>
22-
</div>
23-
<main className='flex-1 flex overflow-hidden p-5 z-50'>
19+
<body className={`${inter.className}`}>
20+
<main>
2421
{children}
2522
</main>
2623
</body>

‎app/page.tsx‎

Lines changed: 23 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,35 @@
1+
import AppHeader from "@/components/AppHeader";
2+
import ChatCategories from "@/components/ChatCategories";
13
import ChatHeader from "@/components/ChatHeader";
24
import ChatInput from "@/components/ChatInput";
3-
import ChatItem from "@/components/ChatItem";
5+
import ChatList from "@/components/ChatList";
46
import ChatPanel from "@/components/ChatPanel";
5-
import { ChatBubbleLeftIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
6-
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
7-
import Image from "next/image";
7+
import ChatSearch from "@/components/ChatSearch";
8+
import Menu from "@/components/Menu";
9+
810

911
export default function Page() {
1012
return (
11-
<div className="flex-1 flex overflow-hidden shadow-xl">
12-
<div className="bg-[#F0F2F5] w-15">
13-
Icons
13+
<div className="flex flex-col h-screen overflow-hidden">
14+
<div className='absolute w-full h-full z-0 bg-[#DAD7D3]'>
15+
<div className='h-30 bg-[#00A783]'></div>
1416
</div>
15-
<div className="bg-white w-md border flex flex-col">
16-
<header className="flex items-center p-4 justify-between">
17-
<h1 className="font-bold tracking-wide text-xl text-slate-800">Chats</h1>
18-
<div className="flex gap-6">
19-
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
20-
transition-all duration-150 ease-in-out">
21-
<ChatBubbleLeftIcon className="size-6 text-gray-700" />
22-
</button>
23-
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
24-
transition-all duration-150 ease-in-out">
25-
<EllipsisVerticalIcon className="size-6 text-gray-700" />
26-
</button>
17+
<div className='flex-1 flex overflow-hidden p-5 z-50'>
18+
<div className="flex-1 flex overflow-hidden shadow-xl">
19+
<Menu />
20+
<div className="bg-white w-md border flex flex-col">
21+
<AppHeader />
22+
<ChatSearch />
23+
<ChatCategories />
24+
<ChatList />
25+
<div>Get WhyApp for Windows</div>
26+
</div>
27+
<div className="flex-1 flex flex-col overflow-hidden relative">
28+
<ChatHeader />
29+
<ChatPanel />
30+
<ChatInput />
2731
</div>
28-
</header>
29-
<div className="flex bg-[#F0F2F5] px-4 py-2 gap-8 rounded-lg mt-2 mx-4">
30-
<button className="cursor-pointer">
31-
<MagnifyingGlassIcon className="size-4 text-gray-700" />
32-
</button>
33-
<input placeholder="Search" className="flex-1 text-sm outline-0" />
34-
</div>
35-
<div className="flex items-center gap-4 mt-2 px-4">
36-
<button className="bg-[#E7FCE3] text-[#00808D] px-2 py-1 rounded-2xl cursor-pointer
37-
text-sm font-light">All</button>
38-
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
39-
font-light hover:brightness-95 transition-all duration-150 ease-linear">Unread</button>
40-
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
41-
font-light hover:brightness-95 transition-all duration-150 ease-linear">Favorites</button>
42-
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
43-
font-light hover:brightness-95 transition-all duration-150 ease-linear">Groups</button>
44-
</div>
45-
{/* Chat List */}
46-
<div className="flex-1 mt-2 overflow-y-scroll scrollbar">
47-
<ChatItem />
48-
<ChatItem />
49-
<ChatItem />
50-
<ChatItem />
51-
<ChatItem />
52-
<ChatItem />
53-
<ChatItem />
54-
<ChatItem />
55-
<ChatItem />
56-
<ChatItem />
5732
</div>
58-
<div>Get WhyApp for Windows</div>
59-
</div>
60-
<div className="flex-1 flex flex-col overflow-hidden relative">
61-
<ChatHeader />
62-
<ChatPanel />
63-
<ChatInput />
6433
</div>
6534
</div>
6635
)

‎app/try-tooltip/page.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
export default function TryTooltipPage() {
2+
return (
3+
<div className="flex-1 flex flex-col justify-center items-center gap-10 bg-blue-200">
4+
<div className="relative group inline-block">
5+
<button className="px-4 py-2 bg-blue-600 text-white rounded-md">
6+
Hover me
7+
</button>
8+
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden
9+
group-hover:block bg-gray-800 text-white text-sm rounded-md px-2 py-1
10+
whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all
11+
duration-200 ease-linear transition-discrete">
12+
Tooltip text
13+
</div>
14+
</div>
15+
<div className="relative group flex items-center">
16+
<button className="px-4 py-2 bg-sky-600 text-white rounded-md">
17+
Amazing
18+
</button>
19+
<div className="absolute left-7/6
20+
bg-gray-800 text-white text-sm rounded-full px-2 py-1 whitespace-nowrap
21+
transform scale-75 opacity-0 transition-all duration-300
22+
group-hover:scale-100 group-hover:opacity-100">
23+
Hello World World
24+
</div>
25+
</div>
26+
<div className="relative group bg-green-600 flex items-center">
27+
<button className="px-4 py-2 text-white rounded-md">
28+
Hover me
29+
</button>
30+
<div className="absolute -right-25 px-2 py-1 hidden
31+
group-hover:block bg-gray-800 text-white text-sm rounded-full
32+
whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all
33+
duration-200 ease-linear transition-discrete">
34+
Tooltip text
35+
</div>
36+
</div>
37+
<div className="relative group flex items-center">
38+
<button className="px-4 py-2 bg-amber-600 text-white rounded-md">
39+
Hover me
40+
</button>
41+
<div className="absolute -right-25 px-2 py-1 hidden
42+
group-hover:block bg-gray-800 text-white text-sm rounded-full
43+
whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all
44+
duration-200 ease-linear transition-discrete">
45+
Tooltip text
46+
</div>
47+
</div>
48+
<div className="relative group flex items-center">
49+
<button className="px-4 py-2 bg-emerald-600 text-white rounded-md">
50+
Hover me
51+
</button>
52+
<div className="absolute -right-25 px-2 py-1 hidden
53+
group-hover:block bg-gray-800 text-white text-sm rounded-full
54+
whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all
55+
duration-200 ease-linear transition-discrete">
56+
Tooltip text
57+
</div>
58+
</div>
59+
<div className="relative group inline-block">
60+
<button className="px-4 py-2 bg-blue-600 text-white rounded-md">
61+
With Scale
62+
</button>
63+
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-sm rounded-md px-2 py-1 whitespace-nowrap
64+
transform scale-75 group-hover:scale-100 transition-all duration-150 opacity-0 group-hover:opacity-100
65+
transition-normal ease-linear">
66+
Tooltip text
67+
</div>
68+
</div>
69+
<div className="relative group inline-block">
70+
<button className="px-4 py-2 bg-blue-600 text-white rounded-md">
71+
Hover me
72+
</button>
73+
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block bg-gray-800 text-white text-sm rounded-md px-2 py-1 whitespace-nowrap">
74+
Tooltip text
75+
</div>
76+
</div>
77+
<div className="relative group inline-block">
78+
<button className="px-4 py-2 bg-blue-600 text-white rounded-md">
79+
Hover me
80+
</button>
81+
<div className="absolute left-1/2 -translate-x-1/2 bottom-full
82+
mb-2 hidden group-hover:block bg-gray-800 text-white text-sm
83+
rounded-md px-2 py-1 whitespace-nowrap">
84+
Tooltip text
85+
</div>
86+
</div>
87+
<div className="relative group inline-block">
88+
<button className="px-4 py-2 bg-blue-600 text-white rounded-md">
89+
Doesn't work
90+
</button>
91+
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2
92+
bg-gray-800 text-white text-sm rounded-md px-2 py-1 whitespace-nowrap
93+
transform scale-75 opacity-0 transition-all duration-300
94+
group-hover:scale-100 group-hover:opacity-100">
95+
Tooltip text
96+
</div>
97+
</div>
98+
99+
</div>
100+
101+
)
102+
}

‎components/AppHeader.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
2+
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
3+
4+
export default function AppHeader() {
5+
return (
6+
<header className="flex items-center p-4 justify-between">
7+
<h1 className="font-bold tracking-wide text-xl text-slate-800">Chats</h1>
8+
<div className="flex gap-6">
9+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
10+
transition-all duration-150 ease-in-out">
11+
<ChatBubbleLeftIcon className="size-6 text-gray-700" />
12+
</button>
13+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
14+
transition-all duration-150 ease-in-out">
15+
<EllipsisVerticalIcon className="size-6 text-gray-700" />
16+
</button>
17+
</div>
18+
</header>
19+
)
20+
}

‎components/ChatCategories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default function ChatCategories() {
2+
return (
3+
<div className="flex items-center gap-4 mt-2 px-4">
4+
<button className="bg-[#E7FCE3] text-[#00808D] px-2 py-1 rounded-2xl cursor-pointer
5+
text-sm font-light">All</button>
6+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
7+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Unread</button>
8+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
9+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Favorites</button>
10+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
11+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Groups</button>
12+
</div>
13+
)
14+
}

‎components/ChatList.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import ChatItem from "./ChatItem";
2+
3+
export default function ChatList() {
4+
return (
5+
<div className="flex-1 mt-2 overflow-y-scroll scrollbar">
6+
<ChatItem />
7+
<ChatItem />
8+
<ChatItem />
9+
<ChatItem />
10+
<ChatItem />
11+
<ChatItem />
12+
<ChatItem />
13+
<ChatItem />
14+
<ChatItem />
15+
<ChatItem />
16+
</div>
17+
)
18+
}

‎components/ChatSearch.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
2+
3+
export default function ChatSearch() {
4+
return (
5+
<div className="flex bg-[#F0F2F5] px-4 py-2 gap-8 rounded-lg mt-2 mx-4">
6+
<button className="cursor-pointer">
7+
<MagnifyingGlassIcon className="size-4 text-gray-700" />
8+
</button>
9+
<input placeholder="Search" className="flex-1 text-sm outline-0" />
10+
</div>
11+
)
12+
}

‎components/Menu.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { ChatBubbleOvalLeftEllipsisIcon, Cog6ToothIcon, RssIcon, StopCircleIcon, UserGroupIcon } from "@heroicons/react/24/outline";
2+
import { ChatBubbleLeftIcon } from "@heroicons/react/24/solid";
3+
import DefaultUserImage from "@/components/DefaultUserImage";
4+
5+
export default function Menu() {
6+
return (
7+
<div className="bg-[#F0F2F5] w-15 flex flex-col justify-between py-2">
8+
<div className="flex flex-col gap-4 items-center">
9+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
10+
group flex items-center">
11+
<ChatBubbleLeftIcon className="size-6 text-slate-700" />
12+
<div className="absolute left-7/6 bg-gray-800 text-white
13+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
14+
opacity-0 transition-all duration-300 group-hover:scale-100
15+
group-hover:opacity-100">
16+
Chats
17+
</div>
18+
</a>
19+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
20+
group flex items-center">
21+
<RssIcon className="size-6 text-slate-700" />
22+
<div className="absolute left-7/6 bg-gray-800 text-white
23+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
24+
opacity-0 transition-all duration-300 group-hover:scale-100
25+
group-hover:opacity-100">
26+
Status
27+
</div>
28+
</a>
29+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
30+
group flex items-center">
31+
<ChatBubbleOvalLeftEllipsisIcon className="size-6 text-slate-700" />
32+
<div className="absolute left-7/6 bg-gray-800 text-white
33+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
34+
opacity-0 transition-all duration-300 group-hover:scale-100
35+
group-hover:opacity-100">
36+
Channels
37+
</div>
38+
</a>
39+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
40+
group flex items-center">
41+
<UserGroupIcon className="size-6 text-slate-700" />
42+
<div className="absolute left-7/6 bg-gray-800 text-white
43+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
44+
opacity-0 transition-all duration-300 group-hover:scale-100
45+
group-hover:opacity-100">
46+
Communities
47+
</div>
48+
</a>
49+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
50+
group flex items-center">
51+
<StopCircleIcon className="size-6 text-sky-500" />
52+
<div className="absolute left-7/6 bg-gray-800 text-white
53+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
54+
opacity-0 transition-all duration-300 group-hover:scale-100
55+
group-hover:opacity-100">
56+
Mata AI
57+
</div>
58+
</a>
59+
</div>
60+
<div className="flex flex-col gap-4 items-center">
61+
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
62+
group flex items-center">
63+
<Cog6ToothIcon className="size-6 text-slate-700" />
64+
<div className="absolute left-7/6 bg-gray-800 text-white
65+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
66+
opacity-0 transition-all duration-300 group-hover:scale-100
67+
group-hover:opacity-100">
68+
Settings
69+
</div>
70+
</a>
71+
<a href="#" className="p-2 relative group flex items-center">
72+
<DefaultUserImage size={32} />
73+
<div className="absolute left-7/6 bg-gray-800 text-white
74+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
75+
opacity-0 transition-all duration-300 group-hover:scale-100
76+
group-hover:opacity-100">
77+
Profile
78+
</div>
79+
</a>
80+
</div>
81+
</div>
82+
)
83+
}

0 commit comments

Comments
 (0)