Add responsive homepage navigation menu for better section navigation.

opsimate-docs/src/components/NavMenu.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import styles from './NavMenu.module.css';
+
+export default function NavMenu() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const sections = [
+    { id: 'features', label: 'Features'},
+    // { id: 'integrations', label: 'Integrations' },
+    { id: 'community', label: 'Community'},
+    // { id: 'contact', label: 'Contact' },
+  ];
+
+  return (
+    <nav className={styles.navMenu}>
+      {/* Mobile Toggle Button */}
+      <button
+        className={styles.menuToggle}
+        aria-label="Toggle menu"
+        onClick={() => setMenuOpen(!menuOpen)}
+      >
+        <span className={styles.bar}></span>
+        <span className={styles.bar}></span>
+        <span className={styles.bar}></span>
+      </button>
+
+      {/* Menu Links */}
+      <ul className={`${styles.menuList} ${menuOpen ? styles.open : ''}`}>
+        {sections.map((section) => (
+          <li key={section.id}>
+            <a
+              href={`#${section.id}`}
+              onClick={() => setMenuOpen(false)} // close on link click (mobile)
+            >
+              {section.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

opsimate-docs/src/components/NavMenu.module.css

@@ -0,0 +1,89 @@
+.navMenu {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  background-color: var(--ifm-background-surface-color);
+  color: var(--ifm-font-color-base);
+  z-index: 90;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* 🔗 Menu links (default desktop) */
+.menuList {
+  list-style: none;
+  display: flex;
+  gap: 2rem;
+  margin: 0;
+  padding: 0;
+}
+
+.menuList a {
+  text-decoration: none;
+  color: var(--ifm-font-color-base);
+  font-weight: 500;
+  transition: color 0.2s ease, border-bottom 0.2s ease;
+  padding-bottom: 3px;
+}
+
+.menuList a:hover {
+  color: var(--ifm-color-primary);
+  border-bottom: 2px solid var(--ifm-color-primary);
+}
+
+/* 🍔 Hamburger button (hidden on desktop) */
+.menuToggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.bar {
+  width: 22px;
+  height: 2px;
+  background-color: var(--ifm-font-color-base);
+  margin: 3px 0;
+  transition: 0.3s;
+}
+
+/* 📱 Responsive styles */
+@media (max-width: 768px) {
+  .navMenu {
+    justify-content: space-between;
+  }
+
+  .menuToggle {
+    display: flex;
+  }
+
+  .menuList {
+    display: none;
+    position: absolute;
+    top: calc(var(--ifm-navbar-height) + 50px);
+    left: 0;
+    right: 0;
+    background-color: var(--ifm-background-surface-color);
+    flex-direction: column;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--ifm-toc-border-color);
+  }
+
+  .menuList.open {
+    display: flex;
+  }
+
+  .menuList li {
+    margin: 0.75rem 0;
+  }
+}
+

opsimate-docs/src/pages/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import styles from './index.module.css';
+import NavMenu from '../components/NavMenu';
 
 // Icons with OpsiMate blue theme
 const GettingStartedIcon = () => (
@@ -90,6 +91,7 @@ export default function Home() {
 
   return (
     <Layout title="OpsiMate" description="Unified Service Monitoring & Management Platform">
+       <NavMenu />  
       <main className={styles.hero}>
         <div className="container">
           <div className={styles.heroContent}>
@@ -101,7 +103,7 @@ export default function Home() {
           </div>
 
           {/* Feature Cards Section */}
-          <div className={styles.featuresSection}>
+          <div id="features" className={styles.featuresSection}>
             <h2 className={styles.featuresTitle}>Explore the Docs</h2>
             <div className={styles.featuresGrid}>
               {features.map((feature, index) => (
@@ -111,7 +113,7 @@ export default function Home() {
           </div>
 
           {/* Community Section with icons */}
-          <div className={styles.communitySection}>
+          <div  id="community"  className={styles.communitySection}>
             <h2 className={styles.communityTitle}>Join Our Community</h2>
             <p className={styles.communityDescription}>
               Have questions? Join our Slack Community or check out our GitHub repository.