/* Navigation — ported from src/components/Navigation.jsx */ const { useState, useEffect, useRef } = React; const { motion, AnimatePresence, useScroll, useMotionValueEvent } = window.Motion; const BLUE = '#02528A'; const GOLD = '#FDC327'; const RED = '#E8192C'; const NAV_DATA = [ { id: 'home', label: 'Home', href: 'index.html', internal: true }, { id: 'about', label: 'About Us', items: [ { label: 'Overview', href: 'about-us.html', internal: true }, { label: 'RR-FILA group', href: 'rr-fila-group.html', internal: true }, { label: 'Infrastructure', href: 'infrastructure.html', internal: true }, ], }, { id: 'investor', label: 'Investor Relations', href: 'investor-relations.html', internal: true, items: [ { label: 'Financial Highlights', group: true, items: [ { label: 'Financial Statements', href: 'financial-statements.html', internal: true }, { label: 'Financial Statement of Subsidiaries and Associate', href: 'financial-statement-of-subsidiaries.html', internal: true }, { label: 'Investor Presentation and Transcripts', href: 'investor-presentation-transcripts.html', internal: true }, { label: 'Material Creditors', href: 'doc-viewer.html?src=https%3A%2F%2Fdomsindia.com%2Fpdf%2FInvestor_Relations%2FMaterial_Creditors.pdf&title=Material%20Creditors', internal: true }, { label: 'Industry Report', href: 'doc-viewer.html?src=https%3A%2F%2Fdomsindia.com%2Fpdf%2FInvestor_Relations%2FIndustry_Report.pdf&title=Industry%20Report', internal: true }, ] }, { label: 'Shareholders and Board of Directors', group: true, items: [ { label: 'Shareholding Pattern', href: 'shareholding-pattern.html', internal: true }, { label: 'Board of Directors', href: 'board-of-directors.html', internal: true }, { label: 'Board Committees', href: 'board-committees.html', internal: true }, ] }, { label: 'Disclosure Under Regulation 46 of SEBI (LODR)', href: 'disclosure-regulation-46.html', internal: true }, { label: 'Governance', group: true, items: [ { label: 'Policies', href: 'policies.html', internal: true }, ] }, { label: 'Dividend', group: true, items: [ { label: 'Final Dividend FY 2023-24', href: 'dividend.html', internal: true }, ] }, { label: 'Corporate Social Responsibility', href: 'corporate-social-responsibility.html', internal: true }, { label: 'Intimation to Stock Exchanges', href: 'intimation-to-stock-exchanges.html', internal: true }, { label: 'Postal Ballot', href: 'postal-ballot.html', internal: true }, { label: 'Employee Stock Option Plan', href: 'esop-disclosure.html', internal: true }, { label: 'Draft Red Herring Prospectus', href: 'draft-red-herring-prospectus.html', internal: true }, { label: 'Red Herring Prospectus', href: 'red-herring-prospectus.html', internal: true }, { label: 'Prospectus', href: 'prospectus.html', internal: true }, { label: 'Allotment Advertisement', href: 'doc-viewer.html?src=https%3A%2F%2Fdomsindia.com%2Fpdf%2FInvestor_Relations%2FDOMS_Industries_Limited_BoA_Ad.pdf&title=Allotment%20Advertisement', internal: true }, { label: 'Press Release', href: 'press-release.html', internal: true }, { label: 'Memorandum and Articles of Association', href: 'doc-viewer.html?src=https%3A%2F%2Fdomsindia.com%2Fpdf%2FInvestor_Relations%2FMemorandum_and_Articles_of_Association.pdf&title=Memorandum%20and%20Articles%20of%20Association', internal: true }, { label: 'Contact for Investor Grievance', href: 'contact-for-investor-grievance.html', internal: true }, ], }, { id: 'products', label: 'Products', mega: true, href: 'products.html', internal: true, categories: [ { name: 'Pencils & Accessories', color: '#F5A623', img: 'images/pencil.jpg', href: 'products.html#cat/pencils-accessories', internal: true }, { name: 'Pens & Writing', color: '#7B5EA7', img: 'images/pens.jpg', href: 'products.html#cat/pens-writing-instruments', internal: true }, { name: 'Drawing & Colouring', color: '#E8192C', img: 'images/Art-Range.webp', href: 'products.html#cat/drawing-colouring', internal: true }, { name: 'Math Instruments', color: BLUE, img: 'images/product-inxon.webp', href: 'products.html#cat/mathematical-drawing-instruments', internal: true }, { name: 'Paper Stationery', color: '#27AE60', img: 'images/product-brush.webp', href: 'products.html#cat/paper-stationery', internal: true }, { name: 'Gifting', color: '#E67E22', img: 'images/product-wax.webp', href: 'products.html#cat/gifting', internal: true }, ], }, { id: 'engage', label: 'Engage', items: [ { label: 'Blogs', href: 'blogs.html', internal: true }, { label: 'Media Coverage', href: 'media-coverage.html', internal: true }, { label: 'Events', href: 'events.html', internal: true }, { label: 'Videos', href: 'videos.html', internal: true }, ], }, { id: 'contact', label: 'Contact Us', href: 'contact-us.html', internal: true }, ]; const GLASS = { none: { background: 'transparent', backdropFilter: 'none', WebkitBackdropFilter: 'none', boxShadow: 'none', border: 'none', }, island: { background: 'rgba(255,255,255,0.07)', backdropFilter: 'blur(48px) saturate(500%) brightness(1.1)', WebkitBackdropFilter: 'blur(48px) saturate(500%) brightness(1.1)', boxShadow: [ 'inset 0 1.5px 0 rgba(255,255,255,0.65)', 'inset 0 -1px 0 rgba(255,255,255,0.1)', '0 20px 50px rgba(0,0,0,0.22)', '0 6px 20px rgba(0,0,0,0.1)', '0 0 0 0.5px rgba(255,255,255,0.18)', ].join(','), border: '1px solid rgba(255,255,255,0.26)', }, }; const dropGlass = { background: 'rgba(255,255,255,0.75)', backdropFilter: 'blur(48px) saturate(300%) brightness(1.05)', WebkitBackdropFilter: 'blur(48px) saturate(300%) brightness(1.05)', border: '1px solid rgba(255,255,255,0.4)', boxShadow: [ 'inset 0 1.5px 0 rgba(255,255,255,0.8)', '0 20px 60px rgba(2,82,138,0.15)', '0 6px 20px rgba(0,0,0,0.08)', ].join(','), }; function NavBtn({ label, hasArrow, isActive, onClick, restColor = 'rgba(15,30,70,0.80)' }) { const [hov, setHov] = useState(false); const lit = hov || isActive; return ( setHov(true)} onHoverEnd={() => setHov(false)} animate={{ y: lit ? -2 : 0 }} transition={{ type: 'spring', stiffness: 560, damping: 28 }} whileTap={{ scale: 0.96, y: 0 }} style={{ position: 'relative', padding: '11px 18px', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 5 }} > {lit && ( )} {label} {hasArrow && ( )} ); } const ddV = { hidden: { opacity: 0, y: -10, scale: 0.96 }, visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 420, damping: 32, staggerChildren: 0.045 } }, exit: { opacity: 0, y: -8, scale: 0.96, transition: { duration: 0.15 } }, }; const ddI = { hidden: { opacity: 0, x: -10 }, visible: { opacity: 1, x: 0, transition: { type: 'spring', stiffness: 500, damping: 36 } }, }; const FLY_ARROW = ( ); function SimpleDropdown({ items }) { const hasGroups = items.some(it => it.items); // ── Flyout style (Investor Relations): left list + right sub-panel ── if (hasGroups) { const firstGroup = items.find(it => it.items); const [activeG, setActiveG] = useState(firstGroup ? firstGroup.label : null); const [offset, setOffset] = useState(3); const active = items.find(it => it.label === activeG && it.items); const LEFT_W = 372, RIGHT_W = 360; return ( {/* left column — every IR item in order */}
{items.map((it, i) => { const isGroup = !!it.items; const isActive = isGroup && it.label === activeG; const last = i === items.length - 1; return isGroup ? (
{ setActiveG(it.label); setOffset(e.currentTarget.offsetTop); }} className="doms-flyrow" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 18px', cursor: 'default', borderBottom: last ? 'none' : '1px solid #edf1f4', background: isActive ? BLUE : 'transparent', color: isActive ? '#fff' : '#1e2933', }} > {it.label} {FLY_ARROW}
) : ( setActiveG(null)} className="doms-flyrow" style={{ display: 'block', padding: '12px 18px', textDecoration: 'none', borderBottom: last ? 'none' : '1px solid #edf1f4', fontSize: 14, fontWeight: 500, color: BLUE, lineHeight: 1.3, }} >{it.label} ); })}
{/* right column — sub-items of the active group */} {active && ( {active.items.map((sub, j) => ( {sub.label} ))} )} ); } // ── Simple list (About Us, Engage) ── return (
{items.map(it => (
{it.label}
{it.desc &&
{it.desc}
} ))} ); } const megaV = { hidden: { opacity: 0, y: -14, scale: 0.96 }, visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 380, damping: 30, staggerChildren: 0.055 } }, exit: { opacity: 0, y: -10, scale: 0.96, transition: { duration: 0.18 } }, }; const tileV = { hidden: { opacity: 0, y: 12 }, visible: { opacity: 1, y: 0, transition: { type: 'spring', stiffness: 460, damping: 32 } }, }; function MegaMenu({ categories }) { const [active, setActive] = useState(categories[0]); return (

Browse Categories

{categories.map(cat => { const sel = active?.name === cat.name; return ( setActive(cat)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10, textDecoration: 'none', border: `1.5px solid ${sel ? cat.color : 'transparent'}`, background: sel ? `${cat.color}12` : 'transparent', transition: 'border-color 0.15s, background 0.15s', }} > {cat.name} ); })}
View All Products
{active?.name} { e.currentTarget.style.opacity = '0'; }} />

