Skip to content

Commit 9f9455d

Browse files
rasyidcoderasyidcode
committed
add more features and fix menu hover tooltip animation
1 parent 93cf985 commit 9f9455d

File tree

3 files changed

+29
-23
lines changed

3 files changed

+29
-23
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
- [Demo](https://rasyidcode.github.io)
44

5+
## How-to run
6+
7+
```
8+
$ docker run -it --rm -v $PWD:/srv/app -w /srv/app -p 3000:3000 -u node node:22-alpine sh
9+
```
10+
511
## Planning
612

713
### Chats

‎app/page.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ChatList from "@/components/ChatList";
66
import ChatPanel from "@/components/ChatPanel";
77
import ChatSearch from "@/components/ChatSearch";
88
import SideMenu from "@/components/SideMenu";
9+
import { PhoneIcon } from "@heroicons/react/24/outline";
910

1011

1112
export default function Page() {
@@ -17,12 +18,18 @@ export default function Page() {
1718
<div className='flex-1 flex overflow-hidden p-5 z-50'>
1819
<div className="flex-1 flex overflow-hidden shadow-xl">
1920
<SideMenu />
20-
<div className="bg-white w-md border flex flex-col">
21+
<div className="bg-white w-md border flex flex-col relative">
2122
<AppHeader />
2223
<ChatSearch />
2324
<ChatCategories />
2425
<ChatList />
25-
<div>Get WhyApp for Windows</div>
26+
<a href="#" className="absolute bottom-0 bg-white text-center
27+
flex items-center p-2 justify-center gap-4 w-full border-t">
28+
<div className="bg-[#25D366] p-1 rounded-sm">
29+
<PhoneIcon className="size-7 text-white" />
30+
</div>
31+
<h1>Get WhyApp for Windows</h1>
32+
</a>
2633
</div>
2734
<div className="flex-1 flex flex-col overflow-hidden relative">
2835
<div className="w-full h-full absolute bg-[url(./wa-bg.png)] bg-fixed bg-contain

‎components/SideMenu.tsx‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,49 +11,44 @@ export default function SideMenu() {
1111
group flex items-center">
1212
<ChatBubbleLeftIcon className="size-6 text-slate-700" />
1313
<div className="absolute left-7/6 bg-gray-800 text-white
14-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
15-
opacity-0 transition-all duration-300 group-hover:scale-100
16-
group-hover:opacity-100">
14+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
15+
transition-all duration-300 group-hover:scale-100 z-50">
1716
Chats
1817
</div>
1918
</a>
2019
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
2120
group flex items-center">
2221
<RssIcon className="size-6 text-slate-700" />
2322
<div className="absolute left-7/6 bg-gray-800 text-white
24-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
25-
opacity-0 transition-all duration-300 group-hover:scale-100
26-
group-hover:opacity-100">
23+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
24+
transition-all duration-300 group-hover:scale-100 z-50">
2725
Status
2826
</div>
2927
</a>
3028
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
3129
group flex items-center">
3230
<ChatBubbleOvalLeftEllipsisIcon className="size-6 text-slate-700" />
3331
<div className="absolute left-7/6 bg-gray-800 text-white
34-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
35-
opacity-0 transition-all duration-300 group-hover:scale-100
36-
group-hover:opacity-100">
32+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
33+
transition-all duration-300 group-hover:scale-100 z-50">
3734
Channels
3835
</div>
3936
</a>
4037
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
4138
group flex items-center">
4239
<UserGroupIcon className="size-6 text-slate-700" />
4340
<div className="absolute left-7/6 bg-gray-800 text-white
44-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
45-
opacity-0 transition-all duration-300 group-hover:scale-100
46-
group-hover:opacity-100">
41+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
42+
transition-all duration-300 group-hover:scale-100 z-50">
4743
Communities
4844
</div>
4945
</a>
5046
<a href="#" className="p-2 rounded-full active:bg-slate-300/60 relative
5147
group flex items-center">
5248
<StopCircleIcon className="size-6 text-sky-500" />
5349
<div className="absolute left-7/6 bg-gray-800 text-white
54-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
55-
opacity-0 transition-all duration-300 group-hover:scale-100
56-
group-hover:opacity-100">
50+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
51+
transition-all duration-300 group-hover:scale-100 z-50">
5752
Mata AI
5853
</div>
5954
</a>
@@ -63,9 +58,8 @@ export default function SideMenu() {
6358
group flex items-center">
6459
<Cog6ToothIcon className="size-6 text-slate-700" />
6560
<div className="absolute left-7/6 bg-gray-800 text-white
66-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
67-
opacity-0 transition-all duration-300 group-hover:scale-100
68-
group-hover:opacity-100">
61+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
62+
transition-all duration-300 group-hover:scale-100 z-50">
6963
Settings
7064
</div>
7165
</a>
@@ -77,9 +71,8 @@ export default function SideMenu() {
7771
height={30}
7872
className="rounded-full aspect-square object-cover border" />
7973
<div className="absolute left-7/6 bg-gray-800 text-white
80-
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-75
81-
opacity-0 transition-all duration-300 group-hover:scale-100
82-
group-hover:opacity-100">
74+
text-sm rounded-full px-2 py-1 whitespace-nowrap transform scale-0
75+
transition-all duration-300 group-hover:scale-100 z-50">
8376
Profile
8477
</div>
8578
</a>

0 commit comments

Comments
 (0)