мелкие изменения

frontend/src/components/Layout.tsx

@@ -7,9 +7,10 @@ const Layout: FunctionComponent = (): ReactElement => {
 	const { user } = useAppSelector((state) => state.user);
 	const dispatch = useAppDispatch();
 	return (
-		<div className="bg-gray-100">
-			<div className="container mx-auto flex justify-between items-center py-4">
-				<p className="text-lg font-medium">Forum</p>
+		<div className="bg-gray-100 flex">
+			<div className="w-1/6">
+				<div className="container mx-auto 	 py-4">
+					<p className="text-lg font-medium mb-8">Forum</p>
 					{!user.username ? (
 						<div>
 							<NavLink className="text-gray-700 hover:text-gray-900" to={'register'}>
@@ -17,12 +18,12 @@ const Layout: FunctionComponent = (): ReactElement => {
 							</NavLink>
 						</div>
 					) : (
-					<div className="flex items-center">
-						<p className="text-gray-700 mr-4">
-							<span className="text-indigo-600">{user.username}</span>
+						<div className="flex   flex-col">
+							<p className="text-gray-700 mb-4">
+								Hello
+								<span className="text-indigo-600"> {user.username}!</span>
 							</p>
-						<NavLink className={'mx-4'} to={'/'}>
-							Add new Post
+							<NavLink to={'/'} className=" mb-4">Add new Post
 							</NavLink>
 							<NavLink
 								onClick={() => {
@@ -30,16 +31,21 @@ const Layout: FunctionComponent = (): ReactElement => {
 									dispatch(setInitialUser());
 								}}
 								to={'/'}
-							className="text-gray-700 hover:text-gray-900">
+								className="text-gray-700 hover:text-gray-900"
+							>
 								Log out
 							</NavLink>
 						</div>
 					)}
 				</div>
+
+			</div>
+			<div className="w-3/4">
 				<div className="container mx-auto py-8">
 					<Outlet />
 				</div>
 			</div>
+		</div>
 	);
 };
 

frontend/src/containers/HomePage.tsx

@@ -11,17 +11,20 @@ const HomePage: FunctionComponent = (): ReactElement => {
 	
 	const dispatch = useAppDispatch();
 	const {posts} = useSelector((state: AppState) => state.posts, shallowEqual)
+	const { user } = useSelector((state: AppState) => state.user,shallowEqual);
 
 	useEffect(() => {
 		const token = window.sessionStorage.getItem('token');
 		if (token) {
 			dispatch(getUser(token));
+			dispatch(getPosts())
+		}
+	},[]);
+
+	if (!user) {
+		return <div>Loading...</div>; 
 	  }
-	});
 
-	useEffect(() => {
-        dispatch(getPosts())
-    }, [])
 	return (
 		<div className="bg-gray-50 dark:bg-gray-900 h-screen w-full container mx-auto">
 			<PostsList posts={posts}/>