Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme) sidebar nav slots #1582

Merged
merged 2 commits into from Nov 7, 2022
Merged

Conversation

marshallswain
Copy link
Contributor

@marshallswain marshallswain commented Nov 5, 2022

For the new FeathersJS docs, we've been using this hack to show select boxes above the sidebar nav. It works ok but occasionally detaches from the DOM. (Geez, lazy much, Marshall? lol 🤷)

This PR adds sidebar-nav-before and sidebar-nav-after slots to the default theme layout. I've also listed the new slots in the documentation.

Below is a screenshot of what we're achieving. You can see it in action on the Feathers v5 Dove site: https://dove.feathersjs.com/guides/basics/starting.html

Screen Shot 2022-11-05 at 11 27 55 AM

adds `sidebar-nav-before` and `sidebar-nav-after` slots to the default theme
@brc-dd brc-dd merged commit d410d4d into vuejs:main Nov 7, 2022
@brc-dd
Copy link
Member

brc-dd commented Nov 7, 2022

Thanks! Cool landing page BTW! Also, you might wanna change https://github.com/feathersjs/feathers/blob/0249791571afe1e90e2301a42001a304d1f2d091/docs/.vitepress/style/main.postcss#L108 to:

  .dark #app:not('.home-page') .VPNav.no-sidebar {

@marshallswain marshallswain deleted the sidebar-slots branch November 8, 2022 00:55
@marshallswain
Copy link
Contributor Author

marshallswain commented Nov 8, 2022

Thanks for merging and thanks for the style tip. Could you tell me if there is a scheduled date for pre.28? I'm glad you like it!

@marshallswain
Copy link
Contributor Author

I've been impressed with the default theme. We've been very happy with how nice it is to customize.

@brc-dd
Copy link
Member

brc-dd commented Nov 8, 2022

I'll release it today itself.

@erondpowell
Copy link
Contributor

@marshallswain we just built a "toggler dropdown" like you have in your sidebar for our docs site, except we opted to make it "in the page". Is it possible to view your dropdown component? I'd like to see how you did yours just for fun 😃

@marshallswain
Copy link
Contributor Author

@erondpowell sure, it can be seen here: https://github.com/feathersjs/feathers/blob/dove/docs/.vitepress/components/Select.vue

It's just a basic HTML select with some experimental code to get the Select component into the sidebar. The only props it should really have is the value, label, and options. Everything else is a tightly coupled workaround for not previously having slots. The routing code shouldn't really be inside this component, which I'll fix now that we have slots in the sidebar. The hack I used to get the component into the sidebar is here: https://github.com/feathersjs/feathers/blob/dove/docs/.vitepress/theme/FeathersLayout.vue#L32. May god bless anybody who tries to use it, especially now that we have proper slots :)

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants