docs(customization): add AppFooterLeft, AppFooterRight and DocsAsideLeftBody

Author: larbish

docs/content/en/2.concepts/5.customization.md

@@ -18,7 +18,7 @@ You can customize different parts of the header by overriding the following comp
 
 To replace the default logo in the header, create the `components/AppHeaderLogo.vue` file. Your component will replace the default one provided by Docus theme.
 
-![App header logo visualisation](/documentation/app-header-logo.webp){.rounded-lg.border.border-accented}
+![App header logo visualisation](/documentation/app-header-logo.webp){.rounded-lg.border.border-accented.w-full}
 
 ::u-button
 ---
@@ -34,7 +34,7 @@ Default component code
 
 To customize the call-to-action area in the header (for example, adding a “Get Started” button or external link), override the `components/AppHeaderCTA.vue` component.
 
-![App header CTA visualisation](/documentation/app-header-cta.webp){.rounded-lg.border.border-accented}
+![App header CTA visualisation](/documentation/app-header-cta.webp){.rounded-lg.border.border-accented.w-full}
 
 ::prose-note
 ---
@@ -47,7 +47,7 @@ By default this components is empty but you can have a look at how we're overrid
 
 To customize the center area in the header, override the `components/AppHeaderCenter.vue` component. Your component will replace the search bar provided by Docus theme.
 
-![App header logo visualisation](/documentation/app-header-center.webp){.rounded-lg.border.border-accented}
+![App header logo visualisation](/documentation/app-header-center.webp){.rounded-lg.border.border-accented.w-full}
 
 ::u-button
 ---
@@ -75,6 +75,42 @@ variant: link
 Default component code
 ::
 
+## App Footer
+
+You can customize different parts of the footer by overriding the following components:
+
+### `AppFooterLeft`
+
+To replace the left side of the header, create the `components/AppFooterLeft.vue` file. Your component will replace the default one provided by Docus theme.
+
+![App footer left visualisation](/documentation/app-footer-left.webp){.rounded-lg.border.border-accented.w-full}
+
+::u-button
+---
+color: neutral
+icon: i-lucide-code-xml
+to: https://github.com/nuxtlabs/docus/blob/main/layer/app/components/app/AppFooterLeft.vue
+variant: link
+---
+Default component code
+::
+
+### `AppFooterRight`
+
+To replace the right side of the footer, create the `components/AppFooterRight.vue` file. Your component will replace the default one provided by Docus theme.
+
+![App footer right visualisation](/documentation/app-footer-right.webp){.rounded-lg.border.border-accented.w-full}
+
+::u-button
+---
+color: neutral
+icon: i-lucide-code-xml
+to: https://github.com/nuxtlabs/docus/blob/main/layer/app/components/app/AppFooterRight.vue
+variant: link
+---
+Default component code
+::
+
 ## Docs
 
 You can also customize header and both asides of the documentation pages.
@@ -89,7 +125,7 @@ In the header right side of your documentation page, Docus default behaviour is
 
 These actions are especially useful for contributors, readers, or AI-assisted workflows but you can create your own `components/DocsPageHeaderLinks.vue` component to override it.
 
-![App Page Header Links](/documentation/app-page-header-links.webp){.rounded-lg.border.border-accented}
+![App Page Header Links](/documentation/app-page-header-links.webp){.rounded-lg.border.border-accented.w-full}
 
 ::u-button
 ---
@@ -105,7 +141,7 @@ Default component code
 
 To customize bottom part of the right aside of the documentation pages. You can create the`components/DocsAsideRightBottom.vue` component. Your component will replace the default bottom table of content provided by Docus theme.
 
-![Docs right aside bottom](/documentation/docs-aside-right-bottom.webp){.rounded-lg.border.border-accented}
+![Docs right aside bottom](/documentation/docs-aside-right-bottom.webp){.rounded-lg.border.border-accented.w-full}
 
 ::u-button
 ---
@@ -121,11 +157,27 @@ Default component code
 
 To customize top part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component.
 
-![Docs Aside Left Top](/documentation/docs-aside-left-top.webp){.rounded-lg.border.border-accented}
+![Docs Aside Left Top](/documentation/docs-aside-left-top.webp){.rounded-lg.border.border-accented.w-full}
 
 ::prose-note
 ---
 to: https://github.com/nuxt/image/blob/main/docs/app/components/DocsAsideLeftTop.vue
 ---
 By default this components is empty but you can have a look at how we're overriding it on Nuxt Image documentation itself.
 ::
+
+### `DocsAsideLeftBody`
+
+To customize main part of the left aside of the documentation pages. You can create the`components/DocsAsideLeftTop.vue` component. Your component will replace the default file navigation provided by Docus theme.
+
+![Docs aside left body visualisation](/documentation/docs-aside-left-body.webp){.rounded-lg.border.border-accented.w-full}
+
+::u-button
+---
+color: neutral
+icon: i-lucide-code-xml
+to: https://github.com/nuxtlabs/docus/blob/main/layer/app/components/docs/DocsAsideLeftBody.vue
+variant: link
+---
+Default component code
+::