Skip to content

Use the platform navigation instead of a hand-built sidebar - #13

Open
pallaoro wants to merge 1 commit into
mainfrom
appnav-host-bridge
Open

Use the platform navigation instead of a hand-built sidebar#13
pallaoro wants to merge 1 commit into
mainfrom
appnav-host-bridge

Conversation

@pallaoro

Copy link
Copy Markdown
Member

The app built its own sidebar, so opening it inside a dashboard that renders
its own navigation showed the user two of them. <AppNav> from
@clawnify/app is a single definition that serves both cases: it paints the
app's sidebar when the app stands alone, and hands the same list to the host
when it is embedded, which then draws the rows itself.

What changed

  • src/client/components/sidebar.tsx is gone; app.tsx declares the nav as
    data and wraps the shell in flex min-h-screen flex-col md:flex-row.
  • Dashboard is the home item, so it is not a row of its own: the app's name
    opens it. Channels sits under a Settings group.
  • Queue and Drafts carry live counts. They read the stats the app already
    holds, which now load at boot with the rest, because each view's posts
    list is filtered to that view and cannot be counted for this.
  • reportLocation follows the router, so the host can restore the screen on
    reload.
  • styles.css brings the rail onto this app's tokens and back to the shell's
    own proportions.

The specificity guard

The package ships @media (max-width:767px){.cn-nav{width:100%;flex-direction:row}}
at specificity (0,1,0), and these overrides are written at aside.cn-nav
(0,1,1) so they beat its inline <style>. Specificity resolves before source
order, so an unguarded width: 275px would win at every width and leave a
275px column on a phone. Everything about the rail's geometry therefore sits
inside @media (min-width: 768px); only paint and type are global.

Verified

Measured in the browser at both ends of that breakpoint:

Viewport aside.cn-nav Page scrollWidth
1280x800 275px wide column, flex-direction: column, 1px right border 1280px, no sideways scroll
390x844 390px wide strip, 61px tall, flex-direction: row, bottom border 390px, no sideways scroll

Clicking a row routes and the active row follows on both. Counts render from
real state (Queue 4, Drafts 3 against a fixture). vite build succeeds;
tsc --noEmit reports the same four pre-existing D1Database / R2Bucket
errors in src/server as main does and nothing new.

The shell rolled its own sidebar, which puts two navigations side by side the
moment the app is opened inside a dashboard that draws one of its own.
<AppNav> from @clawnify/app is one definition that serves both: it paints the
app's sidebar when the app stands alone, and hands the same list to the host
when it is embedded.

Queue and Drafts carry live counts, so stats now load at boot along with the
rest. The `posts` list each view loads is filtered to that view, so it cannot
be counted for this.

The rail's own CSS reads token names this app does not define, so styles.css
puts it back on ours. Everything about its geometry sits behind
min-width: 768px: `aside.cn-nav` outranks the package's own `.cn-nav` and
specificity resolves before source order, so an unguarded width would land on
the horizontal strip drawn on a phone as well.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant