Skip to content

Commit

Permalink
Reviewing NavBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamuelAtohoun
SamuelAtohoun committed Nov 25, 2024
1 parent 78bb527 commit dab2154
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 70 deletions.
8 changes: 7 additions & 1 deletion Frontend/src/Components/NavBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { useState } from "react";

export default function NavBar() {
const [scrollBarPosition, setScrollBarPosition] =useState('')
function handleScrollBarPosition(){
setScrollBarPosition((prevPosition)=>window.scrollY);
}
return (
// <nav className="hidden md:max-w-lg h-10 bg-white mt-4 m-auto md:flex md:justify-center md:fixed md:right-0 md:left-0">
// <ul className="flex flex-row justify-between items-center gap-10 text-[#417EE9]">
<nav className="hidden md:block w-full bg-red-500 fixed">
<ul className="bg-white max-w-lg lg:max-w-3xl h-12 md:h-14 m-auto mt-8 fixed -right-14 left-0 flex justify-around items-center shadow-lg text-[#417EE9] md:text-lg">
<ul className={`bg-white w-full max-w-lg lg:max-w-3xl h-12 md:h-14 m-auto top-8 fixed -right-14 left-0 flex justify-around items-center shadow-lg text-[#417EE9] md:text-lg`}>
<li>Système OCR</li>
<li>A propos de nous</li>
<li>Nous contacter</li>
Expand Down
15 changes: 15 additions & 0 deletions Frontend/src/Components/NavMenuProvider.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { createContext } from "react";

export const NavMenuContext = createContext({
hide:true,
size:'',
handleHide: ()=> {}
})

// function handleHide() {
// setHide((hide) => !hide);
// }

export default function NavMenuProvider(){

}
105 changes: 53 additions & 52 deletions Frontend/src/Components/SideBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import DS from "../assets/DS.svg";
// import DS from "../assets/DS.svg";
import DS1 from "../assets/DS1.svg";

import { FaArrowRightFromBracket } from "react-icons/fa6";
Expand All @@ -7,57 +7,58 @@ import { BsJournalText } from "react-icons/bs";
import { BiAnalyse } from "react-icons/bi";
import { GiHamburgerMenu } from "react-icons/gi";
import { IoMdHelpCircleOutline } from "react-icons/io";
import { useState } from "react";
import { ImCross } from "react-icons/im";
import { useContext, useState } from "react";
import { NavMenuContext } from "./NavMenuProvider";

export default function SideBar() {
const [hide, setHide] = useState(true);
function handleHide() {
setHide((hide) => !hide);
}
return (
<aside className="">
<div className="h-screen grid grid-cols-[auto_1fr]">
<div className="bg-[#181E34] flex flex-col fixed w-14 h-full">
<div className="w-full mt-4 md:hidden">
<GiHamburgerMenu
className="m-auto size-10 p-1 border"
onClick={handleHide}
/>
</div>
<div className="bg-[#454B5B] flex justify-center items-center gap-1 mt-10 h-10 w-full">
<div className="bg-[#181E34] size-7 flex justify-center items-center">
<img src={DS1} alt="DS logo" className="size-5" />
</div>
<FaArrowRightFromBracket className="size-4" />
</div>
<div className="w-full mt-10 border-t-2 border-white p-4">
<BsHouse className="text-white size-5 m-auto" />
</div>
<div className="w-full border-t-2 border-white p-4">
<BsJournalText className="text-white size-5 m-auto" />
</div>
<div className="w-full border-y-2 border-white p-4">
<BiAnalyse className="text-white size-5 m-auto" />
</div>
<div className="bg-[#323A56] w-14 p-4 absolute bottom-0 left-0">
<IoMdHelpCircleOutline className="text-white size-5 m-auto" />
</div>
</div>
<div className={`bg-white w-screen h-full flex flex-col ml-14 ${hide ? "hidden" : ""}`}>
<div className="flex justify-between items-center m-4 mb-0 text-[#417EE9]">
<h2 className="text-xl">DataSight</h2>
<ImCross className="size-6" onClick={handleHide}/>
</div>
<div className="m-auto">
<ul className="flex flex-col justify-center items-center gap-10 text-2xl text-[#417EE9] font-bold">
<li className="hover:underline">Système OCR</li>
<li className="hover:underline">A Propos de nous</li>
<li className="hover:underline">Nous contacter</li>
</ul>
</div>
</div>
const navMenuCtx = useContext(NavMenuContext);
const [enlarge, setEnlarge] = useState(true);

function handleEnlarge() {
setEnlarge((prev) => !prev);
}

return (
<aside className="bg-[#181E34] flex flex-col fixed w-14 h-full left-0 top-0 group md:hover:w-44 md:hover:z-50 transition-all duration-500">
<div className="w-full mt-4 md:hidden">
<GiHamburgerMenu
className="m-auto size-10 p-1 border"
onClick={navMenuCtx.handleHide}
/>
</div>
<div className="bg-[#454B5B] flex justify-center items-center mt-10 h-10 w-full gap-2">
<div className="bg-[#181E34] size-7 flex justify-center items-center">
<img src={DS1} alt="DS logo" className="size-5" />
</div>
</aside>
);
}
<span className="hidden group-hover:inline text-sm font-bold">
DataSight
</span>
<FaArrowRightFromBracket className="size-4 group-hover:rotate-180" />
</div>
<div className="w-full h-14 mt-10 border-t-2 border-white p-4 group-hover:group md:flex md:justify-start md:gap-4">
<BsHouse className="text-white size-5 " />
<span className="hidden group-hover:inline md:text-base font-bold">
Accueil
</span>
</div>
<div className="w-full h-14 border-t-2 border-white p-4 md:flex md:justify-start md:gap-4">
<BsJournalText className="text-white size-5" />
<span className="hidden group-hover:inline md:text-base font-bold">
Historique
</span>
</div>
<div className="w-full h-14 border-y-2 border-white px-4 py-4 md:flex md:justify-start md:items-center md:gap-4">
<BiAnalyse className="text-white size-7" />
<span className="hidden group-hover:inline md:text-base font-bold">
Analyse Rapide
</span>
</div>
<div className="bg-[#323A56] w-full h-11 p-4 absolute bottom-0 left-0 md:flex md:justify-start md:items-center md:gap-4">
<IoMdHelpCircleOutline className="text-white size-5" />
<span className="hidden group-hover:inline md:text-base font-bold">
Centre d'aide
</span>
</div>
</aside>
);
}
135 changes: 118 additions & 17 deletions Frontend/src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,77 @@
import SideBar from "../Components/SideBar";
import NavBar from "../Components/NavBar";
import { NavMenuContext } from "../Components/NavMenuProvider";

import { TbUpload } from "react-icons/tb";
import OCRDevices from "../assets/ocr-devices.svg";
import { ImCross } from "react-icons/im";
import fileConversion from "../assets/fileConversion.svg";
import { TfiReload } from "react-icons/tfi";
import { SlEnergy } from "react-icons/sl";
import { createContext, useContext, useState } from "react";

export default function Home() {
const [hideNavMenu, setHideNavMenu] = useState(true);

function handleHide() {
setHideNavMenu((hide) => !hide);
}
const navMenuCtx = {
hide: hideNavMenu,
handleHide,
size: 14,
};

let style = { width: `calc(100vw - 56px)`,
position: 'relative',
left:'56px'
}; //
return (
<NavMenuContext.Provider value={navMenuCtx}>
<section className="flex w-screen" >
<SideBar></SideBar>
<div className="flex flex-col" style={style}>
<NavBar></NavBar>
<NavMenu></NavMenu>
<Presentation></Presentation>
<Description></Description>
{/* <Footer></Footer> */}
</div>
</section>
</NavMenuContext.Provider>
);
}

function NavMenu() {
const navMenuCtx = useContext(NavMenuContext);

return (
<section className="flex w-screen">
<SideBar></SideBar>
<div className="flex flex-col w-full ml-14">
<NavBar></NavBar>
<Presentation></Presentation>
<Description></Description>
<Footer></Footer>
<div
className={`bg-white h-screen flex flex-col fixed top-0 right-0 transition-transform duration-1000 ease-in-out transform md:hidden ${
navMenuCtx.hide
? "-translate-y-full opacity-0 pointer-events-none"
: "translate-y-0 opacity-100"
}`}
style={{
transitionProperty: "transform, opacity",
width: "calc(100vw - 56px)",
}}
>
<div className="flex w-full justify-around items-center absolute top-4 gap-10 text-[#417EE9]">
<h2 className="text-xl">DataSight</h2>
<ImCross
className="size-6 cursor-pointer"
onClick={navMenuCtx.handleHide}
/>
</div>
</section>
<div className="m-auto">
<ul className="flex flex-col justify-center items-center gap-10 text-2xl text-[#417EE9] font-bold">
<li className="hover:underline">Système OCR</li>
<li className="hover:underline">À Propos de nous</li>
<li className="hover:underline">Nous contacter</li>
</ul>
</div>
</div>
);
}

Expand Down Expand Up @@ -62,30 +116,77 @@ function Presentation() {
);
}

