toolbar position

Author: josephfusco

examples/next/toolbar-demo/example-app/app/components/Toolbar.tsx

@@ -2,19 +2,27 @@
 
 import { useToolbar } from '@wpengine/hwp-toolbar/react';
 import { toolbar } from '@/lib/toolbar';
-import '@wpengine/hwp-toolbar/styles';
 import { useState, useEffect } from 'react';
 
 export function Toolbar() {
   const { state, nodes } = useToolbar(toolbar);
-  const [position, setPosition] = useState<'top' | 'bottom'>('bottom');
+  const [position, setPosition] = useState<'top' | 'bottom'>('top');
 
   useEffect(() => {
+    // Add body class for positioning
+    const position = toolbar.getConfig()?.position || 'bottom';
+    document.body.classList.add(`hwp-has-toolbar-${position}`);
+
     const unsubscribe = toolbar.subscribe(() => {
       const config = toolbar.getConfig();
       setPosition(config?.position || 'bottom');
     });
-    return unsubscribe;
+
+    return () => {
+      unsubscribe();
+      // Clean up body class
+      document.body.classList.remove(`hwp-has-toolbar-${position}`);
+    };
   }, []);
 
   const leftNodes = nodes.filter((node) => !node.position || node.position === 'left');

examples/next/toolbar-demo/example-app/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Toolbar } from './components/Toolbar';
 import './globals.css';
+import '@wpengine/hwp-toolbar/styles';
 
 export const metadata: Metadata = {
   title: 'Toolbar Demo - React Hooks',

examples/next/toolbar-demo/example-app/lib/toolbar.ts

@@ -5,6 +5,7 @@ import { Toolbar } from '@wpengine/hwp-toolbar';
  * This ensures the same toolbar state is shared across the app
  */
 export const toolbar = new Toolbar({
+  position: 'top',
   onPreviewChange: (enabled) => {
     console.log('Preview mode:', enabled);
     // In a real app, you'd integrate with Next.js draft mode here

packages/toolbar/src/core/VanillaRenderer.js

@@ -35,11 +35,30 @@ export class VanillaRenderer {
     }
 
     this.applyTheme();
+    this.addBodyClass();
     this.unsubscribe = this.toolbar.subscribe((nodes, state) => {
       this.render(nodes, state);
     });
   }
 
+  /**
+   * Add body class for toolbar positioning
+   * @private
+   */
+  addBodyClass() {
+    const position = this.config.position || 'bottom';
+    document.body.classList.add(`hwp-has-toolbar-${position}`);
+  }
+
+  /**
+   * Remove body class for toolbar positioning
+   * @private
+   */
+  removeBodyClass() {
+    const position = this.config.position || 'bottom';
+    document.body.classList.remove(`hwp-has-toolbar-${position}`);
+  }
+
   /**
    * Apply theme configuration to element
    * @private
@@ -313,5 +332,6 @@ export class VanillaRenderer {
   destroy() {
     if (this.unsubscribe) this.unsubscribe();
     if (this.element) this.element.innerHTML = '';
+    this.removeBodyClass();
   }
 }

packages/toolbar/src/toolbar.css

@@ -12,6 +12,7 @@
   --hwp-toolbar-z-index: 9999;
   --hwp-toolbar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   --hwp-toolbar-font-size: 13px;
+  --hwp-toolbar-height: 41px;
 }
 
 * {
@@ -168,9 +169,22 @@
   height: 24px;
 }
 
+body.hwp-has-toolbar-top {
+  padding-top: var(--hwp-toolbar-height);
+}
+
+body.hwp-has-toolbar-bottom {
+  padding-bottom: var(--hwp-toolbar-height);
+}
+
 @media print {
   #hwp-toolbar,
   .hwp-toolbar {
     display: none;
   }
+
+  body.hwp-has-toolbar-top,
+  body.hwp-has-toolbar-bottom {
+    padding: 0;
+  }
 }