bettergovph
diff --git a/‎src/components/layout/Navbar.tsx‎
Lines changed: 9 additions & 2 deletions b/‎src/components/layout/Navbar.tsx‎
Lines changed: 9 additions & 2 deletions
diff --git a/‎src/hooks/use-resize-observer.ts‎
Lines changed: 43 additions & 0 deletions b/‎src/hooks/use-resize-observer.ts‎
Lines changed: 43 additions & 0 deletions
@@ -5,17 +5,19 @@ import {
   SearchIcon,
   XIcon,
 } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { mainNavigation } from '../../data/navigation';
 import { LANGUAGES } from '../../i18n/languages';
 import { LanguageType } from '../../types';
+import { useResizeObserver } from '@/hooks/use-resize-observer';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const { t, i18n } = useTranslation('common');
+  const { ref, height } = useResizeObserver();
 
   const toggleMenu = () => {
     setIsOpen(!isOpen);
@@ -37,8 +39,13 @@ const Navbar: React.FC = () => {
     i18n.changeLanguage(newLanguage);
   };
 
+  useEffect(() => {
+    // Add scroll padding to prevent the sticky header from obscuring the content
+    document.documentElement.style.scrollPaddingTop = `${height}px`;
+  }, [height]);
+
   return (
-    <nav className='bg-white shadow-xs sticky top-0 z-50'>
+    <nav ref={ref} className='bg-white shadow-xs sticky top-0 z-50'>
       {/* Top bar with language switcher and additional links */}
       <div className='border-b border-gray-200'>
         <div className='container mx-auto px-4 flex justify-end items-center h-10'>
 
@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+/**
+ * useResizeObserver
+ *
+ * A hook that observes size changes of a target element.
+ *
+ * @param targetRef - React ref pointing to the element you want to observe
+ * @returns size object {width, height}
+ */
+export function useResizeObserver<T extends HTMLElement>() {
+  const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const target = ref.current;
+    if (!target) return;
+
+    const observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentRect) {
+          setSize({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+          });
+        }
+      }
+    });
+
+    observer.observe(target);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+
+  return { ref, width: size.width, height: size.height };
+}