Skip to content

Commit a6723e0

Browse files
AliNiksereshtAliNikseresht
authored
Merge pull request #23 from AliNikseresht/dev
add mobile menu and change some code in many component
2 parents 25a1415 + d9cca33 commit a6723e0

File tree

11 files changed

+135
-52
lines changed

11 files changed

+135
-52
lines changed

‎src/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
body {
1212
background: #272727;
1313
color: #ffffff;
14+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
1415
}
1516

1617
.bc-black {

‎src/layout/Footer.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import { layoutData } from "../data/layout";
22

33
const Footer = () => {
44
return (
5-
<div className="flex flex-col w-full items-center py-2 text-sm gap-1 md:gap-0 justify-center">
5+
<div className="flex flex-col w-full items-center py-2 text-sm gap-1 md:gap-0 justify-center mb-10 md:mb-0">
66
<p>{layoutData.footer.title}</p>
7-
<p className="text-center text-xs md:text-sm">{layoutData.footer.subTitle}</p>
7+
<p className="text-center text-xs md:text-sm">
8+
{layoutData.footer.subTitle}
9+
</p>
810
</div>
911
);
1012
};

‎src/layout/Sidebar.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,19 @@ import { useAuth } from "../hooks/AuthContext";
77
import { toast } from "react-toastify";
88

99
const Sidebar = () => {
10+
//state
1011
const [showUserMenu, setShowUserMenu] = useState(false);
12+
const MAX_AUTHOR_LENGTH = 11;
13+
14+
//hooks
1115
const menuRef = useRef<HTMLDivElement | null>(null);
1216
const location = useLocation();
1317
const navigate = useNavigate();
1418
const { user } = useAuth();
15-
const MAX_AUTHOR_LENGTH = 11;
1619
const hideSidebarPaths = ["/login", "/register"];
1720
const shouldHideSidebar = hideSidebarPaths.includes(location.pathname);
1821

22+
//handler
1923
const handleUserIconClick = () => {
2024
if (user) {
2125
navigate("/");
@@ -62,7 +66,7 @@ const Sidebar = () => {
6266
<div className="w-[7.5rem] border-r border-green hidden md:flex flex-col items-center justify-between py-[6.5em] z-20 bc-black h-screen">
6367
<div className="flex flex-col items-center justify-between h-full">
6468
<Link to={layoutData.sidebar.link}>
65-
<h1 className="text-2xl font-semibold font-mono">
69+
<h1 className="text-3xl font-semibold">
6670
{layoutData.sidebar.title}
6771
</h1>
6872
</Link>

‎src/layout/Sidebar/MenuMobile.tsx‎

Lines changed: 104 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,111 @@
1-
import { FiSearch } from "react-icons/fi";
2-
import { IoAddCircleOutline } from "react-icons/io5";
3-
import { FiTrendingUp } from "react-icons/fi";
1+
import { Link, useNavigate } from "react-router-dom";
2+
import { layoutData } from "../../data/layout";
3+
import { FaRegUser } from "react-icons/fa6";
4+
import { useAuth } from "../../hooks/AuthContext";
5+
import { useRef, useState } from "react";
6+
import { toast } from "react-toastify";
7+
import { BiHome } from "react-icons/bi";
48

59
const MenuMobile = () => {
10+
//state
11+
const [showUserMenu, setShowUserMenu] = useState(false);
12+
13+
//hooks
14+
const navigate = useNavigate();
15+
const { user } = useAuth();
16+
const menuRef = useRef<HTMLDivElement | null>(null);
17+
18+
//handler
19+
const handleCloseMenu = () => {
20+
setShowUserMenu(false);
21+
};
22+
23+
const handleUserIconClick = () => {
24+
if (user) {
25+
navigate("/");
26+
} else {
27+
setShowUserMenu((prev) => !prev);
28+
}
29+
};
30+
31+
const handleCreateClick = () => {
32+
if (!user) {
33+
toast.error("You must create an account to create a blog!");
34+
} else {
35+
navigate("/create");
36+
}
37+
};
38+
639
return (
7-
<div className="border border-[#6EEB83] flex md:hidden items-center p-[1em]">
8-
<div className="flex items-center justify-between w-full">
9-
<ul className="flex flex-col items-center justify-center">
10-
<li className="w-9 h-9 md:w-16 md:h-16 flex items-center justify-center text-[#212121] text-2xl rounded-full bg-[#6EEB83]">
11-
S
12-
</li>
13-
</ul>
14-
<ul className="flex flex-col items-center justify-center">
15-
<li className="text-[#6EEB83] text-4xl cursor-pointer">
16-
<FiSearch />
17-
</li>
18-
</ul>
19-
<ul className="flex flex-col items-center justify-center">
20-
<li className="text-[#6EEB83] text-4xl cursor-pointer">
21-
<FiTrendingUp />
22-
</li>
23-
</ul>
24-
<ul className="flex flex-col items-center justify-center">
25-
<li className="text-[#6EEB83] text-4xl cursor-pointer">
26-
<IoAddCircleOutline />
27-
</li>
28-
</ul>
40+
<div className="fixed bottom-0 w-full left-0 border border-[#6EEB83] flex md:hidden items-center">
41+
<div className="w-full flex items-center justify-between p-3 z-20 bc-black">
42+
<div className="flex items-center justify-between h-full w-full">
43+
<Link to={layoutData.sidebar.link}>
44+
<h1 className="text-2xl font-semibold c-green">
45+
<BiHome />
46+
</h1>
47+
</Link>
48+
{layoutData.sidebar.navbar.map((item, index) => (
49+
<ul
50+
key={index}
51+
className="flex flex-col items-center justify-center"
52+
>
53+
{item.title === "Create" ? (
54+
<div
55+
onClick={handleCreateClick}
56+
className="flex flex-col items-center"
57+
>
58+
<li className="c-green text-2xl cursor-pointer">
59+
{item.icon}
60+
</li>
61+
</div>
62+
) : (
63+
<Link to={item.link} className="flex flex-col items-center">
64+
<li className="c-green text-2xl cursor-pointer">
65+
{item.icon}
66+
</li>
67+
</Link>
68+
)}
69+
</ul>
70+
))}
71+
72+
<ul className="flex flex-col items-center justify-center">
73+
<li
74+
onClick={handleUserIconClick}
75+
className="w-8 h-8 flex items-center justify-center c-black text-base rounded-full bc-green cursor-pointer relative"
76+
>
77+
<FaRegUser />
78+
</li>
79+
</ul>
80+
</div>
2981
</div>
82+
83+
{!user && (
84+
<div
85+
ref={menuRef}
86+
className={`absolute bottom-0 -right-3 rounded-e-md p-3
87+
transform transition-transform duration-500 ease-in-out -z-10 ${
88+
showUserMenu
89+
? "-translate-y-[3.2em] opacity-100"
90+
: "translate-y-52 opacity-100"
91+
}`}
92+
>
93+
{layoutData.sidebar.auth.map((item, index) => (
94+
<Link
95+
key={index}
96+
to={item.link}
97+
onClick={handleCloseMenu}
98+
className={`block w-full py-2 px-4 text-center mb-2 rounded-md ${
99+
item.title === "Register"
100+
? "c-black bc-green"
101+
: "c-green border border-green bc-black"
102+
}`}
103+
>
104+
{item.title}
105+
</Link>
106+
))}
107+
</div>
108+
)}
30109
</div>
31110
);
32111
};

‎src/pages/Blogs/CreateBlog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const CreateBlog = () => {
2121
};
2222

2323
return (
24-
<div className="grid grid-cols-2 gap-8 p-8 h-screen">
24+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-4 md:p-8 min-h-screen">
2525
{/* Blog Form */}
2626
<BlogForm
2727
title={title}

‎src/pages/Blogs/EditBlog.tsx‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/pages/Blogs/ViewBlog.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ import { blogByIdService } from "../../services/blogByIdService";
66
import formatDate from "../../utils/formatDate";
77

88
const ViewBlog = () => {
9-
const navigate = useNavigate();
10-
const { id } = useParams<{ id: string }>();
9+
//state
1110
const [blog, setBlog] = useState<TBlog | null>(null);
1211
const [loading, setLoading] = useState<boolean>(true);
1312

13+
//hooks
14+
const navigate = useNavigate();
15+
const { id } = useParams<{ id: string }>();
16+
17+
//services
1418
useEffect(() => {
1519
const loadBlog = async () => {
1620
try {
@@ -28,6 +32,7 @@ const ViewBlog = () => {
2832
loadBlog();
2933
}, [id]);
3034

35+
//loading
3136
if (loading) {
3237
return <Loading />;
3338
}

‎src/pages/Home/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const Home = () => {
3434
<div className="flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen">
3535
<div className="flex flex-col items-center md:w-10">
3636
<div className="w-4 h-0.5 bc-green"></div>
37-
<h1>{homeData.title}</h1>
37+
<h1 className="text-lg md:text-base">{homeData.title}</h1>
3838
</div>
3939
{blogs.length === 0 ? (
4040
<EmptyState />

‎src/pages/Home/_components/BlogCard.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const BlogCard = ({ blog }: { blog: TBlog }) => {
99
return (
1010
<div key={blog.id} className="flex items-start lg:h-[13rem] mb-4">
1111
<div className="hidden md:flex flex-col items-start justify-between relative h-44">
12-
<p className="text-left text-3xl uppercase font-semibold w-20">
12+
<p className="text-left text-3xl uppercase font-semibold w-20 font-sans">
1313
{formatDate(blog.createdAt.seconds)}
1414
</p>
1515
<p className="-rotate-90 absolute -left-[2.05em] bottom-5 text-xs w-36 text-right c-green">
@@ -19,29 +19,29 @@ const BlogCard = ({ blog }: { blog: TBlog }) => {
1919
</p>
2020
</div>
2121
<div className="flex flex-col justify-between h-full w-full">
22-
<h2 className="c-green md:text-4xl font-semibold">{blog.title}</h2>
23-
<p className="text-xs md:text-sm my-3">
22+
<h2 className="c-green text-xl md:text-4xl font-semibold">{blog.title}</h2>
23+
<p className="text-xs md:text-sm my-3 font-sans">
2424
{blog.content.length > MAX_CONTENT_LENGTH
2525
? `${blog.content.slice(0, MAX_CONTENT_LENGTH)}...`
2626
: blog.content}
2727
<Link
2828
to={`/blog/${blog.id}`}
29-
className="self-start text-sm c-green hover:underline ml-1"
29+
className="self-start text-xs md:text-sm c-green hover:underline ml-1"
3030
>
3131
Read More →
3232
</Link>
3333
</p>
3434
<div className="flex md:hidden items-center justify-between mb-3">
35-
<p className="text-left text-sm uppercase font-semibold ">
35+
<p className="text-left text-sm uppercase font-semibold font-sans">
3636
{formatDate(blog.createdAt.seconds)}
3737
</p>
38-
<p className="text-center text-sm c-white">{blog.author}</p>
38+
<p className="text-center text-sm c-white font-sans">{blog.author}</p>
3939
</div>
4040
<div className="flex flex-wrap gap-2">
4141
{blog.tags.map((tagItem, index) => (
4242
<span
4343
key={index}
44-
className="border border-green px-2 py-1 text-xs rounded-full c-green"
44+
className="border border-green px-2 py-1 text-xs rounded-full c-green font-sans"
4545
>
4646
#{tagItem}
4747
</span>

‎src/pages/Trend/_components/TrendingBlogs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ const TrendingBlogs: React.FC<TrendingBlogsProps> = ({
2121

2222
return (
2323
<div className="flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen">
24-
<div className="flex flex-col items-center md:w-[5.8rem]">
25-
<div className="w-16 h-0.5 bc-green"></div>
26-
<h1>{trendData.title}</h1>
24+
<div className="flex flex-col items-center md:w-[7rem]">
25+
<div className="w-20 mb-0.5 h-0.5 bc-green"></div>
26+
<h1 className="text-lg md:text-base">{trendData.title}</h1>
2727
</div>
2828
{blogs.length === 0 ? (
2929
<EmptyState />

0 commit comments

Comments
 (0)