<script setup lang="ts">
import { computed, ref } from 'vue'

import { type Track, type User } from '~/types'

import Card from '~/components/ui/Card.vue'
import Layout from '~/components/ui/Layout.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Button from '~/components/ui/Button.vue'
import Activity from '~/components/ui/Activity.vue'
import Section from '~/components/ui/layout/Section.vue'

const alignLeft = ref(false)

const attributes = computed(() => ({
  style: alignLeft.value ? 'justify-content: start' : ''
}))
</script>

# Designing Pages

## Grid

The page grid consists of 46px wide tracks, separated by 32px wide gaps. [See examples on design.funkwhale.audio](https://design.funkwhale.audio/#/workspace/582e7be1-0cc7-11ed-87a1-ae44a720651d/e3a00150-0f5e-11ed-adb9-fff9e854a67c?page-id=e7a90671-0f5e-11ed-adb9-fff9e854a67c)

## Page sections

Use the [Layout Section component](/components/ui/layout/section) to structure the page into separate sections, each with a heading. Make sure the heading level hierarchy makes sense.

<Section :alignLeft="alignLeft" small-items h3="My albums" :action="{ text:'Go to library', to:'/' }">
    <Card small solid yellow title="Album 1" />
    <Card small solid green title="Album 2" />
    <Card small solid blue title="Album 3" />
</Section>

Sections and their contentsare automatically aligned to the default grid.

## Navigation

When most of the screen changes, users perceive it as a page navigation. They will expect the "back" button to bring them to the precious screen. In addition, they may expect the URL to contain the current page for sharing.

This makes a component a "page". In this sense, modals are pages.

Not everything we want to share with the Url replaces most of the screen. What about switching a filter?