// function Description() {
// return (
// <section className="bg-[#5674AA]">
// <div className="flex flex-col md:grid md:grid-cols-3 lg:grid-cols-7 gap-4 md:gap-8 lg:gap-10 px-4 md:px-8 py-8">
// <div className="bg-white rounded-lg p-4 md:order-2 md:col-span-2 lg:col-start-4 lg:col-span-3 md:flex md:items-center">
// <p className="uppercase text-[#282626] text-xl md:text-2xl lg:text-3xl text-center font-bold">
// Pourquoi choisir notre système ?
// </p>
// </div>
// <div className="bg-[#181E34] p-4 flex flex-col gap-2 md:order-1 lg:col-start-2 lg:col-span-2">
// <div className="flex items-center gap-2">
// <SlEnergy className="size-6 text-[#FFFF00]" />
// <h1 className="text-base font-bold italic lg:text-xl">Gagnez en efficacité</h1>
// </div>
// <p className="text-sm lg:text-base">
// Que ce soit pour la numérisation d'archives, la gestion de vos
// factures, ou pour des projets académiques, l'OCR transforme vos
// documents en quelques secondes.
// </p>
// </div>
// {/* <div className="md:order-3 md:col-span-2 lg:col-start-2 lg:col-span-3"> */}
// <img src={fileConversion} alt="" className="md:order-3 md:col-span-2 lg:col-start-2 lg:col-span-3" />
// {/* </div> */}
// <div className="bg-[#181E34] p-4 flex flex-col gap-2 md:order-4 lg:col-span-2">
// <div className="flex items-center gap-3">
// <TfiReload className="size-6 text-[#4774FD]" />
// <h1 className="text-base font-bold italic lg:text-xl">
// Améliorez votre productivité
// </h1>
// </div>
// <p className="text-sm lg:text-base">
// Extrayez rapidement des informations de grandes quantités de
// documents sans effort, et accédez à des données modifiables et
// indexables.
// </p>
// </div>
// </div>
// </section>
// );
// }

