[Site] Search Icon overlays Dark Mode toggle in mobile view

[Keshav-0907]

Current State

Description of the current state/issue:

The Search icon overlays, the Dark Mode toggle button in Mobile View in the navbar.

Link to the page: https://apisix.apache.org/docs/apisix/getting-started/README/

Screenshots (if relevant):

Desired State

Description of the change you are proposing:

Adjusting both the objects, so that they don't overlay each other

Would you like to fix this issue?

Yes! Count me in

[SylviaBABY]

@Keshav-0907 thanks for your contribution!

[Keshav-0907]

@SylviaBABY @yzeng25

While setting up the project locally got this error repeatedly. Can you please help me find a solution for this ??

[yzeng25]

@SylviaBABY @yzeng25

While setting up the project locally got this error repeatedly. Can you please help me find a solution for this ??

cc @SkyeYoung

[SkyeYoung]

@Keshav-0907 Hi, Sorry to reply to you so late (I've been getting a lot of emails lately, so I'm missing some).

What system are you using? Since I only develop on Linux, there may be some compatibility issues.

[Keshav-0907]

No worries @SkyeYoung

I am using a M1 Chip - Macbook

[SkyeYoung]

Okay, I'll go find a Macbook and try it out a little later after I post this comment

[Keshav-0907]

Okay, Thank you :)

[SkyeYoung]

Sorry, last weekend I had some other things to do at the last minute. I will try today.

[SkyeYoung]

@Keshav-0907 Hi, it looks very strange. I didn't find the issue described in your image, but instead encountered some other problems (which I have addressed in this PR).

Could you please try manually accessing the path as described in the command?

e.g.:

# replace the apisix-website/scripts/generate-event-poster-card.sh
SCRIPT=$(readlink -f "$0")
SCRIPTPATH=$(dirname "$SCRIPT")/..

test -e ${SCRIPTPATH}/config/event-poster-card.json 
test -e ${SCRIPTPATH}/website/src/theme/Footer/

[siyaramaa]

@SkyeYoung Hi, it looks like the issue with the search icon overlapping the theme toggle button is only happening when initially opening the page on desktop and switching to mobile view. However, the problem is resolved when you refresh the page after the switch or when initially opening it on mobile devices. When switching to the mobile view, the toggle button is moving to the collapsed side menu, but it's not removed or hidden from the right-side nav, as shown in the gif below.

[siyaramaa]

Hi, It was only a problem in the docs route and I've fixed the issue locally and would love to contribute. Could you please assign this task to me for confirmation? Thank you! 😊