SiteConfig

The SiteConfig component provides a button to toggle between fixed-width and full-width content layouts.

Usage

Copy<script setup lang="ts">
import { SiteConfig } from '@/components/SiteConfig'
</script>

<template>
  <SiteConfig />
</template>

Features

• Toggles between "fixed" and "full" layout modes
• Persists preference in cookies
• Applies layout class to document element
• Uses GalleryHorizontalIcon for visual indicator

API Reference

SiteConfig

Behavior

• Click to toggle: fixed → full → fixed
• Saves preference in cookie (user-config)
• Applies layout-fixed or layout-full class to document.documentElement
• Uses useConfig() composable for state management

Layout Classes

When toggled, applies classes to the document:

• layout-fixed: Constrains content width
• layout-full: Full viewport width

Customization

The layout classes can be styled in your CSS:

Copy.layout-fixed {
  /* Fixed width styles */
}

.layout-full {
  /* Full width styles */
}