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

www: docs: fix: Header nav items shouldn't wrap on mobile #2821

Open
wants to merge 14 commits into
base: main
Choose a base branch
from

Conversation

davis9001
Copy link
Contributor

@davis9001 davis9001 commented Feb 5, 2025

Following up on #2820

I noticed the addition of the extra icon in the nav bar made the nav items in the Header newline wrap on small screens (mobile smaller than sm).
image

This pull request fixes that by doing the following:

  • On mobile: Hides GitHub social icon in Header

Some other changes I snuck in:

  • Reintroduced semi-transparent backgorund on header
  • Adjustments to spacing/alignment on Header items
  • Refactor ThemeToggle Island to be less Deno Fresh specific (more reusable)
  • Refactor social icons into SocialIcons component (removed duplication)
  • Added Discord social icon to Footer on all screen sizes

Comment on lines 27 to 35
<div class="flex justify-end">
<NavigationBar class="" active={props.active} />
<div class="flex [&_.github]:hidden [&_.github]:sm:flex [&_ul]:space-x-2 [&_ul]:sm:space-x-4 [&_li:hover]:text-green-600">
<SocialIcons />
</div>
<div class="flex px-3 sm:px-6 fill-foreground-primary hover:fill-fresh [&_*]:transition ">
{isDocs && <ThemeToggle />}
</div>
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something is off with the spacing

Screenshot 2025-02-17 at 11 18 53

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should fix that: 85016ef

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I should have left a screenshot:
image

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.

2 participants