Skip to content

sujata / advithconsulting.io-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 2127da8e by JayGuri
Options

Modified MobileHamburger to make the navigation mobile responsive.

1 parent 34251ec5
Inline Side-by-side
Showing 3 changed files with 546 additions and 19 deletions
layout/Header.js
......@@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import Image from "next/image"
import MobileHamburger from "./MobileHamburger"
const Header = () => {
const [menu, setMenu] = useState(true)
......@@ -106,6 +107,10 @@ const Header = () => {
<>
<div className="mega-menu-container">
{/* Mobile Hamburger only visible on mobile */}
<div className="mobile-hamburger-wrapper">
<MobileHamburger />
</div>
<div id="navbar" className="navbar-area">
<div className="zixon-nav">
<div className="container-fluid">
......
layout/MobileHamburger.js 0 → 100644
import { useState } from "react"
import Link from "next/link"
import Image from "next/image"
const clientServices = [
{
title: "Virtual Finance Office",
items: [
{ name: "Virtual CFO Services", href: "/client-servicing/cfo" },
{ name: "Virtual FC Services", href: "/client-servicing/cfo" },
{ name: "Book Closures and Audit Support", href: "/client-servicing/cfo" },
{ name: "Accounting Payroll & Compliance", href: "/client-servicing/cfo" },
],
},
{
title: "Advisory Services",
items: [
{ name: "Transaction Advisory", href: "/client-servicing/ta" },
{ name: "Risk Advisory", href: "/client-servicing/ta" },
{ name: "Business Advisory", href: "/client-servicing/ta" },
],
},
{
title: "GCC as a Service",
items: [],
},
{
title: "Digital Transformation",
items: [
{ name: "ITeC App", href: "/client-servicing/ba" },
{ name: "Digital Process Automation", href: "/client-servicing/ba" },
],
},
{
title: "Empowering Finance Consultants",
items: [{ name: "CA/CPA firm services", href: "/client-servicing/ba" }],
},
{
title: "Bespoke Services",
items: [
{ name: "Data analysis and reporting", href: "/client-servicing/ba" },
{ name: "Admin and Backend Support Services", href: "/client-servicing/ba" },
{ name: "PFM", href: "/client-servicing/ba" },
],
},
]
const knowledgeOptions = [
{ name: "Corpedia", href: "/corpedia" },
{ name: "Taxwire", href: "/taxwire" },
{ name: "Budget Panorama", href: "/budgetpanorama" },
{ name: "Blogs", href: "/blog" },
]
export default function MobileHamburger() {
const [open, setOpen] = useState(false)
const [openDropdown, setOpenDropdown] = useState("")
const [openClientService, setOpenClientService] = useState(null)
const handleDropdown = (name) => {
setOpenDropdown(openDropdown === name ? "" : name)
}
const handleClientService = (idx) => {
setOpenClientService(openClientService === idx ? null : idx)
}
return (
<nav className="mobile-hamburger-nav">
<div className="mobile-header-bar">
<Link href="/" className="mobile-logo-link" aria-label="Home">
<Image src="/images/logo.png" alt="Advith Consulting Logo" width={130} height={30} priority />
</Link>
<button
className={`hamburger-btn${open ? " open" : ""}`}
aria-label="Open menu"
onClick={() => setOpen((v) => !v)}
>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div className={`mobile-menu${open ? " show" : ""}`}>
<ul>
<li>
<Link href="/" onClick={() => setOpen(false)}>Home</Link>
</li>
<li>
<button
className="mobile-dropdown-btn"
onClick={() => handleDropdown("knowledge")}
aria-expanded={openDropdown === "knowledge"}
>
Knowledge
<span className={`arrow${openDropdown === "knowledge" ? " open" : ""}`}></span>
</button>
<ul className={`mobile-dropdown${openDropdown === "knowledge" ? " show" : ""}`}>
{knowledgeOptions.map((opt) => (
<li key={opt.name}>
<Link href={opt.href} onClick={() => setOpen(false)}>{opt.name}</Link>
</li>
))}
</ul>
</li>
<li>
<Link href="/people" onClick={() => setOpen(false)}>People</Link>
</li>
<li>
<button
className="mobile-dropdown-btn"
onClick={() => handleDropdown("clientservicing")}
aria-expanded={openDropdown === "clientservicing"}
>
Client Servicing
<span className={`arrow${openDropdown === "clientservicing" ? " open" : ""}`}></span>
</button>
<ul className={`mobile-dropdown${openDropdown === "clientservicing" ? " show" : ""}`}>
{clientServices.map((service, idx) => (
<li key={service.title}>
<button
className="mobile-dropdown-btn inner"
onClick={() => handleClientService(idx)}
aria-expanded={openClientService === idx}
>
{service.title}
{service.items.length > 0 && (
<span className={`arrow${openClientService === idx ? " open" : ""}`}></span>
)}
</button>
{service.items.length > 0 && (
<ul className={`mobile-dropdown inner${openClientService === idx ? " show" : ""}`}>
{service.items.map((item) => (
<li key={item.name}>
<Link href={item.href} onClick={() => setOpen(false)}>{item.name}</Link>
</li>
))}
</ul>
)}
</li>
))}
</ul>
</li>
<li>
<Link href="/industry" onClick={() => setOpen(false)}>Industry</Link>
</li>
<li>
<Link href="/career" onClick={() => setOpen(false)}>Careers</Link>
</li>
<li>
<Link href="/contact" onClick={() => setOpen(false)}>Contact Us</Link>
</li>
</ul>
</div>
</nav>
)
}
\ No newline at end of file
styles/styles.css
......@@ -952,15 +952,6 @@ Navbar Area CSS
.zixon-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
.zixon-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
color: var(--mainColor);
}
.zixon-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
opacity: 1;
margin-top: 0;
visibility: visible;
}
......@@ -4167,7 +4158,6 @@ Products Details Area CSS
position: relative;
top: -4px;
}
.products-details-desc .social-share li a {
line-height: 1;
font-size: 18px;
......@@ -7699,15 +7689,6 @@ Modal CSS
padding-left: 45px;
}
.productsQuickView .modal-content .products-content .products-add-to-cart .quantities .sub-title {
left: 0;
top: 50%;
display: block;
font-weight: 700;
position: absolute;
transform: translateY(-50%);
}
.productsQuickView .modal-content .products-content .products-add-to-cart .input-counter {
display: block;
max-width: 135px;
......@@ -8798,3 +8779,387 @@ ul.pagination.custom-pagination {
padding: 1rem;
}
}
@media (max-width: 991px) {
.mobile-hamburger-nav {
display: block;
position: relative;
z-index: 1002;
background: #fff;
width: 100%;
min-height: 56px;
}
.hamburger-btn {
display: flex;
flex-direction: column;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
position: absolute;
top: 8px;
right: 16px;
z-index: 1003;
}
.hamburger-btn span {
display: block;
height: 3px;
width: 28px;
background: #222;
margin: 4px 0;
border-radius: 2px;
transition: all 0.3s;
}
.hamburger-btn.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.open span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #fff;
z-index: 1001;
overflow-y: auto;
padding-top: 60px;
box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.mobile-menu.show {
display: block;
animation: fadeInMenu 0.2s;
}
@keyframes fadeInMenu {
from { opacity: 0; }
to { opacity: 1; }
}
.mobile-menu ul {
list-style: none;
padding: 0 0 32px 0;
margin: 0;
}
.mobile-menu ul > li {
border-bottom: 1px solid #eee;
padding: 0;
}
.mobile-menu ul > li > a,
.mobile-dropdown-btn {
display: flex;
align-items: center;
width: 100%;
padding: 18px 24px;
font-size: 1.1rem;
background: none;
border: none;
text-align: left;
color: #222;
font-weight: 500;
cursor: pointer;
outline: none;
transition: background 0.2s;
}
.mobile-menu ul > li > a:hover,
.mobile-dropdown-btn:hover {
background: #f5f5f5;
}
.mobile-dropdown-btn .arrow {
margin-left: auto;
border: solid #888;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
transform: rotate(45deg);
transition: transform 0.2s;
}
.mobile-dropdown-btn .arrow.open {
transform: rotate(-135deg);
}
.mobile-dropdown {
display: none;
background: #fafbfc;
padding: 0;
margin: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mobile-dropdown.show {
display: block;
animation: fadeInMenu 0.2s;
}
.mobile-dropdown li {
border-bottom: 1px solid #eee;
}
.mobile-dropdown li:last-child {
border-bottom: none;
}
.mobile-dropdown a {
display: block;
padding: 15px 40px;
font-size: 1rem;
color: #222;
background: none;
text-decoration: none;
transition: background 0.2s;
}
.mobile-dropdown a:hover {
background: #f0f0f0;
}
.mobile-dropdown-btn.inner {
padding-left: 40px;
font-size: 1rem;
font-weight: 400;
background: none;
border: none;
color: #222;
cursor: pointer;
outline: none;
width: 100%;
display: flex;
align-items: center;
transition: background 0.2s;
}
.mobile-dropdown-btn.inner .arrow {
margin-left: auto;
border-color: #bbb;
}
.mobile-dropdown.inner {
background: #f7f7f7;
border-top: none;
border-bottom: none;
padding: 0;
}
.mobile-dropdown.inner.show {
display: block;
}
.mobile-dropdown.inner li a {
padding-left: 56px;
font-size: 0.98rem;
}
}
@media (min-width: 992px) {
.mobile-hamburger-nav {
display: none !important;
}
}
@media (max-width: 991px) {
.navbar-area {
display: none !important;
}
.mobile-hamburger-wrapper {
display: block;
width: 100%;
background: #fff;
position: relative;
z-index: 1002;
min-height: 56px;
}
}
@media (min-width: 992px) {
.mobile-hamburger-wrapper {
display: none !important;
}
}
@media (max-width: 991px) {
.mobile-header-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 8px 12px;
min-height: 44px;
background: #fff;
border-bottom: 1px solid #e6e8ec;
position: relative;
z-index: 1003;
}
.mobile-logo-link {
display: flex;
align-items: center;
height: 32px;
min-width: 120px;
}
.mobile-logo-link img {
height: 28px;
width: auto;
max-width: 130px;
object-fit: contain;
display: block;
}
.hamburger-btn {
margin-left: auto;
background: none;
border: none;
outline: none;
box-shadow: none;
}
.hamburger-btn span {
background: #23243a;
border-radius: 2px;
}
.mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #f8f9fb;
z-index: 1001;
overflow-y: auto;
padding-top: 60px;
box-shadow: 0 8px 32px rgba(35,36,58,0.10);
border-radius: 0 0 18px 18px;
border: 1px solid #e6e8ec;
transition: box-shadow 0.2s;
}
.mobile-menu.show {
display: block;
animation: fadeInMenu 0.2s;
}
@keyframes fadeInMenu {
from { opacity: 0; }
to { opacity: 1; }
}
.mobile-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-menu ul > li {
border-bottom: 1px solid #e6e8ec;
padding: 0;
}
.mobile-menu ul > li:last-child {
border-bottom: none;
}
.mobile-menu ul > li > a,
.mobile-dropdown-btn {
display: flex;
align-items: center;
width: 100%;
padding: 16px 24px;
font-size: 1.09rem;
background: none;
border: none;
text-align: left;
color: #23243a;
font-weight: 600;
cursor: pointer;
outline: none;
transition: background 0.18s, color 0.18s;
border-radius: 0;
letter-spacing: 0.01em;
}
.mobile-menu ul > li > a:hover,
.mobile-dropdown-btn:hover,
.mobile-menu ul > li > a:focus,
.mobile-dropdown-btn:focus {
background: #f3f4f8;
color: #ff9000;
}
.mobile-dropdown-btn .arrow {
margin-left: auto;
border: solid #b0b3c6;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
transform: rotate(45deg);
transition: transform 0.2s;
}
.mobile-dropdown-btn .arrow.open {
transform: rotate(-135deg);
}
.mobile-dropdown {
display: none;
background: #f3f4f8;
padding: 0;
margin: 0;
border-top: 1px solid #e6e8ec;
border-bottom: 1px solid #e6e8ec;
border-radius: 0 0 14px 14px;
}
.mobile-dropdown.show {
display: block;
animation: fadeInMenu 0.2s;
}
.mobile-dropdown li {
border-bottom: 1px solid #e6e8ec;
}
.mobile-dropdown li:last-child {
border-bottom: none;
}
.mobile-dropdown a {
display: block;
padding: 15px 40px;
font-size: 1rem;
color: #23243a;
background: none;
text-decoration: none;
transition: background 0.18s, color 0.18s;
border-radius: 0;
font-weight: 500;
}
.mobile-dropdown a:hover,
.mobile-dropdown a:focus {
background: #e9eaf3;
color: #ff9000;
}
.mobile-dropdown-btn.inner {
padding-left: 40px;
font-size: 1rem;
font-weight: 500;
background: none;
border: none;
color: #23243a;
cursor: pointer;
outline: none;
width: 100%;
display: flex;
align-items: center;
transition: background 0.18s, color 0.18s;
border-radius: 0;
}
.mobile-dropdown-btn.inner .arrow {
margin-left: auto;
border-color: #b0b3c6;
}
.mobile-dropdown-btn.inner:hover,
.mobile-dropdown-btn.inner:focus {
background: #e9eaf3;
color: #ff9000;
}
.mobile-dropdown.inner {
background: #f8f9fb;
border-top: none;
border-bottom: none;
padding: 0;
border-radius: 0 0 10px 10px;
}
.mobile-dropdown.inner.show {
display: block;
}
.mobile-dropdown.inner li a {
padding-left: 56px;
font-size: 0.98rem;
border-radius: 0;
font-weight: 500;
}
.mobile-dropdown.inner li:last-child a {
padding-bottom: 15px;
}
/* Remove extra bottom padding from last menu item */
.mobile-menu ul > li:last-child > a {
padding-bottom: 16px;
}
}
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!