Skip to content

fix: spacing in responsive site navigation #5728

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.

Sign up for GitHub

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

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

fix: spacing in responsive site navigation #5728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
59bb6dc
add padding/margin right for top nav items + separator
safiranugroho Mar 18, 2023
b688e6d
use overflow-y: overlay
safiranugroho Mar 18, 2023
957bafe
set breakpoint to lg
safiranugroho Mar 18, 2023
ab6a880
*
safiranugroho Mar 18, 2023
f35edef
Merge branch 'main' into fix-responsive-menu
safiranugroho Mar 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Layout/Sidebar/SidebarRouteTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,12 @@ export function SidebarRouteTree({
{index !== 0 && (
<li
role="separator"
className="mt-4 mb-2 ml-5 border-b border-border dark:border-border-dark"
className="mt-4 mb-2 mx-5 lg:mr-0 border-b border-border dark:border-border-dark"
/>
)}
<h3
className={cn(
'mb-1 text-sm font-bold ml-5 text-tertiary dark:text-tertiary-dark',
'mb-1 text-sm font-bold mx-5 lg:mr-0 text-tertiary dark:text-tertiary-dark',
index !== 0 && 'mt-2'
)}>
{sectionHeader}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/SidebarNav/SidebarNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function SidebarNav({

return (
<div className={cn('sticky top-0 lg:bottom-0 lg:h-screen flex flex-col')}>
<div className="overflow-y-scroll no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
<div className="overflow-y-overlay no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
<aside
className={cn(
`lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-10 hidden lg:block`
Expand Down
6 changes: 3 additions & 3 deletions src/components/Layout/TopNav/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ export default function TopNav({
{isOpen && (
<div
ref={scrollParentRef}
className="overflow-y-scroll isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
className="overflow-y-overlay isolate no-bg-scrollbar lg:w-[342px] grow bg-wash dark:bg-wash-dark">
<aside
className={cn(
`lg:grow lg:flex flex-col w-full pb-8 lg:pb-0 lg:max-w-xs z-50`,
Expand All @@ -302,7 +302,7 @@ export default function TopNav({
className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
{/* No fallback UI so need to be careful not to suspend directly inside. */}
<Suspense fallback={null}>
<div className="pl-3 xs:pl-5 xs:gap-0.5 xs:text-base overflow-x-scroll flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
<div className="px-5 lg:pl-3 lg:pr-0 xs:gap-0.5 xs:text-base flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
<NavItem isActive={section === 'learn'} url="/learn">
Learn
</NavItem>
Expand All @@ -322,7 +322,7 @@ export default function TopNav({
</div>
<div
role="separator"
className="ml-5 mt-4 mb-2 border-b border-border dark:border-border-dark"
className="mx-5 lg:mr-0 mt-4 mb-2 border-b border-border dark:border-border-dark"
/>
<SidebarRouteTree
// Don't share state between the desktop and mobile versions.
Expand Down
11 changes: 11 additions & 0 deletions src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@
html.dark .no-bg-scrollbar {
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/*
* Until then, we have ... this.
* If you're changing this, make sure you've tested:
Expand Down Expand Up @@ -233,6 +234,16 @@
html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
background-color: rgba(255, 255, 255, 0.35) !important;
}

/*
* 'overlay' is a deprecated value, but works with the .no-bg-scrollbar solution
* so the scrollbar width doesn't offset the containing element's width.
* We can go back to using 'scroll' when .no-bg-scrollbar is no longer needed.
*/
html .overflow-y-overlay {
overflow-y: scroll; /* For Firefox. */
overflow-y: overlay; /* For WebKit-based browsers. */
}
}

.code-step * {
Expand Down