Geçici

public/icons/homepage.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z" fill="#000000"/>
+</svg>

src/App.js

@@ -10,6 +10,8 @@ import {FetchPOST} from './middlewares/Fetch';
 import MusikBox from './components/MusikBox';
 import NavRight from './components/NavRight';
 import { I18nProvider } from './middlewares/Locale';
+import { Link } from 'react-router-dom';
+import { GSProvider } from './middlewares/GlobalState';
 const cookie = new Cookies();
 
 export default function App() {
@@ -19,8 +21,9 @@ export default function App() {
   const [selectedMenu, setSelectedMenu] = useState("");
   const [profile, setProfile] = useState("");
   const [auth, setAuth] = useState("");
-  const [rightPage, setRightPage] = useState("null");
+  const [right, setRight] = useState("null");
   const [locale, setLocale] = useState('');
+  const [left, setLeft] = useState('');
 
   const [pageMenusContent, setPageMenusContent] = useState("null"); // Yeni state
 
@@ -55,7 +58,7 @@ export default function App() {
     setPageMenusContent(content);
   };
 
-  const exports = {setRightPage, rightPage};
+  const exports = {setRight, right, left, setLeft, profile};
 
   if(auth === false){
     return (
@@ -76,18 +79,16 @@ export default function App() {
     )
   }else if(auth === true){
     return (
-      <I18nProvider locale={locale} setLocale={setLocale} localeCode={locale}>
-        <div className='flex flex-col h-screen overflow-hidden'>
-          <Header title={title} description={description} backEnd_URL={backEnd_URL} auth={auth}/>
-          <div className='flex flex-col h-screen overflow-hidden p-4'>
-            <div className='flex flex-col h-screen overflow-hidden gap-4'>
-              <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
-                <div className='flex flex-col gap-4'>
-                  <div className='flex bg-white h-full rounded-2xl overflow-hidden'>
-                    <NavLeft selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>
-                  </div>
+      <GSProvider profile={profile} exports={exports}>
+        <I18nProvider locale={locale} setLocale={setLocale} localeCode={locale}>
+          <div className='flex flex-col visible gap-4'>
+              <Header title={title} description={description} backEnd_URL={backEnd_URL} auth={auth}/>
+            <div className='flex'>
+              <div className='flex m-auto justify-center page-container overflow-visible'>
+                <div className='flex flex-col sticky h-5 px-4 top-20 gap-4 w-3/12'>
+                  {left}
                 </div>
-                <div className='flex col-start-2 col-end-5 h-full overflow-y-scroll bg-white rounded-2xl border-8 border-white'>
+                <div className='flex w-5/12 pt-3'>
                   <Pages
                     selectedMenu={selectedMenu}
                     setSelectedMenu={setSelectedMenu}
@@ -98,22 +99,59 @@ export default function App() {
                     locale={locale}
                   />
                 </div>
-                <div id='page-menus' className='flex bg-white h-full rounded-2xl overflow-hidden'>
-                  <NavRight/>
+                <div className='flex flex-col sticky h-5 px-4 top-20 gap-4 w-3/12'>
+                  {right}
                 </div>
-              </div>
-              <div className='grid grid-cols-5 h-16 gap-4'>
-                <div className='flex bg-white rounded-2xl overflow-hidden'>
-                  <ProfileMenuBox selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
-                </div>
-                <div className='flex col-start-2 col-end-5 bg-white rounded-2xl'></div>
-                <div className='flex bg-white rounded-2xl'></div>
+                {/* <div className='flex sticky h-5 top-24 w-1/5'>
+                  <div className='flex overflow-visible'>
+                    <NavLeft selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>
+                  </div>
+                </div> */}
               </div>
             </div>
           </div>
-          <div id='popup' className='hidden absolute w-full h-full items-center justify-center overflow-hidden'></div>
-        </div>
-      </I18nProvider>
+        </I18nProvider>
+      </GSProvider>
     );
+    // return (
+    //   <I18nProvider locale={locale} setLocale={setLocale} localeCode={locale}>
+    //     <div className='flex flex-col h-screen overflow-hidden'>
+    //       <Header title={title} description={description} backEnd_URL={backEnd_URL} auth={auth}/>
+    //       <div className='flex flex-col h-screen overflow-hidden p-4'>
+    //         <div className='flex flex-col h-screen overflow-hidden gap-4'>
+    //           <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
+    //             <div className='flex flex-col gap-4'>
+    //               <div className='flex bg-white h-full rounded-2xl overflow-hidden'>
+    //                 <NavLeft selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>
+    //               </div>
+    //             </div>
+    //             <div className='flex col-start-2 col-end-5 h-full overflow-y-scroll bg-gray-200 rounded-2xl border-8 border-white'>
+    //               <Pages
+    //                 selectedMenu={selectedMenu}
+    //                 setSelectedMenu={setSelectedMenu}
+    //                 profile={profile}
+    //                 auth={auth}
+    //                 setAuth={setAuth}
+    //                 exports={exports}
+    //                 locale={locale}
+    //               />
+    //             </div>
+    //             <div id='page-menus' className='flex bg-white h-full rounded-2xl overflow-hidden'>
+    //               <NavRight/>
+    //             </div>
+    //           </div>
+    //           <div className='grid grid-cols-5 h-16 gap-4'>
+    //             <div className='flex bg-white rounded-2xl overflow-hidden'>
+    //               <ProfileMenuBox selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
+    //             </div>
+    //             <div className='flex col-start-2 col-end-5 bg-white rounded-2xl'></div>
+    //             <div className='flex bg-white rounded-2xl'></div>
+    //           </div>
+    //         </div>
+    //       </div>
+    //       <div id='popup' className='hidden absolute w-full h-full items-center justify-center overflow-hidden'></div>
+    //     </div>
+    //   </I18nProvider>
+    // );
   }
 };

src/components/Categories.jsx

@@ -2,46 +2,37 @@ import React, { useEffect, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { FetchPOST } from '../middlewares/Fetch';
 
-export default function Categories({data, changeMenu, selectedMenu, setSelectedMenu, isChangeMenu = false, pathname}) {
-    const [loading, setLoading] = useState(true);
-    const [cates, setCates] = useState([]);
-    const { cate } = useParams();
-    const [selectedCate, setSelectedCate] = useState(0);
+export default function Categories({cates, selectedMenu, setSelectedMenu, isChangeMenu = false, pathname}) {
+  const [loading, setLoading] = useState(false);
 
-    useEffect(() => {
-        if(!data){
-            FetchPOST({
-                port: 3001,
-                pathname: "/get/blogs/cate/all"
-            })
-            .then(res => setCates(res));
-        };
-        
-        setLoading(false);
-    },[]);
-    
-    if(loading){return (<div></div>)};
-    
     if(isChangeMenu === true && loading === false){
         return (
-          <div className='flex items-center overflow-hidden overflow-x-scroll gap-2'>
-              <Link to={pathname} key={0} onClick={(e) => {changeMenu(0)}} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === 0) && "bg-pc")}>
-              Genel
+          <div className='grid grid-cols-2 w-full gap-2 p-4 rounded-2xl shadow-sm bg-white'>
+              <Link to={pathname} key={0} onClick={() => {setSelectedMenu(0)}} className={'flex h-20 rounded-2xl bg-white items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === 0) && 'bg-pc')}>
+                Genel
               </Link>
               {
+                (cates) &&
+                cates.map(get => 
+                  <Link to={pathname + get.title.toLowerCase()} onClick={() => {setSelectedMenu(get.id)}} key={get.id} className={'flex h-20 rounded-2xl bg-white items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === get.id) && 'bg-pc')}>
+                    {get.title}
+                  </Link>
+                )
+              }
+              {/* {
               (data) ?
                 data.categories.map(get => (
-                    <Link to={pathname + get.title.toLowerCase()} key={get.id} onClick={() => {changeMenu(get.id)}} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === get.id) && "bg-pc")}>
+                    <Link to={pathname + get.title.toLowerCase()} key={get.id} className={'flex h-20 rounded-2xl bg-white items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50'}>
                         {get.title}
                     </Link>
                 ))
               :
                 cates.map(get => (
-                    <Link to={pathname + get.title.toLowerCase()} key={get.id} onClick={() => {changeMenu(get.id)}} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50 ' + ((selectedMenu === get.id) && "bg-pc")}>
+                    <Link to={pathname + get.title.toLowerCase()} key={get.id}  className={'flex h-20 rounded-2xl bg-white items-center justify-center cursor-pointer hover:bg-pc hover:bg-opacity-50'}>
                         {get.title}
                     </Link>
                 ))
-              }
+              } */}
           </div>
         );
     }else if(isChangeMenu === false && loading === false){
@@ -58,4 +49,20 @@ export default function Categories({data, changeMenu, selectedMenu, setSelectedM
           </div>
         );
     };
-};
+};
+
+function changeCategory(id, categoriesIds, setData) {
+    if(id === 0){
+      FetchPOST({
+        port: 3001,
+        pathname: "/get/blogs/all"
+      }).then(res => setData(res));
+    }else if(categoriesIds.includes(id)){
+      FetchPOST({
+        port: 3001,
+        pathname: "/get/blogs/" + id
+      }).then(res => setData(res));
+    }else {
+      setData([])
+    }
+  };

src/components/Header.jsx

@@ -13,13 +13,13 @@ export default function Header(props) {
   };
 
   return (
-    <div className='flex bg-pc shadow-md justify-between p-navbar rounded-b-2xl mx-4'>
+    <nav className='flex z-50 bg-pc sticky top-0 shadow-md justify-between p-navbar rounded-b-2xl mx-4'>
       <div>
           <Link className='font-bold' to={'/'}>{props.title} - {props.description}</Link>
       </div>
       <div>
         <a className='p-2 rounded-lg cursor-pointer hover:bg-white hover:bg-opacity-70 hover:font-bold' onClick={logoutPost}>Çıkış Yap</a>
       </div>
-    </div>
+    </nav>
   );
 };

src/components/NavLeft.jsx

@@ -6,12 +6,6 @@ import { I18nContext } from '../middlewares/Locale';
 export default function NavLeft(props) {
   const { locale } = useContext(I18nContext)
   return (
-    <div className='flex flex-col aspect-ratio w-full'>
-      <div className='flex flex-col rounded-r-2xl'>
-        {menus.map(get => (
-          <Link key={get.id} to={get.path} onClick={() => props.setSelectedMenu(get.id)} className={'p-4 hover:bg-pc hover:bg-opacity-50 ' + (get.id === props.selectedMenu && 'bg-pc font-bold')}>{locale[get.title]}</Link>
-        ))}
-      </div>
-    </div>
+    <></>
   )
 }

src/components/Pages.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import {Routes, Route} from 'react-router-dom';
 
 
@@ -22,19 +22,32 @@ import Request from './profiles/Follow/Request';
 import Default from './profiles/Follow/Default';
 
 export default function Pages(props) {
+  const [pageTitle, setPageTitle] = useState();
+
   const importData = {
-    ...props
+    ...props,
+    pageTitle,
+    setPageTitle
   };
 
+  useEffect(()=>{
+    return () => {
+      setPageTitle();
+    };
+  },[]);
+
   return (
     <div className='w-full overflow-hidden'>
+      {/* <div className='flex p-2 mb-4 bg-white rounded-2xl items-center justify-center font-bold'>
+        <p>{pageTitle}</p>
+      </div> */}
       <Routes>
         <Route path='/' element={<Home importData={importData} locale={props.locale}/>}/>
         <Route path='/blogs' element={<Blogs importData={importData} locale={props.locale}/>}></Route>
         <Route path='/blogs/:cate' element={<Blogs importData={importData} locale={props.locale}/>}></Route>          
         <Route path='/peoples' element={<Peoples importData={importData} locale={props.locale}/>}></Route>
         <Route path='/services' element={<Services importData={importData} locale={props.locale}/>}></Route>
-        <Route path={'/profile/:username'} element={<Profile selectedMenu={props.selectedMenu} setSelectedMenu={props.setSelectedMenu} locale={props.locale}></Profile>}>
+        <Route path={'/profile/:username'} element={<Profile importData={importData} selectedMenu={props.selectedMenu} setSelectedMenu={props.setSelectedMenu} locale={props.locale}></Profile>}>
           <Route path='' element={<Posts uid={"posts"} locale={props.locale}/>}>
             <Route path=':cate' element={<Posts locale={props.locale}/>}></Route>
           </Route>
@@ -54,7 +67,7 @@ export default function Pages(props) {
             <Route path='requests' element={<Request locale={props.locale}/>}></Route>
           </Route>
         </Route>
-        <Route path='/profile/settings' element={<Settings uid={"settings"} locale={props.locale}/>}>
+        <Route path='/settings' element={<Settings uid={"settings"} locale={props.locale}/>}>
           <Route path='profile' element={<SettingsProfile locale={props.locale}/>}/>
           <Route path='password' element={<Password locale={props.locale}/>}/>
         </Route>

src/components/Post.jsx

@@ -2,49 +2,82 @@ import React, { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { FetchPOST } from '../middlewares/Fetch'
 import SavedButton from './blogs/posts/SavedButton';
+import { openPopup } from '../middlewares/PopupActions';
+import Photo from './popups/Photo';
 
 export default function Post(props) {
     return (
-        <div key={props.data.id} id="blog-<%-data.id%>" className="blog-post flex flex-col rounded-2xl bg-gray-200 overflow-hidden shadow-lg">
-            <div className="flex flex-col gap-2 p-4">
-                <div className="flex justify-between">
-                    <div className="flex flex-col items-center gap-1">
-                        <div className="flex flex-col gap-1">
-                            <div id="profile-<%-data.profile.username%>" className="flex gap-2 items-center">
-                                <Link to={"/profile/" + props.data.user.username} className="flex break-words">{props.data.user.first_name} {props.data.user.second_name}</Link>
-                                {/* <a className="profile-follow p-1 bg-pc cursor-pointer rounded-lg font-bold hover:bg-pc/70">Takip Et</a> */}
-                            </div>
-                            <h2 className="font-bold">{props.data.title}</h2>
+        <div key={props.data.id} className='flex bg-white rounded-2xl overflow-hidden'>
+            <div className='flex flex-col p-2 gap-4'>
+                <div className='flex justify-between'>
+                    <div className='flex gap-1 items-center'>
+                        <div className='flex'>
+                            <img src='/profile-photo.svg' className='h-12'></img>
+                        </div>
+                        <div className='flex flex-col'>
+                            <Link>{props.data.user.first_name} {props.data.user.second_name}</Link>
+                            <Link>@{props.data.user.username}</Link>
                         </div>
                     </div>
-                    <div className="flex flex-col gap-1">
-                        <div className="flex gap-2 items-end justify-end">
-                            {/* <a href="<%-data.blogsCate.href%>">data.blogsCate.title</a> */}
-                            <Link to={"/blogs/" + props.data.category.title.toLowerCase()} onClick={() => (props.changeMenu) && props.changeMenu(props.data.category.id)}>{props.data.category.title}</Link>
-                            <p>-</p>
-                            <p className="text-end">01.01.2024</p>
-                        </div>
-                        <div className="flex items-center justify-center w-full">
-                            {/* <a id="blog-report" className="p-1 bg-pc w-full rounded-lg cursor-pointer text-center font-bold hover:bg-pc/70">Bildir</a> */}
-                        </div>
+                    <div className='flex p-1'>
+                        <Link to={"/blogs/" + props.data.category.title}>{props.data.category.title}</Link>
                     </div>
                 </div>
-                <div className="post-content flex flex-col  <%-(data.rebuild.textLen > 800) ? 'h-[20em]' : '' %>">
-                    {props.data.text}
+                <div>
+                    <p>{props.data.text}</p>
                 </div>
-            </div>
-            <div className="grid grid-cols-1 items-center justify-center bg-gray-200 overflow-hidden">
-                
-                {(false) ?
-                <div className="flex p-4 py-1">
-                    {/* <a className="post-text-more font-bold cursor-pointer">Devamını Oku</a> */}
+                <div className='flex max-h-96 bg-black rounded-2xl'>
+                    <img className='w-full object-contain' src='/1.1.jpg'></img>
+                </div>
+                <div className='flex justify-between'>
+                    <SavedButton blogId={props.data.id} saved={props.data.savedBlogs}/>
+                    <a className='w-full text-center p-2'>Paylaş</a>
                 </div>
-                : ""
-                }
-
-                <SavedButton blogId={props.data.id} saved={props.data.savedBlogs}/>
-                
             </div>
         </div>
+        // <div key={props.data.id} id="blog-<%-data.id%>" className="blog-post flex flex-col rounded-2xl bg-white overflow-hidden shadow-lg">
+        //     <div className="flex flex-col gap-2 p-4">
+        //         <div className="flex justify-between">
+        //             <div className="flex flex-col items-center gap-1">
+        //                 <div className="flex flex-col gap-1">
+        //                     <div id="profile-<%-data.profile.username%>" className="flex gap-2 items-center">
+        //                         <Link to={"/profile/" + props.data.user.username} className="flex break-words">{props.data.user.first_name} {props.data.user.second_name}</Link>
+        //                         {/* <a className="profile-follow p-1 bg-pc cursor-pointer rounded-lg font-bold hover:bg-pc/70">Takip Et</a> */}
+        //                     </div>
+        //                     <h2 className="font-bold">{props.data.title}</h2>
+        //                 </div>
+        //             </div>
+        //             <div className="flex flex-col gap-1">
+        //                 <div className="flex gap-2 items-end justify-end">
+        //                     {/* <a href="<%-data.blogsCate.href%>">data.blogsCate.title</a> */}
+        //                     <Link to={"/blogs/" + props.data.category.title.toLowerCase()} onClick={() => (props.changeMenu) && props.changeMenu(props.data.category.id)}>{props.data.category.title}</Link>
+        //                     <p>-</p>
+        //                     <p className="text-end">01.01.2024</p>
+        //                 </div>
+        //                 <div className="flex items-center justify-center w-full">
+        //                     {/* <a id="blog-report" className="p-1 bg-pc w-full rounded-lg cursor-pointer text-center font-bold hover:bg-pc/70">Bildir</a> */}
+        //                 </div>
+        //             </div>
+        //         </div>
+        //         <div className="post-content flex flex-col  <%-(data.rebuild.textLen > 800) ? 'h-[20em]' : '' %>">
+        //             {props.data.text}
+        //         </div>
+        //         <div className='flex gap-2 h-36 border-solid bg-white rounded-2xl p-2'>
+        //             <img onClick={(e) => openPopup(<Photo src={e.target.src}/>)} className='aspect-square object-cover rounded-2xl' src='/1.1.jpg'></img>
+        //         </div>
+        //     </div>
+        //     <div className="grid grid-cols-1 items-center justify-center bg-gray-200 overflow-hidden">
+                
+        //         {(false) ?
+        //         <div className="flex p-4 py-1">
+        //             {/* <a className="post-text-more font-bold cursor-pointer">Devamını Oku</a> */}
+        //         </div>
+        //         : ""
+        //         }
+
+        //         <SavedButton blogId={props.data.id} saved={props.data.savedBlogs}/>
+                
+        //     </div>
+        // </div>
     )
 }

src/components/Posts.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import Post from './Post'
 import { FetchPOST } from '../middlewares/Fetch'
 import { Link, useOutletContext, useParams } from 'react-router-dom';
 import Categories from './Categories';
+import { GSContext } from '../middlewares/GlobalState';
+import Right from './profiles/Right';
 
 export default function Posts(props) {
   const [data, setData] = useState([]);
@@ -12,10 +14,9 @@ export default function Posts(props) {
   const [cates, setCates] = useState([]);
   const [selectedCate, setSelectedCate] = useState("");
   const { selectedMenu, setSelectedMenu, profileMenus, username } = useOutletContext();
+  const { exports } = useContext(GSContext);
 
   useEffect(() => {
-    profileMenus.map(res => res.path === props.uid && setSelectedMenu(res.id));
-
     if(cate){
       FetchPOST({
         port: 3001,
@@ -24,6 +25,7 @@ export default function Posts(props) {
         setData(res)
         if(res.length > 0){
           setLoading(false);
+          setSelectedCate(0)
         };
       });
     }else{
@@ -31,19 +33,22 @@ export default function Posts(props) {
         port: 3001,
         pathname: "/get/blogs/user/" + username
       }).then(res => {
-        setData(res)
+        setData(res);
         if(res.length > 0){
           setLoading(false);
+          setSelectedCate(0)
         };
       });
     };
-
+    
     FetchPOST({
-        port: 3001,
-        pathname: "/get/blogs/cate/all"
+      port: 3001,
+      pathname: "/get/blogs/cate/all"
     })
     .then(res => {
       setCates(res);
+      console.log(46, selectedCate)
+      exports.setRight(<Right pathname={"/profile/" + username} plugin={<Categories cates={res} setSelectedMenu={setSelectedCate} selectedMenu={selectedCate} pathname={"/profile/" + username + "/posts/"} isChangeMenu={true}></Categories>}></Right>);
 
       res.map(get => {
         if(get.title.toLowerCase() === cate){
@@ -52,17 +57,11 @@ export default function Posts(props) {
           setSelectedCate(0);
         };
       });
-
     });
-
-
   },[cate]);
 
   return (
     <div className='flex flex-col gap-4'>
-      <div className='flex items-center justify-center'>
-        <Categories data={{categories: cates}} changeMenu={setSelectedCate} selectedMenu={selectedCate} isChangeMenu={true} pathname={"/profile/" + username + "/posts/"}/>
-      </div>
       {
         (!loading) ?
           data.map(get => <Post pathname={"/profile/" + username + "/posts/"} key={get.id} data={get}></Post>)
@@ -73,5 +72,5 @@ export default function Posts(props) {
           </div>
       }
     </div>
-  )
+  );
 };

src/components/ProfileDetail.jsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from 'react'
-import {Outlet, useParams} from 'react-router-dom';
+import React, { useContext, useEffect, useState } from 'react'
+import {Link, Outlet, useParams} from 'react-router-dom';
 import { FetchPOST } from '../middlewares/Fetch';
 import Menus from './profiles/components/Menus';
 import Header from './profiles/components/Header';
+import { GSContext } from '../middlewares/GlobalState';
+import Left from './profiles/Left';
 
-export default function ProfileDetail({uid}) {
+export default function ProfileDetail({uid, setLeft}) {
     const profileMenus = [{
         id: 1,
         title: "Gönderiler",
@@ -33,18 +35,12 @@ export default function ProfileDetail({uid}) {
             console.log(res)
             if(res){
                 setData(res);
+                setLeft(<Left profile={res}/>)
                 setLoading(false);
             }else{
                 setData(true);
             };
         });
-
-        // FetchPOST({
-        //     port: 3001,
-        //     pathname: "/get/user/my"
-        // }).then(res => {
-        //     setMyData(res);
-        // });
         
         return () => {
             setData([]);
@@ -61,10 +57,10 @@ export default function ProfileDetail({uid}) {
 
     return (
         <div className='flex flex-col gap-4'>
-            <Header data={data}/>
-            <Menus data={data} myData={myData} username={(username) ?? data.user.username} setSelectedMenu={setSelectedMenu} selectedMenu={selectedMenu} profileMenus={profileMenus}/>
+            {/* <Header data={data}/> */}
+            {/* <Menus data={data} myData={myData} username={(username) ?? data.user.username} setSelectedMenu={setSelectedMenu} selectedMenu={selectedMenu} profileMenus={profileMenus}/> */}
             
-            <div className='flex flex-col bg-white p-4 gap-4'>
+            <div className='flex flex-col gap-4'>
                 {
                     (data.user) && <Outlet context={{ selectedMenu, setSelectedMenu, profileMenus, username: data.user.username }}/>
                 }

src/components/ProfileMenuBox.jsx

@@ -1,8 +1,25 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
+import { GSContext } from '../middlewares/GlobalState';
 
 export default function ProfileMenuBox(props) {
+  const { profile } = useContext(GSContext);
+  
+  console.log(profile)
+
   return (
-    <Link to={'/profile/' + props.profile.username + "/posts"} onClick={() => {props.setSelectedMenu(0)}} className={'flex items-center justify-center h-full w-full hover:bg-pc hover:bg-opacity-50 ' + (props.selectedMenu === 0 && 'bg-pc font-bold')}>{props.profile.first_name} {props.profile.second_name}</Link>
+    <Link to={`/profile/${profile.username}/posts`} className={'flex h-24 w-full p-2 gap-2 bg-white rounded-2xl shadow-lg'}>
+      <img src='/1.1.jpg' className='h-full rounded-2xl'></img>
+      <div className='flex flex-col items-center justify-center gap-1'>
+        <div>
+          <p className='font-bold text-sm'>{profile.first_name} {profile.second_name}</p>
+          <p className='font-bold text-pc text-sm'>@{profile.username}</p>
+        </div>
+        <div className='flex flex-col w-full gap-1'>
+          {/* <p className='text-sm'><span className='font-bold'>{profile.followers}</span> Takipçi</p> */}
+          {/* <p className='text-sm'><span className='font-bold'>30</span> Takip</p> */}
+        </div>
+      </div>
+    </Link>
   );
 };

src/components/blogs/Right.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import Categories from '../Categories'
+import { FetchPOST } from '../../middlewares/Fetch';
+import { Link } from 'react-router-dom';
+
+export default function Right(props) {
+  const [selectedMenu, setSelectedMenu] = useState(0);
+  const [cates, setCates] = useState();
+
+  useEffect(()=>{
+    if(!cates){
+      FetchPOST({
+          port: 3001,
+          pathname: "/get/blogs/cate/all"
+      })
+      .then(res => setCates(res));
+    }
+    console.log(cates)
+  },[])
+
+  return (
+    <>
+      <Link to={"/write"} className='p-4 bg-white rounded-lg hover:bg-pc'>Gönderi Oluştur</Link>
+      <Categories cates={cates} selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} isChangeMenu={true} pathname={"/blogs/"}/>
+    </>
+  );
+};

src/components/blogs/posts/SavedButton.jsx

@@ -4,7 +4,7 @@ import { FetchPOST } from '../../../middlewares/Fetch';
 export default function SavedButton({blogId, saved}) {
   const [isSaved, setIsSaved] = useState((saved.length > 0) && saved[0].statu);
   return (
-    <p id="blog-save" className={"items-center justify-center text-center font-bold cursor-pointer p-2 hover:bg-pc/50 " + ((isSaved) && 'bg-pc')} onClick={async () => {setIsSaved(await saveBlog(blogId))}}>
+    <p id="blog-save" className={"items-center justify-center text-center w-full rounded-lg cursor-pointer p-2 hover:bg-pc/50 " + ((isSaved) && 'bg-pc font-bold')} onClick={async () => {setIsSaved(await saveBlog(blogId))}}>
       {(isSaved) ? 'Kaydettin' : 'Kaydet'}
     </p>
   )

src/components/homepage/Left.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import ProfileMenuBox from '../ProfileMenuBox'
+import { Link } from 'react-router-dom'
+
+export default function Left({profile, selectedMenu, setSelectedMenu}) {
+  return (
+        <>
+            <div className='flex'>
+                <ProfileMenuBox selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu} profile={profile}/>
+            </div>
+            <div className='flex flex-col w-full bg-white rounded-2xl shadow-lg'>
+            <ul className='flex flex-col rounded-2xl overflow-hidden'>
+                <li className='flex flex-col'>
+                <div className='flex flex-col justify-between'>
+                    <Link to={"/"} className='flex p-2 gap-2 hover:bg-gray-100'>
+                    <svg width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z" fill="#000000"/>
+                    </svg>
+                    <p>Anasayfa</p>
+                    </Link>
+                    <Link to={"/blogs"} className='p-2 hover:bg-gray-100'>Gönderiler</Link>
+                    <Link to={"/discover"} className='p-2 hover:bg-gray-100'>Keşfet</Link>
+                </div>
+                <hr></hr>
+                </li>
+                <li className='flex flex-col'>
+                <Link to={"/messages"} className='p-2 hover:bg-gray-100'>Mesajlar</Link>
+                <Link to={"/notification"} className='p-2 hover:bg-gray-100'>Bildirimler</Link>
+                </li>
+            </ul>
+            </div>
+            <div className='flex w-full'>
+                <ul>
+                <li>
+                    <div className='flex flex-wrap gap-2 p-2 text-xs'>
+                    <Link>Yardım</Link>
+                    <Link>Hakkında</Link>
+                    <Link>Gizlilik Politikası</Link>
+                    <Link>Hizmet Standartları</Link>
+                    </div>
+                </li>
+                </ul>
+            </div>
+        </>
+    )
+}

src/components/popups/Photo.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { closePopup } from '../../middlewares/PopupActions'
+
+export default function Photo({src}) {
+  return (
+    <div className='flex flex-col items-center justify-center bg-black rounded-2xl shadow-2xl h-4/5 w-4/5 relative'>
+        <div className='flex items-center justify-end absolute top-0 right-0 p-4'>
+            <p className='flex items-center justify-center font-bold text-black p-2 bg-white aspect-square rounded-full cursor-pointer hover:bg-gray-300' onClick={closePopup}>Kapat</p>
+        </div>
+        <div className='flex h-full mx-auto'>
+            <img className=' object-contain' src={src}></img>
+        </div>
+    </div>
+  );
+};

src/components/profiles/Follow/components/User.jsx

@@ -26,8 +26,8 @@ export default function User({data, button, buttonAction, uid="default"}) {
                     <p>@{data.username}</p>
                 </Link>
                 <div className='grid grid-cols-2 items-center justify-center gap-2 px-2'>
-                    <a className='rounded-lg text-center p-2 cursor-pointer bg-green-400 hover:bg-green-300' onClick={(e) => {buttonAction(e, data.id, "accept")}}>Kabul Et</a>
-                    <a className='rounded-lg text-center p-2 cursor-pointer bg-red-400 hover:bg-red-300' onClick={(e) => {buttonAction(e, data.id, "reject")}}>Reddet</a>
+                    <p className='rounded-lg text-center p-2 cursor-pointer bg-green-400 hover:bg-green-300' onClick={(e) => {buttonAction(e, data.id, "accept")}}>Kabul Et</p>
+                    <p className='rounded-lg text-center p-2 cursor-pointer bg-red-400 hover:bg-red-300' onClick={(e) => {buttonAction(e, data.id, "reject")}}>Reddet</p>
                 </div>
             </div>
         );

src/components/profiles/Left.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FetchPOST } from '../../middlewares/Fetch';
+
+export default function Left({profile}) {
+  const friendPOST = (e) => {
+      FetchPOST({
+          port: 3001,
+          pathname: "/post/follow",
+          fetchData:{
+              method: "POST",
+              credentials: 'include',
+              headers: {
+                  'Accept' : 'application/json',
+                  'Content-Type' : 'application/json'
+              },
+              body: JSON.stringify({
+                  userId: profile.user.id
+              })
+          }
+      }).then(res => {
+          if(res.follow){
+              e.target.innerText = res.follow.title;
+              console.log(res)
+              if(res.follow.statu === true){
+                  console.log(5)
+                  e.target.classList.add("bg-pc", "bg-opacity-40")
+              }
+          };
+      });
+  };
+
+  return (
+    <>
+      <div className='flex w-full gap-2 p-2 bg-white rounded-2xl shadow-lg'>
+        <Link to={".."} className='p-2 bg-red-300'></Link>
+        <div className='flex flex-col w-full gap-2 bg-white'>
+          <div className='flex h-24 gap-2'>
+            <img src='/1.1.jpg' className='h-full rounded-2xl'></img>
+            <div className='flex flex-col items-center justify-center gap-1'>
+              <Link to={"/profile/" + profile.user.username + "/posts"}>
+                <p className='font-bold text-sm'>{profile.user.first_name} {profile.user.second_name}</p>
+                <p className='font-bold text-pc text-sm'>@{profile.user.username}</p>
+              </Link>
+              <div className='flex flex-col w-full gap-1'>
+                <Link to={"/profile/" + profile.user.username + "/follow/follower"} className='text-sm'><span className='font-bold'>{profile.user.followers.length}</span> Takipçi</Link>
+                <Link to={"/profile/" + profile.user.username + "/follow/following"} className='text-sm'><span className='font-bold'>{profile.user.followings.length}</span> Takip</Link>
+              </div>
+            </div>
+          </div>
+          <div className='flex'>
+            {
+              (profile.isMy === false) &&
+              <div className='flex col-start-5 col-end-6 items-center justify-end w-full'>
+                  <p className={'rounded-2xl select-none cursor-pointer p-2 shadow-md w-full hover:bg-pc hover:bg-opacity-70'} onClick={friendPOST}>{(profile.user.follows.length > 0) ? profile.user.follows[0].button.text : profile.user.button.text}</p>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-col bg-white rounded-2xl p-2 gap-2 shadow-lg'>
+        <div className='flex flex-col'>
+          <p className='font-bold text-lg'>Hakkında</p>
+          <hr></hr>
+        </div>
+        <div className='flex'>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, ullam accusantium provident iure consequuntur reprehenderit laborum aut aspernatur laboriosam repellat iusto nisi veniam sapiente vitae aperiam nobis dolorum ipsa temporibus.</p>
+        </div>
+      </div>
+      <div className='flex flex-col bg-white rounded-2xl p-2 gap-6 shadow-lg'>
+        <div className='flex flex-col'>
+          <p className='font-bold text-lg'>Fotoğraflar</p>
+          <hr></hr>
+        </div>
+        <div className='grid grid-cols-3 grid-rows-3'>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+          <img className='rounded-2xl' src='/1.1.jpg'></img>
+        </div>
+        <div className='flex w-full'>
+          <p className='p-2 w-full rounded-xl text-center cursor-pointer hover:bg-pb'>Tümünü Gör</p>
+        </div>
+      </div>
+    
+    </>
+  );
+};
+

src/components/profiles/Right.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+export default function Right({pathname, plugin}) {
+    console.log(plugin)
+    return (
+        <div className='flex flex-col w-full'>
+            {plugin}
+            <div className='flex flex-col w-full bg-white rounded-2xl shadow-lg overflow-hidden'>
+                <ul className='flex w-full'>
+                    <li className='flex flex-col w-full'>
+                        <div className='flex flex-col w-full'>
+                            <Link to={pathname} className='w-full p-2 hover:bg-gray-100'>Özetleme</Link>
+                        </div>
+                        <div className='flex flex-col w-full'>
+                            <Link to={pathname + "/posts"} className='w-full p-2 hover:bg-gray-100'>Gönderiler</Link>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    )
+}

src/components/profiles/components/Header.jsx

@@ -60,7 +60,7 @@ export default function Header({data}) {
                     {
                         (data.isMy === false) &&
                         <div className='flex col-start-5 col-end-6 items-center justify-end'>
-                            <a className='rounded-2xl select-none cursor-pointer p-2 shadow-md hover:bg-pc hover:bg-opacity-70' onClick={friendPOST}>{(data.user.follows.length > 0) ? data.user.follows[0].button.text : data.user.button.text}</a>
+                            <p className='rounded-2xl select-none cursor-pointer p-2 shadow-md hover:bg-pc hover:bg-opacity-70' onClick={friendPOST}>{(data.user.follows.length > 0) ? data.user.follows[0].button.text : data.user.button.text}</p>
                         </div>
                     }
                 </div>

src/components/profiles/posts/RightPlugin.jsx

@@ -0,0 +1,11 @@
+import React, { useContext, useEffect } from 'react'
+import { GSContext } from '../../../middlewares/GlobalState';
+
+export default function RightPlugin({cates, selectedMenu, setSelectedMenus, pathname}) {
+    // const { exports } = useContext(GSContext);
+
+    return (
+        <div className='flex flex-col'>
+        </div>
+    );
+};

src/index.css

@@ -3,8 +3,15 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body{
-    background: var(--bg-pc);
+    background: #f3f4f6;
+    font-size: smaller;
 }
 
 .aspect-square{
@@ -15,6 +22,10 @@ body{
     grid-column: 1fr;
 }
 
+.page-container{
+    width: 1440px;
+}
+
 :root{
     --navbar-p: 1rem;
     --bg-pc:#cff9ff;

src/middlewares/GlobalState.jsx

@@ -0,0 +1,14 @@
+import { createContext, useEffect, useState } from 'react';
+import { FetchPOST } from './Fetch';
+
+const GSContext = createContext();
+
+const GSProvider = ({ children, profile, exports }) => {
+    return (
+        <GSContext.Provider value={{ profile, exports }}>
+            {children}
+        </GSContext.Provider>
+    );
+};
+
+export { GSProvider, GSContext };

src/pages/Blogs.jsx

@@ -1,10 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { FetchPOST } from '../middlewares/Fetch';
 import Post from '../components/Post';
 import { useParams } from 'react-router-dom';
 import { openPopup } from '../middlewares/PopupActions';
 import Categories from '../components/Categories';
 import WriteBoxPopup from '../components/WriteBoxPopup';
+import { GSContext } from '../middlewares/GlobalState';
+import Right from '../components/blogs/Right';
+import Left from '../components/homepage/Left';
 
 export default function Blogs({importData}) {
   const [data, setData] = useState();
@@ -12,10 +15,13 @@ export default function Blogs({importData}) {
   const [selectedMenu, setSelectedMenu] = useState(0);
   const [loading, setLoading] = useState(true);
   const { cate } = useParams();
+  const { exports, profile } = useContext(GSContext);
   
   
   useEffect(() => {   
-    importData.setSelectedMenu(2)
+    importData.setSelectedMenu(2);
+    importData.setPageTitle("Gönderiler");
+    
     if(cate === undefined){
       FetchPOST({
         port: 3001,
@@ -31,6 +37,8 @@ export default function Blogs({importData}) {
         setData(res.blogs)
         setPageData(res);
         setLoading(false);
+        importData.exports.setLeft(<Left profile/>);
+        exports.setRight(<Right data={pageData} setData={setPageData} changeMenu={changeMenu} selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>);
       });
     }else if(cate){
       FetchPOST({
@@ -44,9 +52,17 @@ export default function Blogs({importData}) {
         setLoading(false);
         changeCategory(res.currentCategory.id, categoriesIds, setData);
         setSelectedMenu(res.currentCategory.id);
+        exports.setRight(<Right data={pageData} setData={setPageData} changeMenu={changeMenu} selectedMenu={selectedMenu} setSelectedMenu={setSelectedMenu}/>);
       });
     }
   },[cate]);
+
+  useEffect(() => {
+    return () => {
+      exports.setRight();
+      importData.setPageTitle("");
+    }
+  },[])
   
   const changeMenu = (id) => {
     const categoriesIds = pageData.categories.map(get => get.id);
@@ -60,13 +76,7 @@ export default function Blogs({importData}) {
   };
 
   return (
-    <div className='flex flex-col gap-4 p-4 h-full overflow-y-scroll'>
-      <div className='flex justify-between items-center'>
-        <Categories data={pageData} changeMenu={changeMenu} selectedMenu={selectedMenu} isChangeMenu={true} pathname={"/blogs/"}/>
-        <p onClick={() => openPopup(<WriteBoxPopup/>)} className={'flex h-20 rounded-2xl bg-gray-200 aspect-square items-center justify-center text-center cursor-pointer hover:bg-pc hover:bg-opacity-50'}>
-          Gönderi Yayınla
-        </p>
-      </div>
+    <div className='flex flex-col gap-4 h-full overflow-y-scroll'>
       {
         (data) &&
           data.map(get => <div key={get.id}>

src/pages/Home.jsx

@@ -1,12 +1,24 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { I18nContext } from '../middlewares/Locale';
+import Left from '../components/homepage/Left';
+import { GSContext } from '../middlewares/GlobalState';
 
 export default function Home({importData}) {
   const { locale } = useContext(I18nContext);
+  const { profile } = useContext(GSContext);
+
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     importData.setSelectedMenu(1);
+    importData.exports.setLeft(<Left profile/>);
+    importData.setPageTitle("Anasayfa")
+    setLoading(false);
   },[]);
+
+  if(loading){
+    return(<></>)
+  };
   
   return (
     <div>

src/pages/Profile.jsx

@@ -1,13 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { FetchPOST } from '../middlewares/Fetch';
 import ProfileDetail from '../components/ProfileDetail';
+import { GSContext } from '../middlewares/GlobalState';
+import Right from '../components/profiles/Right';
 
 
-export default function Profile({selectedMenu, setSelectedMenu, uid}) {
+export default function Profile({selectedMenu, setSelectedMenu, uid, importData}) {
   const { username } = useParams();
+  const { exports } = useContext(GSContext);
+  
 
   useEffect(() => {
+    exports.setRight(<Right pathname={"profile/" + username}></Right>)
     if(!username){
       FetchPOST({
         port: 3001,
@@ -16,11 +21,14 @@ export default function Profile({selectedMenu, setSelectedMenu, uid}) {
         (get.user.username) ? setSelectedMenu(0) : setSelectedMenu("");
       });
     };
+    return () => {
+      exports.setRight();
+    };
   },[]);
 
   return (
     <div className='flex flex-col w-full h-full overflow-y-scroll'>
-      <ProfileDetail/>
+      <ProfileDetail setLeft={importData.exports.setLeft}/>
     </div>
   );
 };