knative
Fix search bar expansion to overlay navigation items
Description:
Fixes #6332
Proposed Changes
- Added CSS to make search bar expand as an overlay on desktop view when activated
- Search bar now floats above navigation items (Home, Docs, About, Blog, Community) instead of compressing them
- Logo, "Knative" title, and GitHub badge remain visible when search is expanded
- Desktop-only fix using media query @media screen and (min-width: 76.25em)
- No changes to HTML structure - pure CSS solution
https://github.com/user-attachments/assets/8426107f-ccfa-456e-9277-315235eed513
[APPROVALNOTIFIER] This PR is NOT APPROVED
This pull-request has been approved by: codeEvolveZenith345 Once this PR has been reviewed and has the lgtm label, please assign salaboy for approval. For more information see the Code Review Process.
The full list of commands accepted by this bot can be found here.
Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment
![knative-prow[bot] avatar](https://avatars.githubusercontent.com/in/183726?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for knative ready!
| Name | Link |
|---|---|
| Latest commit | 02dc30a89e17135d8e1efac76566520451e55c77 |
| Latest deploy log | https://app.netlify.com/projects/knative/deploys/6932f51fcf8c8562422941c3 |
| Deploy Preview | https://deploy-preview-6532--knative.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
@codeEvolveZenith345: Cannot trigger testing until a trusted user reviews the PR and leaves an /ok-to-test message.
In response to this:
/retest
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.
Hi! @dprotaso
I have implemented the initial version to resolve #6332 . Please review it.
The build is failing due to netlify-token issue, unrelated to my implementation.
I have attached a demo-screenrecording for reference of implementation.
Thank you.
I have kept the expansion limited to the right side though, as the search bars normally remain on the side of their initial placement, then to expand over the entire screen.
I don't like the jitter that happens when you open it. Also the navigation text disappears so it doesn't look polished
Hi @dprotaso It would be easier for me to implement if you could be specific about its behavior?
take a look at https://squidfunk.github.io/mkdocs-material/tutorials/
When you click the search bar it's right side is fixed and it expands to the left.
I'm not seeing much difference between the changes in this PR and what we already have on the knative.dev website
Hi! @dprotaso You are right, this PR is still under work, I tried to fix it but it is not complete yet, I am drafting it until I have not made it optimally working.
Hi! @dprotaso You are right, this PR is still under work, I tried to fix it but it is not complete yet, I am drafting it until I have not made it optimally working.
Actually the mkdocs serve seemed to show no difference either, so I thought It is not working due to some issue, as the git too did not give actual diff made at git diff --stat so I had to commit the partial fix so as not to loose the progress!