added sidebar

ahmetcanisik · Jul 3, 2024 · cc8f8b1 · cc8f8b1
1 parent 793edb1
commit cc8f8b1
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -38,8 +38,10 @@
     "fvuarjs": "^1.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-lazy-load-image-component": "^1.6.2",
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
+    "react-tooltip": "^5.27.0",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,40 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { Home, Test, ChangeLog, Error } from './pages';
+import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
+import {ChangeLog, Error, Home, Test} from "./pages";
+import Header from "./components/header";
+import Footer from "./components/footer";
+import {PreferencesProvider, usePath} from "./components/hooks";
+import {configurationMetaTags, stored} from "./components/lib/utilities";
+
 function App() {
+    const path = usePath();
+    let pageName;
+
+    if (path === "/") {
+        pageName = "home";
+    } else {
+        pageName = path.replace('/', '')
+    }
+
+    configurationMetaTags({
+        title: stored.cl.page[pageName].meta.title,
+        description: stored.cl.page[pageName].meta.description
+    })
+
     return (
-        <Router>
-            <Routes>
-                <Route path='/' element={<Home />} />
-                <Route path='/update-notes' element={<ChangeLog />} />
-                <Route path="/test" element={<Test />} />
-                <Route path="*" element={<Error />} />
-            </Routes>
-        </Router>
+        <PreferencesProvider>
+            <Header />
+            <main className="box">
+                <Router>
+                    <Routes>
+                        <Route path='/' element={<Home />} />
+                        <Route path='/update-notes' element={<ChangeLog />} />
+                        <Route path="/test" element={<Test />} />
+                        <Route path="*" element={<Error />} />
+                    </Routes>
+                </Router>
+            </main>
+            <Footer />
+        </PreferencesProvider>
     );
 }
 

diff --git a/src/Layout.js b/src/Layout.js
diff --git a/src/components/header.js b/src/components/header.js
@@ -1,27 +1,70 @@
 import { stored, Icon } from './lib/utilities';
 import { content } from './lib/data';
-import { useLocation } from 'react-router-dom';
+import Image from './image';
+import { Tooltip } from "react-tooltip";
 import { useRef, useState, useEffect } from "react";
 import { useUpdatePreferences, usePreferences } from "./hooks";
 
