fix: close mobile menu on click (#15588)

* chore: fix spelling of "libraries"

* fix: close nav when a ref navigation link on click

* fix: remove `!w-auto` from site layout when mobile menu is open

- The width change was causing a layout shift with the height of elements when the mobile menu would show and hide.

---------

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>

apps/docs/DEVELOPERS.md

@@ -90,7 +90,7 @@ These reference docs are rendered by Next.JS via a dynamic route using a [`[...s
 
 The reference docs for the [Supabase Management API](https://supabase.com/docs/reference/api) and the [Supabase CLI](https://supabase.com/docs/reference/cli) are a little more straightforward than the client libraries. Both files also have a [common file](https://github.com/supabase/supabase/blob/master/spec/common-cli-sections.json) which handles things like `title`, `id` and `slug`. Both also have a spec file detailing things like parameters, descriptions, and responses ([Management API](https://github.com/supabase/supabase/blob/master/spec/api_v0_openapi.json) / [CLI](https://github.com/supabase/supabase/blob/master/spec/cli_v1_commands.yaml))
 
-On the Next.JS side of things, these work almost exactly the same as the client libaries with a dynamic [`[...slug.tsx]`](https://github.com/supabase/supabase/blob/master/apps/docs/pages/reference/cli/%5B...slug%5D.tsx).
+On the Next.JS side of things, these work almost exactly the same as the client libraries with a dynamic [`[...slug.tsx]`](https://github.com/supabase/supabase/blob/master/apps/docs/pages/reference/cli/%5B...slug%5D.tsx).
 
 ### Misc
 

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx

@@ -7,7 +7,7 @@ import * as NavItems from './NavigationMenu.constants'
 import Image from 'next/legacy/image'
 
 import RevVersionDropdown from '~/components/RefVersionDropdown'
-import { useMenuActiveRefId } from '~/hooks/useMenuState'
+import { menuState, useMenuActiveRefId } from '~/hooks/useMenuState'
 
 import React, { Fragment } from 'react'
 import { ICommonItem, ICommonSection } from '~/components/reference/Reference.types'
@@ -31,6 +31,7 @@ interface FunctionLinkProps {
   slug: string
   isParent?: boolean
   isSubItem?: boolean
+  onClick?: () => void
 }
 
 const FunctionLink = React.memo(function FunctionLink({
@@ -41,6 +42,7 @@ const FunctionLink = React.memo(function FunctionLink({
   slug,
   isParent = false,
   isSubItem = false,
+  onClick = () => {},
 }: FunctionLinkProps) {
   const router = useRouter()
   const activeAccordionItem = useMenuActiveRefId()
@@ -60,6 +62,7 @@ const FunctionLink = React.memo(function FunctionLink({
           e.preventDefault()
           history.pushState({}, '', url)
           document.getElementById(slug)?.scrollIntoView()
+          onClick()
         }}
         className={cn(
           'cursor-pointer transition text-sm hover:text-foreground gap-3 relative',
@@ -103,6 +106,7 @@ const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderL
         basePath={basePath}
         isParent={false}
         isSubItem
+        onClick={() => menuState.setMenuMobileOpen(false)}
       />
     )
   }
@@ -133,6 +137,7 @@ const RenderLink = React.memo(function RenderLink({ section, basePath }: RenderL
                 basePath={basePath}
                 isParent={false}
                 isSubItem={false}
+                onClick={() => menuState.setMenuMobileOpen(false)}
               />
             )
           })}

apps/docs/layouts/SiteLayout.tsx

@@ -261,9 +261,7 @@ const Container = memo(function Container(props: PropsWithChildren) {
         // 'overflow-x-auto',
         'w-full h-screen transition-all ease-out',
         // 'absolute lg:relative',
-        mobileMenuOpen
-          ? '!w-auto ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden'
-          : 'overflow-auto',
+        mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
         // desktop override any margin styles
         'lg:ml-0',
       ].join(' ')}