diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/group-page.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/group-page.js | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js index e897646..1b7ed53 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js @@ -11,6 +11,7 @@ import { } from './hub-client.js'; import { APPS, visibleApps } from './apps.js'; import { GroupName } from './group-name.js'; +import { useStickyBand } from './sticky.js'; import { FilePreview } from './files-app.js'; import { VideoPlayer } from './video-player.js'; import { GroupSettingsPanel } from './group-settings.js'; @@ -26,6 +27,9 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, onRefreshAuth, onJoined, onGroupUpdated, onPresence, onLeft, onPlayQueue: parentOnPlayQueue, onStopMusic }) { const [status, setStatus] = useState('idle'); + // The tab bar pins under the navigation bar and tells the application's own + // toolbar how far down to pin (style.css, "Sticky chrome"). + const tabBand = useStickyBand('--chrome-h'); // Whether this connection has identified a device to the node (`device_hello`). // Held as state, not read off the transport at render time: it is settled // inside connect() and re-settled by every reconnect, and the Chat composer @@ -711,7 +715,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, }; return html` - <div> + <div class="sticky-chrome"> <div class="group-header"> <div> <h2 style="margin-bottom:${group && group.description ? '4px' : '0'}"> @@ -811,7 +815,7 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs, would otherwise have made them unreachable exactly when a node is down — which is when someone is most likely to want them. The apps below still need the node and say so. */ group && html` - <div class="group-tabs"> + <div class="group-tabs" ref=${tabBand}> ${apps.map(a => html` <button key=${a.key} class="group-tab ${tab === a.key ? 'active' : ''}" onClick=${() => setTab(a.key)} title=${t(a.labelKey)}> |