Merge branch 'master' of github.com:supabase/supabase

apps/docs/components/AuthProviders.tsx

@@ -3,7 +3,7 @@ import ButtonCard from './ButtonCard'
 
 export default function AuthProviders() {
   return (
-    <div className="grid grid-cols-12 gap-4">
+    <div className="grid md:grid-cols-12 gap-4">
       {providers.map((x) => (
         <div key={x.name} className="col-span-6">
           <ButtonCard to={x.href} title={x.name}>

apps/docs/components/CodeBlock/CodeBlock.tsx

@@ -62,7 +62,7 @@ function CodeBlock(props: Props) {
         <SyntaxHighlighter
           language={lang}
           style={monokaiTheme}
-          className={`code-block rounded-lg border p-4 !my-2 !bg-scale-300 ${
+          className={`code-block rounded-lg border p-4 !my-2 !bg-scale-300 w-full ${
             !showLineNumbers ? 'pl-6' : ''
           }`}
           customStyle={{

apps/docs/components/Frameworks.tsx

@@ -84,7 +84,7 @@ const Frameworks = () => {
     },
   ]
   return (
-    <div className="grid grid-cols-12 gap-4">
+    <div className="grid md:grid-cols-12 gap-4">
       {frameworks.map((x) => (
         <div key={x.name} className="col-span-3">
           <ButtonCard

apps/docs/components/FunctionsExamples.tsx

@@ -47,7 +47,7 @@ const examples = [
 
 const FunctionsExamples = () => {
   return (
-    <div className="grid grid-cols-12 gap-4">
+    <div className="grid md:grid-cols-12 gap-4">
       {examples.map((x) => (
         <div className="col-span-6">
           <ButtonCard to={x.href} title={x.name} description={x.description} />

apps/docs/components/Navigation/NavBar.tsx

@@ -14,6 +14,7 @@ interface Props {
 const NavBar: FC<Props> = ({ currentPage }) => {
   const { isDarkMode, toggleTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   const { asPath, push } = useRouter()
   const pathSegments = asPath.split('/')
@@ -53,6 +54,19 @@ const NavBar: FC<Props> = ({ currentPage }) => {
     }
   }
 
+  const toggleMobileMenu = () => {
+    setMobileMenuOpen(!mobileMenuOpen)
+    const sidebar = document.querySelector('.sidebar-menu-container')
+    const contentPane = document.querySelector('.main-content-pane')
+
+    sidebar.classList.toggle('hidden')
+    contentPane.classList.toggle('hidden')
+  }
+
+  useEffect(() => {
+    if (mobileMenuOpen) toggleMobileMenu()
+  }, [asPath])
+
   return (
     <nav
       className={[
@@ -62,7 +76,7 @@ const NavBar: FC<Props> = ({ currentPage }) => {
       ].join(' ')}
     >
       <div className="flex items-center">
-        <button className="mr-4 block stroke-2 lg:hidden">
+        <button className="mr-4 block stroke-2 lg:hidden" onClick={toggleMobileMenu}>
           <IconMenu className="text-scale-1100" />
         </button>
         {mounted && (
@@ -189,10 +203,10 @@ const NavBar: FC<Props> = ({ currentPage }) => {
               <p className="text-scale-800 text-sm">Search docs</p>
             </div>
             <div className="flex items-center space-x-1">
-              <div className="text-scale-1200 flex items-center justify-center h-6 w-6 rounded bg-scale-500">
+              <div className="hidden text-scale-1200 md:flex items-center justify-center h-6 w-6 rounded bg-scale-500">
                 <IconCommand size={12} strokeWidth={1.5} />
               </div>
-              <div className="text-xs text-scale-1200 flex items-center justify-center h-6 w-6 rounded bg-scale-500">
+              <div className="hidden text-xs text-scale-1200 md:flex items-center justify-center h-6 w-6 rounded bg-scale-500">
                 K
               </div>
             </div>

apps/docs/components/Navigation/SideBar.tsx

@@ -43,7 +43,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
   return (
     <div
       className="dark:bg-scale-200 dark:border-scale-400 sidebar-width sticky top-16
-      h-screen overflow-y-scroll border-r py-8 px-6 sidebar-menu-container"
+      h-screen overflow-y-scroll border-r py-8 px-6 sidebar-menu-container hidden md:block "
     >
       {isInReferencePages && (
         <>

apps/docs/components/TableOfContents.tsx

@@ -26,7 +26,7 @@ const TableOfContents: FC<Props> = ({ toc }) => {
   // Our first level headers will be H2s (H1 is ignored), and we only show up to H3
 
   return (
-    <ul className="toc-menu list-none pl-4 text-[0.8rem] grid gap-2 mt-14">
+    <ul className="toc-menu list-none pl-4 text-[0.8rem] grid gap-2 mt-12">
       {(toc.json as TOCHeader[])
         .filter((item) => item.lvl !== 1 && item.lvl <= 3)
         .map((item: any, i: number) => {

apps/docs/docs/guides/auth/auth-helpers.mdx

@@ -8,7 +8,7 @@ sidebar_label: Overview
 A collection of framework-specific Auth utilities for working with Supabase.
 
 <div className="container" style={{ padding: 0 }}>
-  <div className="grid grid-cols-12 gap-4">
+  <div className="grid md:grid-cols-12 gap-4">
     {/* Auth UI */}
     <div className="col-span-6">
       <ButtonCard

apps/docs/docs/introduction.mdx

@@ -12,7 +12,7 @@ You can use it completely, or just the features you need.
 
 ## Learn about features
 
-<div className="grid grid-cols-12 gap-4">
+<div className="grid md:grid-cols-12 gap-4">
   <div className="col-span-4">
     <ButtonCard
       className="card"

apps/docs/layouts/Default.tsx

@@ -44,20 +44,25 @@ const Layout: FC<Props> = ({ meta, children, toc, menuItems, currentPage }) => {
         <NavBar currentPage={currentPage} />
         <div className="flex w-full flex-row">
           <SideBar menuItems={menuItems} />
-          <div className="docs-width grid grid-cols-12 gap-4 justify-between p-4 pb-8 w-full">
+          <div className="main-content-pane docs-width grid md:grid-cols-12 gap-4 justify-between p-4 pb-8 w-full">
             <div
               className={`${
                 meta?.hide_table_of_contents || !hasTableOfContents
-                  ? 'col-span-10 2xl:col-span-8'
-                  : 'col-span-9'
-              } py-4 px-8`}
+                  ? 'col-span-12 xl:col-start-2 xl:col-span-10 2xl:col-start-3 2xl:col-span-8'
+                  : 'col-span-12 md:col-span-9'
+              } py-2 md:py-4 px-2 md:px-8`}
             >
               <article className="prose dark:prose-dark dark:bg-scale-200 width-full mt-8">
                 {children}
               </article>
             </div>
             {hasTableOfContents && !meta?.hide_table_of_contents && (
-              <div className="border-scale-400 dark:bg-scale-200 thin-scrollbar table-of-contents-height overflow-y-auto sticky col-span-3 border-l px-2">
+              <div
+                className={[
+                  'border-scale-400 dark:bg-scale-200 table-of-contents-height border-l',
+                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                ].join(' ')}
+              >
                 <TableOfContents toc={toc} />
               </div>
             )}

apps/docs/styles/main.scss

@@ -54,6 +54,10 @@ article h1 {
 
 .docs-width {
   max-width: calc(100% - var(--sidebar-width));
+
+  @media screen and (max-width: 768px) {
+    max-width: none;
+  }
 }
 
 .table-of-contents-height {