sveltefire icon indicating copy to clipboard operation
sveltefire copied to clipboard

Published 20 hours ago • verified publisher icon codediodeio

Make Documentation Website Responsive

Open codediodeio opened this issue 2 years ago • 4 comments

Currently, the documentation's side navbar does not collapse on small screens.

Let's add a hamburger icon and make it collapse on small screens.

Relevant files:

  • docs/src/layouts/MainLayout.astro
  • docs/src/components/SideNav.astro

codediodeio avatar Jul 31 '23 14:07 codediodeio

Hey @codediodeio, I'd be glad to look into this!

rielAsh24 avatar Jul 31 '23 17:07 rielAsh24

Heya @codediodeio, you might wanna also look into https://starlight.astro.build/

anishshobithps avatar Aug 01 '23 07:08 anishshobithps

@codediodeio Was working on this and I have added the hamburger icon for the side bar:

https://github.com/codediodeio/sveltefire/assets/89381263/670d2d97-647f-435f-9ffc-71e8475606c6

The animations are something I'm trying to get right along with the padding for the text, but I'd be glad to know your opinion!

rielAsh24 avatar Aug 01 '23 15:08 rielAsh24

@codediodeio Was working on this and I have added the hamburger icon for the side bar:

SideBar_Functioning.mov

The animations are something I'm trying to get right along with the padding for the text, but I'd be glad to know your opinion!

Update: Here's the final SideBar

https://github.com/codediodeio/sveltefire/assets/89381263/11450d71-aed5-4e81-bfca-efa364799801

Do confirm if this works. Would open a PR accordingly!

rielAsh24 avatar Aug 03 '23 14:08 rielAsh24