{active?.name}

Explore →
); } function MobileMenu({ open, onClose }) { const [exp, setExp] = useState(null); const [gexp, setGexp] = useState({}); const toggleG = k => setGexp(s => ({ ...s, [k]: !s[k] })); const caret = (isOpen, color) => ( ); const leaf = (it, pad) => ( {it.label} ); return ( {open && ( {/* header — soft yellow gradient like the DOMS site */}
DOMS ✕
{NAV_DATA.map((item, i) => { const directHref = item.href || (item.mega ? item.mobileHref : null); const children = item.items || (item.mega ? item.categories.map(c => ({ label: c.name, href: c.href, internal: c.internal })) : null); return ( {(directHref && !children) ? ( {item.label} ) : ( <> {exp === item.id && ( {directHref && ( View {item.label} → )} {children.map(sub => sub.group ? (
{gexp[sub.label] && ( {sub.items.map(g => leaf(g, 40))} )}
) : leaf(sub, 24))} )} )} ); })}
DOMS Art League
)} ); } function Navigation() { const [active, setActive] = useState(null); const [island, setIsland] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const [heroDark, setHeroDark] = useState(true); // first hero slide (blue) is dark const navRef = useRef(null); const hoverTimer = useRef(null); const openMenu = id => { if (hoverTimer.current) clearTimeout(hoverTimer.current); setActive(id); }; const closeMenuSoon = () => { if (hoverTimer.current) clearTimeout(hoverTimer.current); hoverTimer.current = setTimeout(() => setActive(null), 160); }; const { scrollY } = useScroll(); useMotionValueEvent(scrollY, 'change', v => setIsland(v > 80)); useEffect(() => { const onColor = e => setHeroDark(!e.detail.light); window.addEventListener('doms-hero-color', onColor); return () => window.removeEventListener('doms-hero-color', onColor); }, []); useEffect(() => { const close = e => { if (navRef.current && !navRef.current.contains(e.target)) setActive(null); }; document.addEventListener('mousedown', close); return () => { document.removeEventListener('mousedown', close); }; }, []); const spring = { type: 'spring', stiffness: 280, damping: 28 }; /* over the hero (rest state), keep the nav light/white on every room colour for a consistent look */ const overHeroLight = !island; // always white nav elements over the hero const restColor = overHeroLight ? '#fff' : 'rgba(15,30,70,0.85)'; const logoFilter = 'drop-shadow(0 2px 10px rgba(0,0,0,0.18))'; return ( <>
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ flexShrink: 0, marginRight: island ? 10 : 0, textDecoration: 'none', position: 'relative', display: 'flex', alignItems: 'center', }}> {island && ( )}
{NAV_DATA.map(item => { const hasMenu = item.mega || item.items; const navTo = () => { if (item.internal) { const p = location.pathname; const here = p.endsWith(item.href) || (item.href === 'index.html' && (p.endsWith('/') || p.endsWith('index.html'))); if (here) window.scrollTo({ top: 0, behavior: 'smooth' }); else window.location.href = item.href; } else window.open(item.href, '_blank'); }; return (
hasMenu && openMenu(item.id)} onMouseLeave={() => hasMenu && closeMenuSoon()}> {!hasMenu ? ( ) : ( <> item.href ? navTo() : setActive(p => p === item.id ? null : item.id)} /> {active === item.id && ( item.mega ? : )} )}
); })}
{!island && ( DOMS Art League )} setMobileOpen(true)} whileHover={{ scale: 1.08 }} whileTap={{ scale: 0.92 }} style={{ display: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 8, marginLeft: 'auto', color: restColor }} className="doms-ham" >
{island && ( )} {active && ( setActive(null)} style={{ position: 'fixed', inset: 0, top: island ? 90 : 76, background: 'rgba(0,8,28,0.18)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', zIndex: -1, pointerEvents: 'all', }} /> )}
setMobileOpen(false)}/> ); } window.Navigation = Navigation;