+function addOpactiyToSite(remove = false) {
+    if (remove) {
+        document.querySelectorAll('.outbox, .box').forEach(box => {
+            box.classList.remove('opacity-50');
+        })
+    } else {
+        document.querySelectorAll('.outbox, .box').forEach(box => {
+            if (box.classList.contains('opactiy-50')) {
+                box.classList.remove('opacity-50');
+            } else {
+                box.classList.add('opacity-50');
+            }
+        })
+    }
+}
+
 export default function Header() {
+    const [showSideBar, setShowSideBar] = useState(false);
+    const [innerWidth, setInnerWeight] = useState(window.innerWidth);
+    const sidebar = useRef();
+    useEffect(() => {
+        const handleResize = () => {
+            setInnerWeight(window.innerWidth);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    const openDialog = (e) => {
+        if (sidebar.current.classList.contains("show")) {
+            sidebar.current.classList.remove('show');
+            addOpactiyToSite(true)
+            setShowSideBar(false)
+        } else {
+            sidebar.current.classList.add('show');
+            addOpactiyToSite()
+            setShowSideBar(true)
+        }
+    }
     return (
-        <header className="header outbox">
-            <div className="bar">
-                <Logo />
-                <NavBar />
-                <Dialog />
-            </div>
-        </header>
+        <>
+            <header className="header outbox">
+                <div className="bar">
+                    <Logo/>
+                    {innerWidth >= 629 && <NavBar/>}
+                    <button className="openLangDialog btn" onClick={openDialog}><Icon
+                        icon="hamburger"/> {innerWidth >= 629 && stored.cl.header.preferences}
+                    </button>
+                </div>
+            </header>
+            <SideBar referance={sidebar} element={sidebar} className={showSideBar ? "show" : ''} showMobileNavbar={innerWidth <= 628 && true}/>
+        </>
     );
 }
 
 function Logo() {
-    const path = useLocation();
+    const path = window.location;
     return (
         <hgroup>
             <a href='/' target={path.pathname === '/' && '_blank'} className='logos'>
-                <img src="/logo192.png" width="64" height="64" alt="fvuarJS" />
+                <Image image={{src: "/logo192.png", width: "64", height: "64", alt: "fvuarJS"}}/>
             </a>
             <a href='/' target={path.pathname === '/' && '_blank'} className='logo-text'>
                 <span className='logo'>./fvuar<span className='js-text'>JS</span></span>
@@ -32,47 +75,34 @@ function Logo() {
 }
 
 function NavBar({ className }) {
-    const path = useLocation();
+    const path = window.location;
     return (
         <nav className={className}>
             <ul className="navbar">
                 { className && <h3 className='text-left'><Icon icon="document" /> {stored.cl.header.menu.title}</h3> }
-                <li><a href='/test' className={`btn${path.pathname === "/test" ? '-active' : ''}`}>{stored.cl.header.menu.button.test}</a></li>
-                <li><a href='/update-notes' className={`btn${path.pathname === "/update-notes" ? '-active' : ''}`}>{stored.cl.header.menu.button.notes}</a></li>
+                <li><a href='/test' data-tooltip-id={"testPageTooltip"+className} data-tooltip-content={stored.cl.header.menu.button.test} className={`btn${path.pathname === "/test" ? '-active' : ''}`}>{stored.cl.header.menu.button.test}</a></li>
+                <li><a href='/update-notes' data-tooltip-id={"updateNotesPageTooltip"+className} data-tooltip-content={stored.cl.header.menu.button.notes} className={`btn${path.pathname === "/update-notes" ? '-active' : ''}`}>{stored.cl.header.menu.button.notes}</a></li>
+                <Tooltip id={"testPageTooltip"+className} />
+                <Tooltip id={"updateNotesPageTooltip"+className} />
             </ul>
         </nav>
     );
 }
 
-function Dialog() {
-    const [innerWidth, setInnerWeight] = useState(window.innerWidth);
-    useEffect(() => {
-        const handleResize = () => {
-            setInnerWeight(window.innerWidth);
-        };
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    const dialog = useRef();
-    const openDialog = () => {
-        dialog.current.showModal();
-    }
-    const closeDialog = () => {
-        dialog.current.close();
+function SideBar({ referance, element, className, showMobileNavbar = false }) {
+    const closeSideBar = () => {
+        addOpactiyToSite(true)
+        element.current.classList.remove('show')
     }
-
     return (
-        <>
-            <button className="openLangDialog btn" title={stored.cl.header.preferences} onClick={openDialog}><Icon icon="preferences"/> {innerWidth >= 380 && stored.cl.header.preferences} </button>
-            <dialog ref={dialog}>
-                <h2 className="text-center"><Icon icon="preferences"/> {stored.cl.header.preferences}</h2>
-                <LangPanel/>
-                <ThemePanel/>
-                { innerWidth <= 628 && <NavBar className="mobile-bar" /> }
-                <button type="button" id="closeLangDialog" className="btn close" onClick={closeDialog} autoFocus>{stored.cl.header.select_language.close}</button>
-            </dialog>
-        </>
-    );
+        <div ref={referance} className={`sidebar ${className}`}>
+            <button className="btn close-sidebar" onClick={closeSideBar}><Icon icon="close" /></button>
+            <h2 className="text-center"><Icon icon="preferences"/> {stored.cl.header.preferences}</h2>
+            <LangPanel/>
+            <ThemePanel/>
+            {showMobileNavbar && <NavBar className="mobile-bar"/>}
+        </div>
+    )
 }
 
 function LangPanel() {

diff --git a/src/components/hooks.js b/src/components/hooks.js
@@ -47,4 +47,4 @@ export const useUpdatePreferences = () => {
     return updatePreferences;
 };
 
-
+export function usePath() {return window.location.pathname};
diff --git a/src/components/image.js b/src/components/image.js
@@ -0,0 +1,8 @@
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+export default function Image({ image }) {
+    return (
+        <>
+            <LazyLoadImage src={image.src} alt={image.alt} width={image.width} height={image.height} />
+        </>
+    )
+}
diff --git a/src/components/lib/utilities.js b/src/components/lib/utilities.js
@@ -33,11 +33,18 @@ export function Icon({ icon, width = "24", height = "24" }) {
         case 'document':
             svg = <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6"><path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>          
             break;
+        case 'hamburger':
+            svg = <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} fill="none" viewBox="0 0 24 24" strokeWidth={1.5}stroke="currentColor" className="size-6"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
+            break;
+        case 'close':
+            svg = <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
+            break;
         default:
             break;
     }
     return svg;
 }
+
 export function configurationMetaTags({title = "fvuar.js.org", description = "Simple, Fast and Modern Alert Library"}) {
     const titleTag = document.querySelector('title');
     const descriptionTag = document.querySelector('meta[name="description"]');

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
 import './styles/global.css';
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />);
diff --git a/src/pages.js b/src/pages.js
@@ -1,34 +1,9 @@
-import Layout from './Layout';
 import Welcome from './components/welcome';
 import UpdateNotes from './components/updateNotes';
 import TestArea from './components/testArea';
 import NotFound from './components/error';
 
-export function Home() {
-    return (
-        <Layout page="home">
-            <Welcome />
-        </Layout>
-    );
-}
-export function ChangeLog() {
-    return (
-        <Layout page="update-notes">
-            <UpdateNotes />
-        </Layout>
-    );
-}
-export function Test() {
-    return (
-        <Layout page="test">
-            <TestArea />
-        </Layout>
-    );
-}
-export function Error() {
-    return (
-        <Layout page="404">
-            <NotFound />
-        </Layout>
-    );
-}
+export function Home() {return (<Welcome />)}
+export function ChangeLog() {return (<UpdateNotes />)}
+export function Test() {return (<TestArea />)}
+export function Error() {return (<NotFound />);}