@qobo/banner 1.0.7 → 1.0.9

package/README.md

@@ -31,6 +31,39 @@ export default function App() {
 - **Error resilient**: Defaults to visible if API fails
 - **Layout shift prevention**: Initializes as visible before API response
 - **Responsive**: Works on all screen sizes
+- **Navbar positioning**: Sets CSS variable `--qobo-banner-height` (0px when hidden, 50px when visible) for sticky navbar positioning
+- **Sticky banner**: Uses sticky positioning so navbar can stick below it
+
+## Navbar Positioning
+
+The banner automatically sets a CSS variable `--qobo-banner-height` on the document root that you can use for sticky navbar positioning:
+
+- When banner is visible: `--qobo-banner-height` is `50px`
+- When banner is hidden: `--qobo-banner-height` is `0px`
+
+### Using with Tailwind CSS
+
+For your navbar component, use the CSS variable in your sticky positioning:
+
+```jsx
+<nav className="sticky z-[60] bg-white border-b" style={{ top: 'var(--qobo-banner-height, 0px)' }}>
+  {/* Navbar content */}
+</nav>
+```
+
+Or using Tailwind's arbitrary values (requires Tailwind 3.1+):
+
+```jsx
+<nav className="sticky z-[60] bg-white border-b" style={{ top: 'var(--qobo-banner-height)' }}>
+  {/* Navbar content */}
+</nav>
+```
+
+This ensures:
+- When `showBanner` is `true`: Navbar sticks below the banner (at 50px from top)
+- When `showBanner` is `false`: Navbar sticks to the top (at 0px from top)
+
+**Important**: The banner uses `z-index: 50` and sticky positioning. Your navbar should use a higher z-index (e.g., `z-60` or `z-[60]`) to stay visible when scrolling.
 
 ## Environment Variables
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qobo/banner",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Shared Qobo banner component for all generated projects",
   "type": "module",
   "main": "dist/index.js",

package/src/QoboBanner.jsx

@@ -12,6 +12,8 @@ import React, { useState, useEffect } from 'react';
  * - Defaults to visible on error
  * - Links to https://qobo.dev in a new tab
  * - Has consistent styling across all projects
+ * - Sets CSS variable --qobo-banner-height for navbar positioning (0px when hidden, 50px when visible)
+ * - Banner uses sticky positioning so navbar can stick below it
  */
 export function QoboBanner({ apiKey, apiBaseUrl }) {
   const [isVisible, setIsVisible] = useState(false); // Start hidden until API responds
@@ -64,63 +66,72 @@ export function QoboBanner({ apiKey, apiBaseUrl }) {
     fetchBannerVisibility();
   }, [apiKey, apiBaseUrl]);
 
+  // Set CSS variable for banner height (always set, even when hidden)
+  // Navbars can use: top: var(--qobo-banner-height, 0px) for sticky positioning
+  useEffect(() => {
+    const bannerHeight = isVisible && !isLoading ? BANNER_HEIGHT : 0;
+    document.documentElement.style.setProperty('--qobo-banner-height', `${bannerHeight}px`);
+    
+    return () => {
+      // Cleanup: reset to 0 when component unmounts
+      document.documentElement.style.setProperty('--qobo-banner-height', '0px');
+    };
+  }, [isVisible, isLoading, BANNER_HEIGHT]);
+
   if (isLoading) return null;
   if (!isVisible) return null;
 
   return (
-    <>
-      <div aria-hidden="true" style={{ height: `${BANNER_HEIGHT}px`, width: '100%' }} />
-      <div
-        className="w-full bg-gradient-to-r from-cyan-400 to-blue-500 text-white py-2 px-4 text-center text-sm font-medium shadow-md"
+    <div
+      className="w-full bg-gradient-to-r from-cyan-400 to-blue-500 text-white py-2 px-4 text-center text-sm font-medium shadow-md"
+      style={{
+        position: 'sticky',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 50,
+        height: `${BANNER_HEIGHT}px`,
+        background: 'linear-gradient(90deg, #FF7A2F 0%, #46C6B9 100%)',
+        color: '#F1F5F9',
+        padding: '12px 16px',
+        textAlign: 'center',
+        fontSize: '0.95rem',
+        fontWeight: '600',
+        letterSpacing: '0.01em',
+        fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        transition: 'all 0.3s ease',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      Made with{' '}
+      <span
+        style={{
+          color: '#FF1744',
+          display: 'inline-block',
+          margin: '0 0.35rem',
+        }}
+      >
+        ❤️
+      </span>{' '}
+      by{' '}
+      <a
+        href="https://qobo.dev"
+        target="_blank"
+        rel="noopener noreferrer"
         style={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 9999,
-          height: `${BANNER_HEIGHT}px`,
-          background: 'linear-gradient(90deg, #FF7A2F 0%, #46C6B9 100%)',
           color: '#F1F5F9',
-          padding: '12px 16px',
-          textAlign: 'center',
-          fontSize: '0.95rem',
-          fontWeight: '600',
-          letterSpacing: '0.01em',
-          fontFamily: '"Inter", "Segoe UI", system-ui, -apple-system, sans-serif',
-          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-          transition: 'all 0.3s ease',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          textDecoration: 'underline',
+          fontWeight: '700',
+          cursor: 'pointer',
         }}
+        className="hover:text-cyan-100 transition-colors"
       >
-        Made with{' '}
-        <span
-          style={{
-            color: '#FF1744',
-            display: 'inline-block',
-            margin: '0 0.35rem',
-          }}
-        >
-          ❤️
-        </span>{' '}
-        by{' '}
-        <a
-          href="https://qobo.dev"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{
-            color: '#F1F5F9',
-            textDecoration: 'underline',
-            fontWeight: '700',
-            cursor: 'pointer',
-          }}
-          className="hover:text-cyan-100 transition-colors"
-        >
-          qobo.dev
-        </a>
-      </div>
-    </>
+        qobo.dev
+      </a>
+    </div>
   );
 }
 

package/src/index.js

@@ -1 +1,2 @@
 export { QoboBanner, default } from './QoboBanner.jsx';
+export { BannerProvider, useBannerVisibility } from './BannerContext.jsx';