feat: header facelift #1662

katzino · 2025-07-02T09:27:22Z

closes https://github.com/apify/apify-web/issues/4926

updates desktop/mobile header menu
also syncs layout for footer

cursor

Bug: Navbar Height Issue Causes SubNavbar Overlap

The dynamic calculation for --ifm-navbar-height was removed, hardcoding it to 68px. This causes layout issues when the SubNavbar component renders (which previously increased the height to 123px), leading to the SubNavbar overlapping with main content due to insufficient allocated space.

apify-docs-theme/src/theme/Layout/index.jsx#L6-L19

apify-docs/apify-docs-theme/src/theme/Layout/index.jsx

Lines 6 to 19 in 85f13f4

    
           export default function LayoutWrapper(props) { 
        
               const baseUrl = useBaseUrl('/'); 
        
               const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), ''); 
        
               return ( 
        
                   <div style={{ 
        
                       margin: 0, 
        
                       padding: 0, 
        
                       boxSizing: 'border-box', 
        
                   }}> 
        
                       <Layout {...props} /> 
        
                   </div> 
        
               );

Fix in Cursor

Comment bugbot run to trigger another review on this PR
Was this report helpful? Give feedback by reacting with 👍 or 👎

apify-service-account · 2025-07-02T09:30:21Z

Preview for this PR was built for commit 85f13f4 and is ready at https://pr-1662.preview.docs.apify.com!

apify-service-account · 2025-07-02T09:35:17Z

Preview for this PR was built for commit 6ad0111 and is ready at https://pr-1662.preview.docs.apify.com!

apify-service-account · 2025-07-02T09:49:15Z

Preview for this PR was built for commit 8175151 and is ready at https://pr-1662.preview.docs.apify.com!

katzino · 2025-07-02T10:08:49Z

Cursor complains about overlapping header logic that I removed but I couldn't find such occurrence 😅

hanatsai

Nice!! Thank you :)

B4nan · 2025-07-02T11:15:05Z

Cursor complains about overlapping header logic that I removed but I couldn't find such occurrence 😅

The bigger space for navbar is because of pages with the submenu, I guess we are not getting rid of that?

e.g. https://docs.apify.com/academy but also many others, basically everything except landing pages and API docs

B4nan · 2025-07-02T11:16:08Z

This looks completely broken on my end, not sure if it can be some caching issue (I did reload the cache).

B4nan · 2025-07-02T11:17:56Z

Also, I am personally not very happy with the decision to move the discord link only to the footer, I'd keep it in the navbar and have a link in the footer.

B4nan · 2025-07-02T11:23:31Z

There are other small issues I see when clicking the preview, just to name a few:

layout shift on the sidebar spacing
sidebar vertical spacing too huge
no animation when toggling the sidebar sections
no hover effect on links inside toggled sections in sidebar (only on nested sections, not on the direct links)
the whole website was wider, making it smaller is quite a downgrade to me - we actually planned to add another larger breakpoint to show more content when there is enough space

B4nan · 2025-07-02T11:34:13Z

You surely still need the dual value for the navbar height. Just try to scroll on the academy page a bit to see why.

vs current version

apify-service-account · 2025-07-02T13:01:36Z

Preview for this PR was built for commit f90c4d27 and is ready at https://pr-1662.preview.docs.apify.com!

katzino · 2025-07-02T13:36:53Z

I fixed (at least I hope) all pending stylistic issues. For the overall design overhaul I synced with @hanatsai before implementing and those changes were based on unifying the interface across platforms (web, crawlee etc.)

apify-service-account · 2025-07-02T13:38:28Z

Preview for this PR was built for commit 5028d01b and is ready at https://pr-1662.preview.docs.apify.com!

B4nan · 2025-07-02T14:23:21Z

it looks like the layout shift on the sidebar is still there. when you open the page, its smaller, then it gets bigger, then if you open one section (with the arrow), it shrinks again. and i'd say its still quite high even in the shrunk form (but i might get used to that 🙃)

Zaznam.obrazovky.2025-07-02.v.16.21.52.mov

B4nan · 2025-07-02T14:34:20Z

also the mobile version has a different menu component, it looks fine except the background on the arrow on click (could be just how it works in chrome, havent tested on actual mobile)

hanatsai · 2025-07-02T14:50:09Z

so we agreed we'll keep wider layout in the documentation and the Discord icons. Here is the Figma file.

apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx

apify-docs-theme/src/theme/SearchBar/index.js

apify-service-account · 2025-07-03T08:40:25Z

Preview for this PR was built for commit 76af1ee4 and is ready at https://pr-1662.preview.docs.apify.com!

katzino · 2025-07-03T09:02:35Z

All pending issues should have been fixed 🤞

B4nan · 2025-07-03T09:07:16Z

looks good, one more thing, the theme switcher in the footer seems to be positioned weirdly, is that expected?

similar change was introduced in the crawlee docs, there we have it on the left side under the logo and it looks much cleaner:

katzino · 2025-07-03T09:19:23Z

In designs it looks better with more narrow columns. I don't think we can you the same setup as with crawlee since more than 3 columns wouldn't just fit it. @hanatsai what do you think?

hanatsai · 2025-07-03T09:30:50Z

