make navbar fixed and sidebars sticky and dispaly create post compone…

…nt on mobile
fartoot · Dec 16, 2024 · 11ba2e2 · 11ba2e2
1 parent 333778b
commit 11ba2e2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/frontend/src/components/CreatePostCard.jsx b/frontend/src/components/CreatePostCard.jsx
@@ -9,7 +9,7 @@ const formSchema = z.object({
   content: z.string().min(1).max(200),
 });
 
-function CreatePostCard({refresh, setRefresh}) {
+function CreatePostCard({className, refresh, setRefresh}) {
   const { accessToken } = useContext(AuthContext)
   const {
      register,
@@ -47,8 +47,8 @@ function CreatePostCard({refresh, setRefresh}) {
     <>
       <form 
         onSubmit={handleSubmit(onSubmit)}
+        className={`${className} bg-gray-100 rounded-3xl p-6 space-y-3 mx-auto`}
       >
-      <div className="w-96 bg-gray-100 rounded-3xl p-6 space-y-3 mx-auto">
         <div className="flex justify-between items-center">
           <h2 className="text-left w-full text-gray-800 ms-2">Create Post</h2>
           <button className="bg-gray-300 py-2 px-3 rounded-full text-sm">Publish</button>
@@ -59,7 +59,6 @@ function CreatePostCard({refresh, setRefresh}) {
                     {errors.content.message}
           </div>
         )}
-      </div>
       </form>
     </>
   )

diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
@@ -2,7 +2,7 @@ function Header() {
 
   return (
     <>
-      <div className="text-center p-6 font-medium tracking-wide bg-gray-50 drop-shadow-sm">
+      <div className="text-center p-6 font-medium tracking-wide bg-gray-50 drop-shadow-sm fixed w-full inline-block z-50">
         <p>
         Social Media API
         </p>

diff --git a/frontend/src/components/PostCard.jsx b/frontend/src/components/PostCard.jsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 function PostCard({slug, firstName, lastName, username,  createdAt, content}) {
   return (
     <>
-      <div className="bg-gray-100 rounded-md p-7 w-full md:min-w-96">
+      <div className="bg-gray-100 rounded-md mb-7 p-7 w-full md:min-w-96">
         <div className="flex">
           <div className="bg-gray-300 w-12 h-12 rounded-full me-5"></div>
           <div>

diff --git a/frontend/src/layouts/GuestLayout.jsx b/frontend/src/layouts/GuestLayout.jsx
@@ -6,7 +6,7 @@ function GuestLayout() {
   const [refresh, setRefresh] = useState(false)
   return (
     <>
-      <div className="w-full hidden lg:inline-block space-y-20">
+      <div className="w-full hidden lg:block space-y-20 self-start sticky top-28">
         <ProfileCard fullName="Dani Taylor" username="@danitaylor" bio="Lorem, ipsum dolor sit amet consectetur adipisicing elit dolor..." />
 
         <div className="w-96 bg-gray-100 rounded-3xl p-8 space-y-2 flex flex-col items-center mx-auto">
@@ -28,11 +28,12 @@ function GuestLayout() {
 
         </div>
       </div>
-      <div className="max-w-3xl w-full mx-auto space-y-4">
+      <div className="max-w-3xl w-full mx-auto">
+        <CreatePostCard className="xl:hidden" refresh={refresh} setRefresh={setRefresh}/>
         <Outlet context={{ refresh }} />
       </div>
-      <div className="w-full hidden xl:inline-block space-y-5">
-        <CreatePostCard refresh={refresh} setRefresh={setRefresh}/>
+      <div className="w-full hidden xl:inline-block space-y-5 self-start sticky top-28">
+        <CreatePostCard className="w-96" refresh={refresh} setRefresh={setRefresh}/>
         <div className="w-96 bg-gray-100 rounded-3xl p-8 space-y-3 flex flex-col items-center mx-auto">
           <h2 className="text-left w-full text-gray-800 ms-2 mb-2">Popular Posts</h2>
           {