Use the platform navigation instead of a hand-built sidebar - #13
Open
pallaoro wants to merge 1 commit into
Open
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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/appis a single definition that serves both cases: it paints theapp'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.tsxis gone;app.tsxdeclares the nav asdata and wraps the shell in
flex min-h-screen flex-col md:flex-row.opens it. Channels sits under a
Settingsgroup.holds, which now load at boot with the rest, because each view's
postslist is filtered to that view and cannot be counted for this.
reportLocationfollows the router, so the host can restore the screen onreload.
styles.cssbrings the rail onto this app's tokens and back to the shell'sown 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 sourceorder, so an unguarded
width: 275pxwould win at every width and leave a275px 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:
aside.cn-navflex-direction: column, 1px right borderflex-direction: row, bottom borderClicking a row routes and the active row follows on both. Counts render from
real state (Queue 4, Drafts 3 against a fixture).
vite buildsucceeds;tsc --noEmitreports the same four pre-existingD1Database/R2Bucketerrors in
src/serverasmaindoes and nothing new.