mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Danny White
706207436f
## What kind of change does this PR introduce? UI change ## What is the current behavior? Organization settings are currently spread across a NavMenu. This is getting unweildy as the amount of children within Organization settings grows. ## What is the new behavior? Organization settings are now on a sidebar, just like Project Settings and most other surfaces. | Before | After | | --- | --- | | <img width="1024" height="563" alt="Supabase" src="https://github.com/user-attachments/assets/3889858c-157a-4deb-8714-71fe9cf002e6" /> | <img width="1024" height="563" alt="General Supabase" src="https://github.com/user-attachments/assets/1b4eb2c3-a67c-4eda-ab3c-e6610dd5ccf4" /> | ## Additional context @fsansalvadore and the design team have have other efforts going on to reduce interface clutter, e.g. nested sidebars.
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
useStatehooks 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)