yes, I think the position is not a big problem here. Because documentation has more items.

B4nan · 2025-07-03T09:33:21Z

It's not a big deal, but I also think this will end up reported in #bugs channel eventually 🙃

In designs it looks better with more narrow columns.

In that screenshot, the columns don't have the same width, that also doesn't sound like a good practice to me.

webrdaniel

Looks good, just found two nits for the mobile menu.

There is a double scrollbar
When searching the menu does not close

Screen.Recording.2025-07-03.at.11.59.19.mov

katzino · 2025-07-03T10:48:14Z

@webrdaniel both should be fixed now, good catch 💪

apify-service-account · 2025-07-03T10:50:29Z

Preview for this PR was built for commit 4b260820 and is ready at https://pr-1662.preview.docs.apify.com!

katzino · 2025-07-04T09:06:54Z

@B4nan I was wondering - when this is merged, do I need to manually bump theme version in apify-cli and apify-client-*? 🤔

B4nan · 2025-07-04T09:16:28Z

Nope, it's all automated.

apify-docs-theme/src/config.js

Co-authored-by: Martin Adámek <[email protected]>

apify-service-account · 2025-07-04T10:24:19Z

Preview for this PR was built for commit ecf78187 and is ready at https://pr-1662.preview.docs.apify.com!

feat: header facelift

85f13f4

katzino added this to the 118th sprint - Web Team milestone Jul 2, 2025

katzino requested review from HonzaTuron, baldasseva, hanatsai and webrdaniel July 2, 2025 09:27

katzino self-assigned this Jul 2, 2025

katzino added the t-web Issues with this label are in the ownership of the web team. label Jul 2, 2025

cursor bot reviewed Jul 2, 2025

View reviewed changes

fix: linter

6ad0111

fix: style overrides

8175151

hanatsai approved these changes Jul 2, 2025

View reviewed changes

fix: sidebar & secondary menu

f90c4d2

fix: menu link overflow

5028d01

HonzaTuron approved these changes Jul 2, 2025

View reviewed changes

apify-docs-theme/src/theme/Navbar/MobileSidebar/Header/index.jsx Outdated Show resolved Hide resolved

apify-docs-theme/src/theme/SearchBar/index.js Show resolved Hide resolved

fix: code review comments

76af1ee

webrdaniel approved these changes Jul 3, 2025

View reviewed changes

katzino added 2 commits July 3, 2025 12:47

fix: double scrollbar

baf53af

fix: close mobile menu on search click

4b26082

B4nan reviewed Jul 4, 2025

View reviewed changes

apify-docs-theme/src/config.js Outdated Show resolved Hide resolved

fix: button text

ecf7818

Co-authored-by: Martin Adámek <[email protected]>

B4nan approved these changes Jul 4, 2025

View reviewed changes


	export default function LayoutWrapper(props) {
	const baseUrl = useBaseUrl('/');
	const currentPath = useLocation().pathname.replace(new RegExp(`^${baseUrl}`), '');

	return (
	<div style={{
	margin: 0,
	padding: 0,
	boxSizing: 'border-box',
	}}>
	<Layout {...props} />
	</div>
	);

feat: header facelift #1662

Are you sure you want to change the base?

feat: header facelift #1662

Conversation

katzino commented Jul 2, 2025

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Bug: Navbar Height Issue Causes SubNavbar Overlap

Uh oh!

apify-service-account commented Jul 2, 2025

Uh oh!

apify-service-account commented Jul 2, 2025

Uh oh!

apify-service-account commented Jul 2, 2025

Uh oh!

katzino commented Jul 2, 2025

Uh oh!

hanatsai left a comment

Choose a reason for hiding this comment

Uh oh!

B4nan commented Jul 2, 2025

Uh oh!

B4nan commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

B4nan commented Jul 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

B4nan commented Jul 2, 2025

Uh oh!

B4nan commented Jul 2, 2025

Uh oh!

apify-service-account commented Jul 2, 2025

Uh oh!

katzino commented Jul 2, 2025

Uh oh!

apify-service-account commented Jul 2, 2025

Uh oh!

B4nan commented Jul 2, 2025

Uh oh!

B4nan commented Jul 2, 2025

Uh oh!

hanatsai commented Jul 2, 2025

Uh oh!

Uh oh!

Uh oh!

apify-service-account commented Jul 3, 2025

Uh oh!

katzino commented Jul 3, 2025

Uh oh!

B4nan commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katzino commented Jul 3, 2025

Uh oh!

hanatsai commented Jul 3, 2025

Uh oh!

B4nan commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

webrdaniel left a comment

Choose a reason for hiding this comment

Uh oh!

katzino commented Jul 3, 2025

Uh oh!

apify-service-account commented Jul 3, 2025

Uh oh!

katzino commented Jul 4, 2025

Uh oh!

B4nan commented Jul 4, 2025

Uh oh!

Uh oh!

apify-service-account commented Jul 4, 2025

Uh oh!

Uh oh!

B4nan commented Jul 2, 2025 •

edited

Loading

B4nan commented Jul 2, 2025 •

edited

Loading

B4nan commented Jul 3, 2025 •

edited

Loading

B4nan commented Jul 3, 2025 •

edited

Loading