feat: try new full width fluid Container layout (#730)

* feat: try new full width fluid Container layout

* cleanup

* chore(deps): upd deps

* finish fluid/fixed layout

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

components/app/AppFooter.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const docus = useDocus()
+
 const socialIcons = ref(null)
 const icons = computed(() => docus.value.footer?.iconLinks || [])
 const textLinks = computed(() => docus.value.footer?.textLinks || [])
@@ -9,7 +10,7 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
 
 <template>
   <footer>
-    <Container padded class="footer-container">
+    <Container :fluid="docus.layout.fluid" padded class="footer-container">
       <!-- Left -->
       <div class="left">
         <a v-if="docus.footer?.credits" :href="docus.footer.credits.href" rel="noopener" target="_blank">
@@ -55,13 +56,9 @@ css({
   footer: {
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: '{color.gray.100}',
+    borderTopColor: '{elements.border.primary.default}',
     padding: '{docus.footer.padding}',
 
-    '@dark': {
-      borderTopColor: '{color.gray.900}'
-    },
-
     '.footer-container': {
       display: 'grid',
       gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',

components/app/AppHeader.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+const docus = useDocus()
 const { navigation } = useContent()
 const { hasDocSearch } = useDocSearch()
+
 const hasDialog = computed(() => navigation.value?.length > 1)
 </script>
 
 <template>
   <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
-    <Container>
+    <Container :fluid="docus.layout.fluid">
       <div class="section left">
         <AppHeaderDialog v-if="hasDialog" />
         <AppHeaderLogo />
@@ -58,14 +60,10 @@ css({
     top: 0,
     zIndex: 10,
     width: '100%',
-    borderBottom: '1px solid {color.gray.100}',
+    borderBottom: '1px solid {elements.border.primary.default}',
     backgroundColor: '{elements.backdrop.background}',
     height: '{docus.header.height}',
 
-    '@dark': {
-      borderBottom: '1px solid {color.gray.900}',
-    },
-
     '.container': {
       display: 'grid',
       height: '100%',
@@ -103,4 +101,4 @@ css({
     }
   }
 })
-</style>
+</style>

components/app/Logo.vue

@@ -45,7 +45,7 @@ css({
       color: '{color.gray.100}'
     },
     '@sm': {
-      height: '{space.8}'
+      height: '{space.7}'
     }
   }
 })

components/docs/DocsPageContent.vue → components/docs/DocsPageLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { page, navigation } = useContent()
 const route = useRoute()
+const docus = useDocus()
 
 const fallbackValue = (value: string, fallback = true) => {
   if (typeof page.value?.[value] !== 'undefined') {
@@ -31,7 +32,7 @@ const asideScroll = useState('asideScroll', () => {
   }
 })
 
-function watchScrollHeight () {
+function watchScrollHeight() {
   if (!asideNav.value) { return }
   if (asideNav.value.scrollHeight === 0) {
     setTimeout(watchScrollHeight, 0)
@@ -55,26 +56,17 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Container padded class="docs-page-content">
+  <!-- TODO: update Elements Container with 'fluid' class -->
+  <Container :fluid="docus.layout.fluid" padded class="docs-page-content" :class="[docus.layout.fluid && 'fluid']">
     <!-- Aside -->
-    <aside
-      v-if="hasAside"
-      ref="asideNav"
-      class="aside-nav"
-    >
+    <aside v-if="hasAside" ref="asideNav" class="aside-nav">
       <DocsAside />
     </aside>
 
     <!-- Page Body -->
-    <article
-      class="page-body"
-      :class="{
-        'one-column': !hasAside && !hasToc,
-        'two-column': (!hasToc || !hasAside) && !(!hasAside && !hasToc),
-        'three-column': hasToc && hasAside,
-        'with-toc': hasToc,
-      }"
-    >
+    <article class="page-body" :class="{
+      'with-toc': hasToc,
+    }">
       <slot v-if="hasBody" />
       <Alert v-else type="info">
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
@@ -87,10 +79,7 @@ onBeforeUnmount(() => {
     </article>
 
     <!-- TOC -->
-    <div
-      v-if="hasToc"
-      class="toc"
-    >
+    <div v-if="hasToc" class="toc">
       <div class="toc-wrapper">
         <button @click="isOpen = !isOpen">
           <span class="title">Table of Contents</span>
@@ -114,7 +103,8 @@ css({
     '@lg': {
       display: 'grid',
       gap: '{space.8}',
-      gridTemplateColumns: 'repeat(12, minmax(0, 1fr))'
+      // gridTemplateColumns: 'repeat(12, minmax(0, 1fr))'
+      gridTemplateColumns: 'minmax(250px, 250px) minmax(320px, 1fr) minmax(250px, 250px)'
     }
   },
   '.aside-nav': {
@@ -124,10 +114,14 @@ css({
       display: 'block',
       position: 'sticky',
       top: '{docus.header.height}',
-      gridColumn: 'span 2/span 2',
+      // gridColumn: 'span 2/span 2',
       alignSelf: 'flex-start',
       height: 'calc(100vh - {docus.header.height})',
       py: '{space.8}',
+      paddingRight: '{space.8}',
+      '.fluid &&': {
+        borderRight: '1px solid {elements.border.primary.default}',
+      }
     }
   },
   '.page-body': {
@@ -136,21 +130,9 @@ css({
     flexDirection: "column",
     flex: '1 1 0%',
     py: '{space.8}',
-    '&.one-column': {
-      '@lg': {
-        gridColumn: 'span 12 / span 12'
-      }
-    },
-    '&.two-column': {
-      '@lg': {
-        gridColumn: 'span 10 / span 10'
-      }
-    },
-    '&.three-column': {
-      '@lg': {
-        gridColumn: 'span 8 / span 8'
-      }
-    },
+    width: '100%',
+    maxWidth: '{docus.readableLine}',
+    mx: 'auto',
     '&.with-toc': {
       paddingTop: '{space.12}',
       '@lg': {
@@ -202,43 +184,49 @@ css({
     position: 'sticky',
     top: '{docus.header.height}',
     display: 'flex',
-    alignItems: 'center',
     mx: 'calc(0px - {space.4})',
     overflow: 'auto',
+    borderBottom: '1px solid {elements.border.primary.default}',
     '@sm': {
       mx: 'calc(0px - {space.6})',
     },
     '@lg': {
-      gridColumn: 'span 2 / span 2',
       mx: 0,
       alignSelf: 'flex-start',
       py: '{space.8}',
+      px: '{space.8}',
+      height: 'calc(100vh - {docus.header.height})',
+      maxHeight: 'none',
+      borderBottom: 'none',
+      '.fluid &&': {
+        borderLeft: '1px solid {elements.border.primary.default}',
+      }
     },
     '.toc-wrapper': {
       width: '100%',
+      height: '100%',
       backdropFilter: '{elements.backdrop.filter}',
       backgroundColor: '{elements.backdrop.background}',
-      px: '{space.4}',
-      '@sm': {
-        px: '{space.6}',
-      },
       '@lg': {
-        px: 0,
         backgroundColor: 'transparent',
         backdropFilter: 'none'
       },
       button: {
         display: 'flex',
         alignItems: 'center',
-        py: '{space.3}',
         width: '100%',
         height: '100%',
+        py: '{space.4}',
+        px: '{space.4}',
+        '@sm': {
+          px: '{space.6}',
+        },
         '@lg': {
           display: 'none'
         },
         '.title': {
-          fontSize: '{text.xs.fontSize}',
-          lineHeight: '{text.xs.lineHeight}',
+          fontSize: '{text.sm.fontSize}',
+          lineHeight: '{text.sm.lineHeight}',
           fontWeight: '{fontWeight.semibold}',
           marginRight: '{space.1}',
         },
@@ -255,7 +243,17 @@ css({
         display: 'none',
         marginBottom: '{space.4}',
         '&.opened': {
-          display: 'block'
+          display: 'block',
+          px: '{space.4}',
+          maxHeight: '50vh',
+          overflow: 'auto',
+          '@sm': {
+            px: '{space.6}',
+          },
+          '@lg': {
+            maxHeight: 'none',
+            px: 0,
+          },
         },
         '@lg': {
           marginTop: 0,

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <DocsPageContent>
+  <DocsPageLayout>
     <slot />
-  </DocsPageContent>
+  </DocsPageLayout>
 </template>

nuxt.schema.ts

@@ -72,6 +72,10 @@ export default defineNuxtConfigSchema({
          */
         medium: ''
       },
+      /**
+       * Theme layout.
+       */
+      layout: { fluid: true },
       /**
        * Aside navigation configuration
        *

tokens.config.ts

@@ -13,7 +13,8 @@ export default defineTheme({
       ]
     },
     header: { height: '64px' },
-    footer: { padding: '{space.4} 0' }
+    footer: { padding: '{space.4} 0' },
+    readableLine: '78ch'
   },
   typography: {
     color: {