Files
supabase/apps/studio/pages
Francesco Sansalvadore 0035920bf1 feat: studio mobile nav (#31080)
* SheetProvider in studio

* mobile global nav

* view sub navigation

* fix ProjectLayout conditional

* Account mobile layout

* width

* hide

* layout

* overflow

* responsive button

* overflow

* fix mobile nav if IS_PLATFORM

* refactor

* hide if no content

* show command menu item on mobile

* ui-patterns sheet provider

* use client

* show if productMenu

* show if productMenu

* drag to close

* drag to close

* 16px input fontsize on inputs to avoid zoom on mobile

* offscreen test element

* offscreen test element

* offscreen test element

* update test

* update test

* update test

* pb

* test?

* test

* test

* test

* spec-click-target

* remove console

* remove unused import

* add dependency to sheet content

* close sheet on router.asPath change

* remove provider and use simple Sheet

* update sidebar mobile

* align labels

* avoid input zoom on mobile

* remove yo
2024-12-16 10:49:17 -04:00
..
2024-11-06 11:14:30 +08:00
2024-12-16 10:49:17 -04:00
2024-10-17 11:39:06 +02:00
2023-11-16 16:41:53 +00:00
2024-07-24 16:13:26 +08:00
2024-07-04 14:48:10 +08:00
2024-12-12 16:53:00 +08:00
2024-07-04 14:48:10 +08:00

Writing pages

Rough guidelines

  • Try to break down your pages into smaller building blocks - components which are tightly coupled to a page can be placed within the folder components/interfaces/xxx/... (Refer to the README.md under the components folder)
  • Keep to using useState hooks for any UI related logic, do not create MobX local stores to handle UI logic.

Template for building pages

import { NextPage } from 'next'
import { withAuth } from 'hooks/misc/withAuth'

// Import the corresponding layout based on the page
import { Layout } from 'components/layouts'

// Import the main building blocks of the page
import { ... } from 'components/interfaces/xxx'

// Import reusable UI components if needed
import { ... } from 'components/ui/xxx'

// Name your page accordingly
const Page: NextPage = () => {

  return (
    <Layout>
      <div>Page content</div>
    </Layout>
  )
}

export default withAuth(Page)