navbar arranged according to new design

ekobis · Jul 29, 2024 · e47fc3b · e47fc3b
1 parent 2bd3f57
commit e47fc3b
Show file tree

Hide file tree

Showing 8 changed files with 345 additions and 171 deletions.
diff --git a/ekobis/public/ekobisUser.jpg b/ekobis/public/ekobisUser.jpg
diff --git a/ekobis/src/App.jsx b/ekobis/src/App.jsx
@@ -9,8 +9,6 @@ import { useThemeClasses } from "./components/context/CustomTheme";
 export default function App() {
   const { background, text, border, shadow } = useThemeClasses();
 
-  // Define dynamic class based on theme
-
 
   return (
     <div className={`flex flex-row ${background} ${text} ${border} ${shadow}`}>

diff --git a/ekobis/src/components/Footer.jsx b/ekobis/src/components/Footer.jsx
@@ -1,16 +1,13 @@
 import { useContext } from "react";
 import ThemeContext from "./context/ThemeContext";
 
-
-
 export default function Footer() {
   const { theme } = useContext(ThemeContext);
-  console.log(theme)
-
-  return(
+
+  return (
     <>
-     <footer className= {`${theme==="day" ? "bg-customBlue" : "bg-customPurple"} text-white py-6`}>
-        <div className="container mx-auto text-center">
+      <footer className={`${theme === "day" ? "bg-customBlue" : "bg-customPurple"} text-white py-6 mt-auto`} style={{ marginLeft: 'calc(40px + 1rem)' }}>
+        <div className="container mx-auto text-center px-4">
           <p className="text-lg mb-2">&copy; {new Date().getFullYear()} Ön Muhasebe Programı. Tüm hakları saklıdır.</p>
           <p className="text-sm mb-2">
             <a href="#home" className="hover:underline">Ana Sayfa</a> | 
@@ -22,5 +19,5 @@ export default function Footer() {
         </div>
       </footer>
     </>
-  )
-}
+  );
+}
diff --git a/ekobis/src/components/context/ChangeThemeButton.jsx b/ekobis/src/components/context/ChangeThemeButton.jsx
@@ -0,0 +1,27 @@
+import { useContext } from "react";
+import ThemeContext from "./ThemeContext";
+
+export default function ChangeTheme() {
+  const { theme, toggleTheme } = useContext(ThemeContext);
+  return(
+    <>
+    <div className={`flex flex-col p-2 items-center ${expanded ? "w-56" : "w-16"} border border-customBlue rounded-lg shadow-md bg-white hover:bg-gray-100 transition-colors duration-200`}>
+            <button onClick={toggleTheme} className="flex items-center flex-1">
+              <div className="relative flex flex-col items-center group transition-transform duration-100 shadow rounded-full border border-customBlue shadow-black hover:bg-customBlue">
+                {theme === "day" ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-customPurple">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6 text-customPurple">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+                  </svg>
+                )}
+              </div>
+              {expanded && <span className="text-customPurple"> Change Theme </span>}
+            </button>
+          </div>
+          {/* theme icon end */}
+    </>
+  )
+}
diff --git a/ekobis/src/components/route/SideRoutes.jsx b/ekobis/src/components/route/SideRoutes.jsx
@@ -1,7 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import Home from "../../pages/Home";
 import Clients from "../../pages/Clients";
-import Products from "../../pages/Products/Products";
 import UrunListele from "../../pages/Products/UrunListele";
 import UrunEkle from "../../pages/Products/Urunekle";
 import NotFound from "../NotFound";
@@ -11,10 +10,8 @@ export default function SideRoutes() {
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="musteri" element={<Clients />} />
-      <Route path="urun" element={<Products />}>
         <Route path="urunekle" element={<UrunEkle />} />
         <Route path="urunlistele" element={<UrunListele />} /> 
-      </Route>
       <Route path="*" element={<NotFound />} />
     </Routes>
   );

diff --git a/ekobis/src/pages/Home.jsx b/ekobis/src/pages/Home.jsx
@@ -1,13 +1,33 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import Footer from '../components/Footer';
-import { useThemeClasses } from "../components/context/CustomTheme.jsx"
+import { useThemeClasses } from "../components/context/CustomTheme.jsx";
+import { Link } from 'react-router-dom';
+import ekobisUser from "../../public/ekobisUser.jpg";
 
 export default function Home() {
   const { background, text, border, shadow } = useThemeClasses();
 
   return (
     <>
-      <div className={`container mx-auto mt-10 p-6  `}>
+      {/* Navbar */}
+      <nav className={`bg-customBlue p-4 ${shadow} flex justify-between items-center ml-16`}>
+        <div className="text-2xl font-bold text-white">
+          Ekobis
+        </div>
+        <div className="flex items-center">
+          <span className="mr-4 text-white">Merhaba Ekobis User</span>
+          <Link to="/profile">
+            <img
+              src={ekobisUser}
+              alt="Kullanıcı Profili"
+              className="w-12 h-12 rounded-full border border-white hover:border-customPurple shadow-lg shadow-black"
+            />
+          </Link>
+        </div>
+      </nav>
+
+      {/* Main Content */}
+      <div className={`container mx-auto mt-10`}>
         {/* Hero Section */}
         <section id="home" className={`p-10 rounded-lg ${shadow} mb-10`}>
           <h2 className="text-4xl font-bold mb-4">
@@ -26,15 +46,15 @@ export default function Home() {
           <h2 className={`text-3xl font-bold mb-4 ${text}`}>Özellikler</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             <div className={`p-6 rounded-lg ${shadow}`}>
-              <h3 className="text-2xl font-bold mb-2 ${text}">Kolay Kullanım</h3>
+              <h3 className={`text-2xl font-bold mb-2 ${text}`}>Kolay Kullanım</h3>
               <p>Kullanıcı dostu arayüzümüz ile tüm muhasebe işlemlerinizi kolayca gerçekleştirin.</p>
             </div>
             <div className={`p-6 rounded-lg ${shadow}`}>
-              <h3 className="text-2xl font-bold mb-2 ${text}">Raporlama</h3>
+              <h3 className={`text-2xl font-bold mb-2 ${text}`}>Raporlama</h3>
               <p>Gelişmiş raporlama özellikleri ile işinizin her anını takip edin.</p>
             </div>
             <div className={`p-6 rounded-lg ${shadow}`}>
-              <h3 className="text-2xl font-bold mb-2 ${text}">Entegrasyon</h3>
+              <h3 className={`text-2xl font-bold mb-2 ${text}`}>Entegrasyon</h3>
               <p>Diğer iş uygulamaları ile kolayca entegre olun.</p>
             </div>
           </div>