Skip to content

Commit 7a2d6fd

Browse files
Merge pull request #15 from AliNikseresht/dev
add new route and fix some bug in login and register and add new type…
2 parents dc578b4 + 8b5b599 commit 7a2d6fd

File tree

13 files changed

+148
-25
lines changed

13 files changed

+148
-25
lines changed

src/App.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { BrowserRouter, Route, Routes } from "react-router-dom";
22
import Layout from "./layout/Layout";
33
import Home from "./pages/Home/Home";
4-
import { mainRoutes } from "./routes/router";
4+
import { mainRoutes, privateMainRoutes } from "./routes/router";
5+
import PrivateRoutes from "./utils/PrivateRoutes";
56

67
function App() {
78
return (
@@ -13,6 +14,15 @@ function App() {
1314
<Route key={route.path} path={route.path} element={route.element} />
1415
))}
1516
</Route>
17+
<Route element={<PrivateRoutes />}>
18+
{privateMainRoutes.map((routeItem) => (
19+
<Route
20+
key={routeItem.path}
21+
path={routeItem.path}
22+
element={routeItem.element}
23+
/>
24+
))}
25+
</Route>
1626
</Routes>
1727
</BrowserRouter>
1828
);

src/data/home.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { THomedata } from "../types/home";
2+
3+
export const homeData: THomedata = {
4+
title: "Latest",
5+
NoBlogText: "There is no blog.",
6+
VPNText: "Please ensure your VPN is enabled and try again.",
7+
};

src/layout/Layout.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1-
import { Outlet } from "react-router-dom";
1+
import { Outlet, useLocation } from "react-router-dom";
22
import Sidebar from "./Sidebar";
33
import MenuMobile from "./Sidebar/MenuMobile";
44
import Footer from "./Footer";
55

66
const Layout = () => {
7+
const location = useLocation();
8+
9+
const isAuthRoute =
10+
location.pathname === "/login" || location.pathname === "/register";
11+
712
return (
8-
<div className="flex h-screen">
9-
<Sidebar />
10-
<div className="flex flex-col w-full p-4">
11-
<div className="flex-1 h-full overflow-auto">
12-
<Outlet />
13+
<div className="relative text-sm font-normal">
14+
<div>
15+
{!isAuthRoute && <Sidebar />}
16+
<div
17+
className={`transition-all w-[calc(100vw_-_140px)] ${
18+
isAuthRoute ? "" : "ms-auto"
19+
}`}
20+
>
21+
<div className="min-h-screen relative">
22+
<Outlet />
23+
</div>
24+
{!isAuthRoute && <Footer />}
25+
{!isAuthRoute && <MenuMobile />}
1326
</div>
14-
<Footer />
15-
<MenuMobile />
1627
</div>
1728
</div>
1829
);

src/layout/Sidebar.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ const Sidebar = () => {
4242
}
4343

4444
return (
45-
<>
46-
<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">
45+
<div className="sidebar fixed start-0 top-0 w-[240px] z-50 transition-all">
46+
<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">
4747
<div className="flex flex-col items-center justify-between h-full">
4848
<Link to={layoutData.sidebar.link}>
4949
<h1 className="text-2xl font-semibold font-mono">
@@ -79,9 +79,9 @@ const Sidebar = () => {
7979
<div
8080
ref={menuRef}
8181
className={`absolute bottom-16 left-0 rounded-e-md p-3
82-
transform transition-transform duration-500 ease-in-out z-10 ${
82+
transform transition-transform duration-500 ease-in-out -z-10 ${
8383
showUserMenu
84-
? "translate-x-[7.03em] opacity-100"
84+
? "translate-x-[8.3em] opacity-100"
8585
: "-translate-x-full opacity-100"
8686
}`}
8787
>
@@ -100,7 +100,7 @@ const Sidebar = () => {
100100
</Link>
101101
))}
102102
</div>
103-
</>
103+
</div>
104104
);
105105
};
106106

src/pages/Blogs/CreateBlog.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const CreateBlog = () => {
3+
return (
4+
<div>CreateBlog</div>
5+
)
6+
}
7+
8+
export default CreateBlog

src/pages/Blogs/EditBlog.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const EditBlog = () => {
3+
return (
4+
<div>EditBlog</div>
5+
)
6+
}
7+
8+
export default EditBlog

src/pages/Blogs/ViewBlog.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const ViewBlog = () => {
3+
return (
4+
<div>ViewBlog</div>
5+
)
6+
}
7+
8+
export default ViewBlog

src/pages/Home/Home.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { useEffect, useState } from "react";
22
import { collection, getDocs } from "firebase/firestore";
33
import { db } from "../../config/firebaseConfig";
4+
import { IoMdInformationCircleOutline } from "react-icons/io";
5+
import { homeData } from "../../data/home";
46

57
interface Blog {
68
id: string;
@@ -46,13 +48,23 @@ const Home = () => {
4648
}
4749

4850
return (
49-
<div className="flex flex-col p-[0em] md:p-[3em] gap-[2em]">
51+
<div className="flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen">
5052
<div className="flex flex-col items-center md:w-10">
5153
<div className="w-4 h-0.5 bc-green"></div>
52-
<h1>Latest</h1>
54+
<h1>{homeData.title}</h1>
5355
</div>
5456
{blogs.length === 0 ? (
55-
<p className="text-center text-lg font-medium">There is no blog.</p>
57+
<div className="flex justify-center flex-col items-center mt-[16em]">
58+
<p className="text-center text-lg font-medium">
59+
{homeData.NoBlogText}
60+
</p>
61+
<div className="flex items-center text-lg gap-0.5 c-green">
62+
<IoMdInformationCircleOutline />
63+
<span className="text-sm mb-[0.11em] c-white">
64+
{homeData.VPNText}
65+
</span>
66+
</div>
67+
</div>
5668
) : (
5769
blogs.map((blog) => (
5870
<div key={blog.id} className="flex items-start md:h-[13rem] mb-4">
@@ -66,7 +78,7 @@ const Home = () => {
6678
}
6779
)}
6880
</p>
69-
<p className="-rotate-90 absolute -left-6 bottom-5 text-xs w-36 text-center c-gray">
81+
<p className="-rotate-90 absolute -left-[2.05em] bottom-5 text-xs w-36 text-right c-gray">
7082
{blog.author}
7183
</p>
7284
</div>
@@ -82,13 +94,11 @@ const Home = () => {
8294
{
8395
day: "numeric",
8496
month: "short",
85-
year:"numeric"
97+
year: "numeric",
8698
}
8799
)}
88100
</p>
89-
<p className="text-center text-sm c-gray">
90-
{blog.author}
91-
</p>
101+
<p className="text-center text-sm c-gray">{blog.author}</p>
92102
</div>
93103
<div className="flex flex-wrap gap-2">
94104
{blog.tags.map((tagItem, index) => (

src/pages/Profile/UserProfile.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
const UserProfile = () => {
3+
return (
4+
<div>UserProfile</div>
5+
)
6+
}
7+
8+
export default UserProfile

src/pages/auth/_components/AuthForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const AuthForm = ({ auth_data, submitFunction, loading }: Props) => {
2020

2121
return (
2222
<div className="w-full flex items-center justify-center md:justify-between">
23-
<div className="w-[33%] h-[630px] hidden md:flex relative">
23+
<div className="w-[33%] h-screen hidden md:flex relative">
2424
<img
2525
src={SidePhoto}
2626
alt="side background"

0 commit comments

Comments
 (0)