function Description() {
return (
<section className="bg-[#5674AA]">
<div className="flex flex-col md:grid md:grid-cols-3 lg:grid-cols-7 gap-4 lg:gap-10 md:gap-8 px-4 md:px-8 py-8">
<div className="bg-white rounded-sm p-4 md:order-2 md:col-span-2 lg:col-start-4 lg:col-span-3 md:flex md:items-center">
<p className="uppercase text-[#282626] text-xl md:text-2xl lg:text-3xl text-center m-auto font-bold">
<section className="bg-[#5674AA] w-full py-8 px-4 md:px-8 lg:py-10">
<div className="flex flex-col md:grid md:grid-cols-[1fr_1fr] lg:grid-cols-7 justify-center items-center gap-10">
<div className="bg-white md:flex md:items-center max-w-72 md:max-w-none md:h-full rounded-md p-4 md:order-1 lg:col-start-2 lg:col-span-2">
<p className="uppercase text-[#282626] text-xl md:text-2xl lg:text-3xl text-center font-bold">
Pourquoi choisir notre système ?
</p>
</div>
<div className="bg-[#181E34] p-4 flex flex-col gap-2 md:order-1 lg:col-start-2 lg:col-span-2">
<div className="bg-[#181E34] flex flex-col p-4 max-w-72 md:max-w-none md:h-full gap-3 md:order-2 lg:col-start-4 lg:col-span-3">
<div className="flex items-center gap-2">
<SlEnergy className="size-6 text-[#FFFF00]" />
<h1 className="text-base font-bold italic lg:text-xl">Gagnez en efficacité</h1>
<h1 className="text-base font-bold italic lg:text-xl">
Gagnez en efficacité
</h1>
</div>
<p className="text-sm lg:text-base">
Que ce soit pour la numérisation d'archives, la gestion de vos
factures, ou pour des projets académiques, l'OCR transforme vos
documents en quelques secondes.
</p>
</div>
<div className="md:order-3 md:col-span-2 lg:col-start-2 lg:col-span-3">
<img src={fileConversion} alt="" className="size-full" />
<div className="max-w-72 md:max-w-none md:h-full md:order-4 lg:col-start-5 lg:col-span-2">
<img
src={fileConversion}
alt=""
className="object-contain md:object-cover lg:object-contain size-full"
/>
</div>
<div className="bg-[#181E34] p-4 flex flex-col gap-2 md:order-4 lg:col-span-2">
<div className="bg-[#181E34] flex flex-col gap-3 p-4 max-w-72 md:max-w-none md:h-full md:order-3 lg:col-start-2 lg:col-span-3">
<div className="flex items-center gap-3">
<TfiReload className="size-6 text-[#4774FD]" />
<h1 className="text-base font-bold italic lg:text-xl">
Expand Down

0 comments on commit dab2154

Please sign in to comment.