Skip to content

Commit 7ef2646

Browse files
committed
toolbar position
1 parent 74449b0 commit 7ef2646

File tree

5 files changed

+47
-3
lines changed

5 files changed

+47
-3
lines changed

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,27 @@
22

33
import { useToolbar } from '@wpengine/hwp-toolbar/react';
44
import { toolbar } from '@/lib/toolbar';
5-
import '@wpengine/hwp-toolbar/styles';
65
import { useState, useEffect } from 'react';
76

87
export function Toolbar() {
98
const { state, nodes } = useToolbar(toolbar);
10-
const [position, setPosition] = useState<'top' | 'bottom'>('bottom');
9+
const [position, setPosition] = useState<'top' | 'bottom'>('top');
1110

1211
useEffect(() => {
12+
// Add body class for positioning
13+
const position = toolbar.getConfig()?.position || 'bottom';
14+
document.body.classList.add(`hwp-has-toolbar-${position}`);
15+
1316
const unsubscribe = toolbar.subscribe(() => {
1417
const config = toolbar.getConfig();
1518
setPosition(config?.position || 'bottom');
1619
});
17-
return unsubscribe;
20+
21+
return () => {
22+
unsubscribe();
23+
// Clean up body class
24+
document.body.classList.remove(`hwp-has-toolbar-${position}`);
25+
};
1826
}, []);
1927

2028
const leftNodes = nodes.filter((node) => !node.position || node.position === 'left');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from 'next';
22
import { Toolbar } from './components/Toolbar';
33
import './globals.css';
4+
import '@wpengine/hwp-toolbar/styles';
45

56
export const metadata: Metadata = {
67
title: 'Toolbar Demo - React Hooks',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Toolbar } from '@wpengine/hwp-toolbar';
55
* This ensures the same toolbar state is shared across the app
66
*/
77
export const toolbar = new Toolbar({
8+
position: 'top',
89
onPreviewChange: (enabled) => {
910
console.log('Preview mode:', enabled);
1011
// In a real app, you'd integrate with Next.js draft mode here

packages/toolbar/src/core/VanillaRenderer.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,30 @@ export class VanillaRenderer {
3535
}
3636

3737
this.applyTheme();
38+
this.addBodyClass();
3839
this.unsubscribe = this.toolbar.subscribe((nodes, state) => {
3940
this.render(nodes, state);
4041
});
4142
}
4243

44+
/**
45+
* Add body class for toolbar positioning
46+
* @private
47+
*/
48+
addBodyClass() {
49+
const position = this.config.position || 'bottom';
50+
document.body.classList.add(`hwp-has-toolbar-${position}`);
51+
}
52+
53+
/**
54+
* Remove body class for toolbar positioning
55+
* @private
56+
*/
57+
removeBodyClass() {
58+
const position = this.config.position || 'bottom';
59+
document.body.classList.remove(`hwp-has-toolbar-${position}`);
60+
}
61+
4362
/**
4463
* Apply theme configuration to element
4564
* @private
@@ -313,5 +332,6 @@ export class VanillaRenderer {
313332
destroy() {
314333
if (this.unsubscribe) this.unsubscribe();
315334
if (this.element) this.element.innerHTML = '';
335+
this.removeBodyClass();
316336
}
317337
}

packages/toolbar/src/toolbar.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--hwp-toolbar-z-index: 9999;
1313
--hwp-toolbar-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
1414
--hwp-toolbar-font-size: 13px;
15+
--hwp-toolbar-height: 41px;
1516
}
1617

1718
* {
@@ -168,9 +169,22 @@
168169
height: 24px;
169170
}
170171

172+
body.hwp-has-toolbar-top {
173+
padding-top: var(--hwp-toolbar-height);
174+
}
175+
176+
body.hwp-has-toolbar-bottom {
177+
padding-bottom: var(--hwp-toolbar-height);
178+
}
179+
171180
@media print {
172181
#hwp-toolbar,
173182
.hwp-toolbar {
174183
display: none;
175184
}
185+
186+
body.hwp-has-toolbar-top,
187+
body.hwp-has-toolbar-bottom {
188+
padding: 0;
189+
}
176190
}

0 commit comments

Comments
 (0)