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

frontend/src/components/Layout.tsx

@@ -7,37 +7,43 @@ 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>
-				{!user.username ? (
-					<div>
-						<NavLink className="text-gray-700 hover:text-gray-900" to={'register'}>
-							Register
-						</NavLink>
-					</div>
-				) : (
-					<div className="flex items-center">
-						<p className="text-gray-700 mr-4">
-							<span className="text-indigo-600">{user.username}</span>
-						</p>
-						<NavLink className={'mx-4'} to={'/'}>
-							Add new Post
-						</NavLink>
-						<NavLink
-							onClick={() => {
-								window.sessionStorage.setItem('token', '');
-								dispatch(setInitialUser());
-							}}
-							to={'/'}
-							className="text-gray-700 hover:text-gray-900">
-							Log out
-						</NavLink>
-					</div>
-				)}
+		<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'}>
+								Register
+							</NavLink>
+						</div>
+					) : (
+						<div className="flex   flex-col">
+							<p className="text-gray-700 mb-4">
+								Hello
+								<span className="text-indigo-600"> {user.username}!</span>
+							</p>
+							<NavLink to={'/'} className=" mb-4">Add new Post
+							</NavLink>
+							<NavLink
+								onClick={() => {
+									window.sessionStorage.setItem('token', '');
+									dispatch(setInitialUser());
+								}}
+								to={'/'}
+								className="text-gray-700 hover:text-gray-900"
+							>
+								Log out
+							</NavLink>
+						</div>
+					)}
+				</div>
+
 			</div>
-			<div className="container mx-auto py-8">
-				<Outlet />
+			<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}/>