{
"name": "resizable",
"type": "registry:component",
"files": [
{
"name": "resizable.component.ts",
"content": "import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n type AfterContentInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChildren,\n ElementRef,\n inject,\n input,\n type OnDestroy,\n output,\n PLATFORM_ID,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardResizablePanelComponent } from '@/shared/components/resizable/resizable-panel.component';\nimport { resizableVariants, type ZardResizableLayoutVariants } from '@/shared/components/resizable/resizable.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nexport interface ZardResizeEvent {\n sizes: number[];\n layout: 'horizontal' | 'vertical';\n}\n\n@Component({\n selector: 'z-resizable, [z-resizable]',\n template: `\n \n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'data-slot': 'resizable-panel-group',\n '[attr.data-group]': 'true',\n '[class]': 'classes()',\n '[attr.aria-orientation]': 'zLayout()',\n },\n exportAs: 'zResizable',\n})\nexport class ZardResizableComponent implements AfterContentInit, OnDestroy {\n private readonly elementRef = inject(ElementRef);\n private readonly platformId = inject(PLATFORM_ID);\n private readonly document = inject(DOCUMENT);\n\n private readonly isBrowser = isPlatformBrowser(this.platformId);\n private readonly isResizing = signal(false);\n private listenersCleanup!: () => void | undefined;\n\n readonly zLayout = input('horizontal');\n readonly zLazy = input(false, { transform: booleanAttribute });\n readonly class = input('');\n\n readonly zResizeStart = output();\n readonly zResize = output();\n readonly zResizeEnd = output();\n\n readonly panels = contentChildren(ZardResizablePanelComponent);\n readonly panelSizes = signal([]);\n protected readonly activeHandleIndex = signal(null);\n protected readonly classes = computed(() =>\n mergeClasses(resizableVariants({ zLayout: this.zLayout() }), this.class()),\n );\n\n ngAfterContentInit(): void {\n this.initializePanelSizes();\n }\n\n ngOnDestroy(): void {\n this.listenersCleanup?.();\n }\n\n convertToPercentage(value: number | string, containerSize: number): number {\n if (typeof value === 'number') {\n return value;\n }\n\n if (typeof value === 'string') {\n if (value.endsWith('%')) {\n return Number.parseFloat(value);\n }\n if (value.endsWith('px')) {\n const pixels = Number.parseFloat(value);\n\n if (containerSize <= 0) {\n return 0;\n }\n return (pixels / containerSize) * 100;\n }\n }\n\n return Number.parseFloat(value.toString()) || 0;\n }\n\n private initializePanelSizes(): void {\n const panels = this.panels();\n const totalPanels = panels.length;\n\n if (totalPanels === 0) {\n return;\n }\n\n const containerSize = this.getContainerSize();\n const sizes = panels.map(panel => {\n const defaultSize = panel.zDefaultSize();\n if (defaultSize !== undefined) {\n return this.convertToPercentage(defaultSize, containerSize);\n }\n return 100 / totalPanels;\n });\n\n this.panelSizes.set(sizes);\n this.updatePanelStyles();\n }\n\n startResize(handleIndex: number, event: MouseEvent | TouchEvent): void {\n event.preventDefault();\n this.isResizing.set(true);\n this.activeHandleIndex.set(handleIndex);\n\n const sizes = [...this.panelSizes()];\n this.zResizeStart.emit({ sizes, layout: this.zLayout() ?? 'horizontal' });\n\n const startPosition = this.getEventPosition(event);\n const startSizes = [...sizes];\n\n const handleMove = (moveEvent: MouseEvent | TouchEvent) => {\n this.handleResize(moveEvent, handleIndex, startPosition, startSizes);\n };\n\n const handleEnd = () => {\n this.endResize();\n if (this.isBrowser) {\n this.listenersCleanup?.();\n }\n };\n\n if (this.isBrowser) {\n this.document.addEventListener('mousemove', handleMove);\n this.document.addEventListener('touchmove', handleMove);\n this.document.addEventListener('mouseup', handleEnd);\n this.document.addEventListener('touchend', handleEnd);\n\n this.listenersCleanup = () => {\n this.document.removeEventListener('mousemove', handleMove);\n this.document.removeEventListener('touchmove', handleMove);\n this.document.removeEventListener('mouseup', handleEnd);\n this.document.removeEventListener('touchend', handleEnd);\n };\n }\n }\n\n private handleResize(\n event: MouseEvent | TouchEvent,\n handleIndex: number,\n startPosition: number,\n startSizes: number[],\n ): void {\n const currentPosition = this.getEventPosition(event);\n const delta = currentPosition - startPosition;\n const containerSize = this.getContainerSize();\n const deltaPercentage = (delta / containerSize) * 100;\n\n const newSizes = [...startSizes];\n const panels = this.panels();\n\n const leftPanel = panels[handleIndex];\n const rightPanel = panels[handleIndex + 1];\n\n if (!leftPanel || !rightPanel) {\n return;\n }\n\n const leftMin = this.convertToPercentage(leftPanel.zMin(), containerSize);\n const leftMax = this.convertToPercentage(leftPanel.zMax(), containerSize);\n const rightMin = this.convertToPercentage(rightPanel.zMin(), containerSize);\n const rightMax = this.convertToPercentage(rightPanel.zMax(), containerSize);\n\n let newLeftSize = startSizes[handleIndex] + deltaPercentage;\n let newRightSize = startSizes[handleIndex + 1] - deltaPercentage;\n\n newLeftSize = Math.max(leftMin, Math.min(leftMax, newLeftSize));\n newRightSize = Math.max(rightMin, Math.min(rightMax, newRightSize));\n\n const totalSize = newLeftSize + newRightSize;\n const originalTotal = startSizes[handleIndex] + startSizes[handleIndex + 1];\n\n if (Math.abs(totalSize - originalTotal) < 0.01) {\n newSizes[handleIndex] = newLeftSize;\n newSizes[handleIndex + 1] = newRightSize;\n\n this.panelSizes.set(newSizes);\n\n if (!this.zLazy()) {\n this.updatePanelStyles();\n }\n\n this.zResize.emit({ sizes: newSizes, layout: this.zLayout() ?? 'horizontal' });\n }\n }\n\n private endResize(): void {\n this.isResizing.set(false);\n this.activeHandleIndex.set(null);\n\n if (this.zLazy()) {\n this.updatePanelStyles();\n }\n\n const sizes = [...this.panelSizes()];\n this.zResizeEnd.emit({ sizes, layout: this.zLayout() ?? 'horizontal' });\n }\n\n updatePanelStyles(): void {\n const panels = this.panels();\n const sizes = this.panelSizes();\n const layout = this.zLayout();\n\n for (let index = 0; index < panels.length; index++) {\n const size = sizes[index];\n if (size !== undefined && size !== null) {\n const element = panels[index].elementRef.nativeElement as HTMLElement;\n if (layout === 'vertical') {\n element.style.height = `${size}%`;\n element.style.width = '100%';\n } else {\n element.style.width = `${size}%`;\n element.style.height = '100%';\n }\n }\n }\n }\n\n private getEventPosition(event: MouseEvent | TouchEvent): number {\n const layout = this.zLayout();\n let position = 0;\n\n if (event instanceof MouseEvent) {\n position = layout === 'vertical' ? event.clientY : event.clientX;\n } else {\n const touch = event.touches.item(0);\n if (touch) {\n const { clientX, clientY } = touch;\n position = layout === 'vertical' ? clientY : clientX;\n }\n }\n\n return position;\n }\n\n getContainerSize(): number {\n const element = this.elementRef.nativeElement as HTMLElement;\n const layout = this.zLayout();\n const { offsetHeight, offsetWidth } = element;\n return layout === 'vertical' ? offsetHeight : offsetWidth;\n }\n\n // TODO: Consider simplifying collapse logic - handle edge cases where totalOthers is 0 more explicitly\n collapsePanel(index: number): void {\n const panels = this.panels();\n const panel = panels[index];\n\n if (!panel?.zCollapsible()) {\n return;\n }\n\n let sizes = [...this.panelSizes()];\n const isCollapsed = sizes[index] === 0;\n\n if (isCollapsed) {\n const containerSize = this.getContainerSize();\n const defaultSize = this.convertToPercentage(panel.zDefaultSize() ?? 100 / panels.length, containerSize);\n\n sizes[index] = defaultSize;\n\n const totalOthers = this.othersTotal(sizes, index);\n if (totalOthers === 0) {\n const share = (100 - defaultSize) / (sizes.length - 1);\n sizes = sizes.map((s, i) => (i === index ? defaultSize : share));\n } else {\n const scale = (100 - defaultSize) / totalOthers;\n sizes = this.scaleSizes(sizes, index, scale);\n }\n } else {\n const collapsedSize = sizes[index];\n\n sizes[index] = 0;\n\n const totalOthers = this.othersTotal(sizes, index);\n if (totalOthers === 0) {\n const share = (100 - collapsedSize) / (sizes.length - 1);\n sizes = sizes.map((s, i) => (i === index ? collapsedSize : share));\n } else {\n const scale = (totalOthers + collapsedSize) / totalOthers;\n sizes = this.scaleSizes(sizes, index, scale);\n }\n }\n\n this.panelSizes.set(sizes);\n this.updatePanelStyles();\n this.zResize.emit({ sizes, layout: this.zLayout() ?? 'horizontal' });\n }\n\n private scaleSizes(sizes: number[], index: number, scale: number): number[] {\n return sizes.map((size, i) => (i === index ? size : size * scale));\n }\n\n private othersTotal(sizes: number[], index: number): number {\n return sizes.reduce((sum, size, i) => (i === index ? sum : sum + size), 0);\n }\n}\n"
},
{
"name": "resizable-panel.component.ts",
"content": "import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { resizablePanelVariants } from '@/shared/components/resizable/resizable.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n selector: 'z-resizable-panel',\n template: `\n \n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'data-slot': 'resizable-panel',\n '[class]': 'classes()',\n '[attr.data-collapsed]': 'isCollapsed()',\n '[attr.data-panel]': 'true',\n },\n exportAs: 'zResizablePanel',\n})\nexport class ZardResizablePanelComponent {\n readonly elementRef = inject(ElementRef);\n\n readonly zDefaultSize = input(undefined);\n readonly zMin = input(0);\n readonly zMax = input(100);\n readonly zCollapsible = input(false, { transform: booleanAttribute });\n readonly zResizable = input(true, { transform: booleanAttribute });\n readonly class = input('');\n\n protected readonly isCollapsed = computed(() => {\n const element = this.elementRef.nativeElement as HTMLElement;\n const width = Number.parseFloat(element.style.width || '0');\n const height = Number.parseFloat(element.style.height || '0');\n return width === 0 || height === 0;\n });\n\n protected readonly classes = computed(() =>\n mergeClasses(resizablePanelVariants({ zCollapsed: this.isCollapsed() }), this.class()),\n );\n}\n"
},
{
"name": "resizable-handle.component.ts",
"content": "import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n inject,\n input,\n signal,\n ViewEncapsulation,\n type WritableSignal,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardResizableComponent } from '@/shared/components/resizable/resizable.component';\nimport {\n resizableHandleIndicatorVariants,\n resizableHandleVariants,\n} from '@/shared/components/resizable/resizable.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n selector: 'z-resizable-handle, [z-resizable-handle]',\n template: `\n @if (zWithHandle()) {\n \n }\n `,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n 'data-slot': 'resizable-handle',\n role: 'separator',\n '[class]': 'classes()',\n '[attr.tabindex]': 'zDisabled() ? null : 0',\n '[attr.aria-orientation]': 'layout()',\n '[attr.aria-disabled]': 'zDisabled()',\n '[attr.data-separator]': 'dataSeparator()',\n '(mouseenter)': 'handleMouseHover(true)',\n '(mouseleave)': 'handleMouseHover(false)',\n '(mousedown)': 'handleMouseDown($event)',\n '(mouseup)': 'handleMouseUp()',\n '(touchstart)': 'handleTouchStart($event)',\n '(touchend)': 'handleTouchEnd()',\n '(keydown.{arrowleft,arrowright,arrowup,arrowdown,home,end,enter,space}.prevent)': 'handleKeyDown($event)',\n },\n exportAs: 'zResizableHandle',\n})\nexport class ZardResizableHandleComponent {\n private readonly resizable = inject(ZardResizableComponent, { optional: true });\n\n readonly zWithHandle = input(false, { transform: booleanAttribute });\n readonly zDisabled = input(false, { transform: booleanAttribute });\n readonly zHandleIndex = input(0);\n readonly class = input('');\n\n protected isMouseDown = false;\n\n protected readonly layout = computed(() => {\n if (this.resizable) {\n const groupOrientation = this.resizable.zLayout();\n return groupOrientation === 'horizontal' ? 'vertical' : 'horizontal';\n }\n return 'vertical';\n });\n\n protected readonly classes = computed(() =>\n mergeClasses(\n resizableHandleVariants({\n zLayout: this.layout(),\n zDisabled: this.zDisabled(),\n }),\n this.class(),\n ),\n );\n\n protected readonly dataSeparator: WritableSignal<'inactive' | 'active' | 'hover'> = signal('inactive');\n\n protected readonly handleClasses = resizableHandleIndicatorVariants();\n\n handleMouseDown(event: MouseEvent): void {\n if (!this.canResize() || !this.resizable) {\n return;\n }\n this.isMouseDown = true;\n this.dataSeparator.set('active');\n this.resizable.startResize(this.zHandleIndex(), event);\n }\n\n handleMouseUp(): void {\n this.isMouseDown = false;\n this.dataSeparator.set('inactive');\n }\n\n handleMouseHover(isHover: boolean): void {\n if (this.zDisabled() || !this.resizable || this.isMouseDown) {\n return;\n }\n this.dataSeparator.update(() => (isHover ? 'hover' : 'inactive'));\n }\n\n handleTouchStart(event: TouchEvent): void {\n if (!this.canResize() || !this.resizable) {\n return;\n }\n this.resizable.startResize(this.zHandleIndex(), event);\n }\n\n handleTouchEnd(): void {\n if (this.zDisabled() || !this.resizable) {\n return;\n }\n this.dataSeparator.set('inactive');\n }\n\n private canResize(): boolean {\n if (this.zDisabled() || !this.resizable) {\n return false;\n }\n const panels = this.resizable.panels();\n const handleIndex = this.zHandleIndex();\n return !!panels[handleIndex]?.zResizable() && !!panels[handleIndex + 1]?.zResizable();\n }\n\n handleKeyDown(event: Event): void {\n if (this.zDisabled() || !this.resizable) {\n return;\n }\n const { key, shiftKey } = event as KeyboardEvent;\n\n const panels = this.resizable.panels();\n const handleIndex = this.zHandleIndex();\n const layout = this.layout();\n\n let delta = 0;\n const step = shiftKey ? 10 : 1;\n\n switch (key) {\n case 'ArrowLeft':\n if (layout === 'vertical') {\n delta = -step;\n }\n break;\n case 'ArrowRight':\n if (layout === 'vertical') {\n delta = step;\n }\n break;\n case 'ArrowUp':\n if (layout === 'horizontal') {\n delta = -step;\n }\n break;\n case 'ArrowDown':\n if (layout === 'horizontal') {\n delta = step;\n }\n break;\n case 'Home':\n this.moveToExtreme(true);\n break;\n case 'End':\n this.moveToExtreme(false);\n break;\n case 'Enter':\n case ' ':\n if (panels[handleIndex]?.zCollapsible() || panels[handleIndex + 1]?.zCollapsible()) {\n const collapsibleIndex = panels[handleIndex]?.zCollapsible() ? handleIndex : handleIndex + 1;\n this.resizable.collapsePanel(collapsibleIndex);\n }\n break;\n default:\n break;\n }\n\n if (delta !== 0) {\n this.adjustSizes(delta);\n }\n }\n\n private adjustSizes(delta: number): void {\n if (!this.resizable) {\n return;\n }\n\n const panels = this.resizable.panels();\n const handleIndex = this.zHandleIndex();\n const sizes = [...this.resizable.panelSizes()];\n\n const leftPanel = panels[handleIndex];\n const rightPanel = panels[handleIndex + 1];\n\n if (!leftPanel || !rightPanel) {\n return;\n }\n\n const containerSize = this.resizable.getContainerSize();\n const { leftMin, leftMax, rightMin, rightMax } = this.normalizeMinMax(\n this.resizable.convertToPercentage(leftPanel.zMin(), containerSize),\n this.resizable.convertToPercentage(leftPanel.zMax(), containerSize),\n this.resizable.convertToPercentage(rightPanel.zMin(), containerSize),\n this.resizable.convertToPercentage(rightPanel.zMax(), containerSize),\n );\n\n let newLeftSize = sizes[handleIndex] + delta;\n let newRightSize = sizes[handleIndex + 1] - delta;\n\n newLeftSize = Math.max(leftMin, Math.min(leftMax, newLeftSize));\n newRightSize = Math.max(rightMin, Math.min(rightMax, newRightSize));\n\n const totalSize = newLeftSize + newRightSize;\n const originalTotal = sizes[handleIndex] + sizes[handleIndex + 1];\n\n if (Math.abs(totalSize - originalTotal) < 0.01) {\n sizes[handleIndex] = newLeftSize;\n sizes[handleIndex + 1] = newRightSize;\n\n this.resizable.panelSizes.set(sizes);\n this.resizable.updatePanelStyles();\n this.resizable.zResize.emit({\n sizes,\n layout: this.resizable.zLayout() ?? 'horizontal',\n });\n }\n }\n\n private moveToExtreme(toMin: boolean): void {\n if (!this.resizable) {\n return;\n }\n\n const panels = this.resizable.panels();\n const handleIndex = this.zHandleIndex();\n const sizes = [...this.resizable.panelSizes()];\n\n const leftPanel = panels[handleIndex];\n const rightPanel = panels[handleIndex + 1];\n\n if (!leftPanel || !rightPanel) {\n return;\n }\n\n const containerSize = this.resizable.getContainerSize();\n const { leftMin, leftMax, rightMin, rightMax } = this.normalizeMinMax(\n this.resizable.convertToPercentage(leftPanel.zMin(), containerSize),\n this.resizable.convertToPercentage(leftPanel.zMax(), containerSize),\n this.resizable.convertToPercentage(rightPanel.zMin(), containerSize),\n this.resizable.convertToPercentage(rightPanel.zMax(), containerSize),\n );\n\n const totalSize = sizes[handleIndex] + sizes[handleIndex + 1];\n\n if (toMin) {\n sizes[handleIndex] = leftMin;\n sizes[handleIndex + 1] = Math.min(totalSize - leftMin, rightMax);\n } else {\n sizes[handleIndex] = Math.min(totalSize - rightMin, leftMax);\n sizes[handleIndex + 1] = rightMin;\n }\n\n this.resizable.panelSizes.set(sizes);\n this.resizable.updatePanelStyles();\n this.resizable.zResize.emit({\n sizes,\n layout: this.resizable.zLayout() ?? 'horizontal',\n });\n }\n\n private normalizeMinMax(\n leftMin: number,\n leftMax: number,\n rightMin: number,\n rightMax: number,\n ): { leftMin: number; leftMax: number; rightMin: number; rightMax: number } {\n if (leftMax < leftMin) {\n const temp = leftMax;\n leftMax = leftMin;\n leftMin = temp;\n }\n\n if (rightMax < rightMin) {\n const temp = rightMax;\n rightMax = rightMin;\n rightMin = temp;\n }\n\n return { leftMin, leftMax, rightMin, rightMax };\n }\n}\n"
},
{
"name": "resizable.variants.ts",
"content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const resizableVariants = cva('flex size-full aria-[orientation=vertical]:flex-col', {\n variants: {\n zLayout: {\n horizontal: '',\n vertical: '',\n },\n },\n defaultVariants: {\n zLayout: 'horizontal',\n },\n});\n\nexport const resizablePanelVariants = cva('relative overflow-hidden shrink-0 h-full', {\n variants: {\n zCollapsed: {\n true: 'hidden',\n false: '',\n },\n },\n defaultVariants: {\n zCollapsed: false,\n },\n});\n\nexport const resizableHandleVariants = cva(\n 'relative flex min-w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:min-h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',\n {\n variants: {\n zLayout: {\n horizontal: 'cursor-ns-resize',\n vertical: 'cursor-ew-resize',\n },\n zDisabled: {\n true: 'cursor-default pointer-events-none opacity-50',\n false: '',\n },\n },\n defaultVariants: {\n zDisabled: false,\n },\n },\n);\n\nexport const resizableHandleIndicatorVariants = cva('z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border');\n\nexport type ZardResizableLayoutVariants = NonNullable['zLayout']>;\n"
},
{
"name": "resizable.imports.ts",
"content": "import { ZardResizableHandleComponent } from '@/shared/components/resizable/resizable-handle.component';\nimport { ZardResizablePanelComponent } from '@/shared/components/resizable/resizable-panel.component';\nimport { ZardResizableComponent } from '@/shared/components/resizable/resizable.component';\n\nexport const ZardResizableImports = [\n ZardResizableComponent,\n ZardResizableHandleComponent,\n ZardResizablePanelComponent,\n] as const;\n"
},
{
"name": "index.ts",
"content": "export * from '@/shared/components/resizable/resizable.component';\nexport * from '@/shared/components/resizable/resizable-panel.component';\nexport * from '@/shared/components/resizable/resizable-handle.component';\nexport * from '@/shared/components/resizable/resizable.imports';\nexport * from '@/shared/components/resizable/resizable.variants';\n"
}
],
"demos": [
{
"name": "preview.ts",
"content": "import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { ZardResizableImports } from '@/shared/components/resizable/resizable.imports';\n\n@Component({\n selector: 'z-demo-resizable-preview',\n imports: [...ZardResizableImports],\n template: `\n \n \n \n One\n
\n \n \n \n \n \n \n Two\n
\n \n \n \n \n Three\n
\n \n \n \n \n `,\n encapsulation: ViewEncapsulation.None,\n})\nexport class ZardDemoResizablePreviewComponent {}\n"
},
{
"name": "vertical.ts",
"content": "import { Component } from '@angular/core';\n\nimport { ZardResizableImports } from '@/shared/components/resizable/resizable.imports';\n\n@Component({\n selector: 'z-demo-resizable-vertical',\n imports: [...ZardResizableImports],\n template: `\n \n \n \n Header\n
\n \n \n \n \n Content\n
\n \n \n `,\n})\nexport class ZardDemoResizableVerticalComponent {}\n"
},
{
"name": "with-handle.ts",
"content": "import { Component } from '@angular/core';\n\nimport { ZardResizableImports } from '@/shared/components/resizable/resizable.imports';\n\n@Component({\n selector: 'z-demo-resizable-with-handle',\n imports: [...ZardResizableImports],\n template: `\n \n
\n \n \n Sidebar\n
\n \n \n \n \n Content\n
\n \n \n