WrenchBoard/WrenchBoardMainSite2025
2
0
Fork 0
Code Issues Pull Requests Releases Activity

added home nav

Browse Source
This commit was merged in pull request #6.
This commit is contained in:
victorAnumudu
2024-07-30 19:07:27 +01:00
parent 137c309765
commit 9e72f3d893
5 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Mobile/Drawer.js
+5 -18
View File
@@ -1,23 +1,10 @@
"use client"
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import logo from '../assets/images/wrenchboard-logo-text.png';
import getConfig from "../../Config/config"; // './../../Config/config'
import Image from 'next/image';
function Drawer({ drawer, action }) {
var site = getConfig()[0];
const [itemSize, setSize] = useState('0px');
const [item, setItem] = useState('home');
const handler = (e, value) => {
e.preventDefault();
const getItems = document.querySelectorAll(`#${value} li`).length;
if (getItems > 0) {
setSize(`${43 * getItems}px`);
setItem(value);
}
};
return (
<>
<div
@@ -35,7 +22,7 @@ function Drawer({ drawer, action }) {
</a>
</div>
<div className="offcanvas-brand text-center mb-40">
<img src={logo} alt="WrechBoard" />
<Image width='260' height='57' src={logo} alt="WrechBoard" />
</div>
<div id="menu" className="text-left ">
<ul className="offcanvas_main_menu">
@@ -53,10 +40,10 @@ function Drawer({ drawer, action }) {
id="service"
className="menu-item-has-children active"
>
<Link to="/service">Service</Link>
<a href="/service">Service</a>
</li>
<li>
<Link to="/about-us">About Us</Link>
<a href="/about-us">About Us</a>
</li>
@@ -66,7 +53,7 @@ function Drawer({ drawer, action }) {
id="contact"
className="menu-item-has-children active"
>
<Link to="/contact">Contact</Link>
<a href="/contact">Contact</a>
</li>
</ul>
</div>
app/components/HomeOne.js
+2 -7
View File
@@ -1,12 +1,10 @@
import React from 'react';
import useToggle from '../Hooks/useToggle';
// import BackToTop from '../BackToTop';
import Drawer from '../Mobile/Drawer';
import HomeNav from './navigation/HomeNav'
import BlogHomeOne from './BlogHomeOne';
// import FeaturesHomeOne from './FeaturesHomeOne';
import FooterHomeOne from './FooterHomeOne';
import HeroHomeOne from './HeroHomeOne';
// import HomeOneHeader from './HomeOneHeader';
import ServicesHomeOne from './ServicesHomeOne';
import TrafficHomeOne from './TrafficHomeOne';
import TrafficHomeTwo from './TrafficHomeTwo';
@@ -19,12 +17,9 @@ import NextAfterHero from './NextAfterHero';
function HomeOne() {
// needed const [drawer, drawerAction] = useToggle(false);
return (
<>
{/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
<div className='text-center'>THIS IS HOME </div>
<HomeNav />
<HeroHomeOne />
<AfterHero />
<NextAfterHero />
app/components/HomeOneHeader.js
+8 -9
View File
@@ -1,12 +1,11 @@
"use client"
import React, { useEffect } from 'react';
import logo from '../../assets/images/wrenchboard-logo-text.png';
import StickyMenu from '../../lib/StickyMenu';
import Navigation from '../Navigation';
import getConfig from './../../Config/config'
import { Link } from 'react-router-dom';
import logo from '../assets/images/wrenchboard-logo-text.png';
import StickyMenu from '../lib/StickyMenu';
import Navigation from './navigation/Navigation';
import Image from 'next/image';
function HomeOneHeader({ action, showLogoOnly = false }) {
var site = getConfig()[0];
useEffect(() => {
StickyMenu();
}, []);
@@ -17,9 +16,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
<div className="row align-items-center">
<div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
<div className="appie-logo-box">
<Link to="/">
<img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
</Link>
<a href="/">
<Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
</a>
</div>
</div>
app/components/navigation/HomeNav.js
+15
View File
@@ -0,0 +1,15 @@
"use client"
import React from 'react'
import useToggle from '../../Hooks/useToggle'
import HomeOneHeader from '../HomeOneHeader'
import Drawer from '../../Mobile/Drawer'
export default function HomeNav() {
const [drawer, drawerAction] = useToggle(false);
return (
<>
<Drawer drawer={drawer} action={drawerAction.toggle} />
<HomeOneHeader action={drawerAction.toggle} />
</>
)
}
app/components/navigation/Navigation.js
+34
View File
@@ -0,0 +1,34 @@
import React from 'react';
function Navigation() {
return (
<>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about-us">About</a>
</li>
{/* <li>
<a href="#">
Resources <i className="fal fa-angle-down" />
</a>
<ul className="sub-menu">
<li>
<Link to="/about-us">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/faq">FAQs</Link>
</li>
</ul>
</li> */}
</ul>
</>
);
}
export default Navigation;