diff --git a/bindings/odin/clay-odin/clay.odin b/bindings/odin/clay-odin/clay.odin
index 925dcc0..9423502 100644
--- a/bindings/odin/clay-odin/clay.odin
+++ b/bindings/odin/clay-odin/clay.odin
@@ -70,6 +70,19 @@ when ODIN_OS == .Windows {
EnumBackingType :: u8
}
+ElementConfigType :: enum EnumBackingType {
+ Rectangle = 1,
+ Border = 2,
+ Floating = 4,
+ Scroll = 8,
+ Image = 16,
+ Text = 32,
+ Custom = 64,
+ // Odin specific enum types
+ Id = 65,
+ Layout = 66,
+}
+
RenderCommandType :: enum EnumBackingType {
None,
Rectangle,
@@ -245,13 +258,19 @@ ClayArray :: struct($type: typeid) {
internalArray: [^]type,
}
+TypedConfig :: struct {
+ type: ElementConfigType,
+ config: rawptr,
+ id: ElementId,
+}
+
@(link_prefix = "Clay_", default_calling_convention = "c")
foreign Clay {
MinMemorySize :: proc() -> u32 ---
CreateArenaWithCapacityAndMemory :: proc(capacity: u32, offset: [^]u8) -> Arena ---
SetPointerState :: proc(position: Vector2, pointerDown: bool) ---
Initialize :: proc(arena: Arena, layoutDimensions: Dimensions) ---
- UpdateScrollContainers :: proc(isPointerActive: bool, scrollDelta: Vector2, deltaTime: c.float) ---
+ UpdateScrollContainers :: proc(enableDragScrolling: bool, scrollDelta: Vector2, deltaTime: c.float) ---
SetLayoutDimensions :: proc(dimensions: Dimensions) ---
BeginLayout :: proc() ---
EndLayout :: proc() -> ClayArray(RenderCommand) ---
@@ -264,17 +283,13 @@ foreign Clay {
@(link_prefix = "Clay_", default_calling_convention = "c", private)
foreign Clay {
- _OpenContainerElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig) ---
- _OpenRectangleElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) ---
- _OpenTextElement :: proc(id: ElementId, text: String, textConfig: ^TextElementConfig) ---
- _OpenImageElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) ---
- _OpenScrollElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^ScrollElementConfig) ---
- _OpenFloatingElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^FloatingElementConfig) ---
- _OpenBorderElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^BorderElementConfig) ---
- _OpenCustomElement :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^CustomElementConfig) ---
- _CloseElementWithChildren :: proc() ---
- _CloseScrollElement :: proc() ---
- _CloseFloatingElement :: proc() ---
+ _OpenElement :: proc() ---
+ _CloseElement :: proc() ---
+ _ElementPostConfiguration :: proc() ---
+ _OpenTextElement :: proc(text: String, textConfig: ^TextElementConfig) ---
+ _AttachId :: proc(id: ElementId) ---
+ _AttachLayoutConfig :: proc(layoutConfig: ^LayoutConfig) ---
+ _AttachElementConfig :: proc(config: rawptr, type: ElementConfigType) ---
_StoreLayoutConfig :: proc(config: LayoutConfig) -> ^LayoutConfig ---
_StoreRectangleElementConfig :: proc(config: RectangleElementConfig) -> ^RectangleElementConfig ---
_StoreTextElementConfig :: proc(config: TextElementConfig) -> ^TextElementConfig ---
@@ -287,103 +302,77 @@ foreign Clay {
_GetOpenLayoutElementId :: proc() -> u32 ---
}
-@(require_results, deferred_none = _CloseElementWithChildren)
-Container :: proc(id: ElementId, layoutConfig: ^LayoutConfig) -> bool {
- _OpenContainerElement(id, layoutConfig)
+@(require_results, deferred_none = _CloseElement)
+UI :: proc(configs: ..TypedConfig) -> bool {
+ _OpenElement()
+ for config in configs {
+ #partial switch (config.type) {
+ case ElementConfigType.Id:
+ _AttachId(config.id)
+ case ElementConfigType.Layout:
+ _AttachLayoutConfig(cast(^LayoutConfig)config.config)
+ case:
+ _AttachElementConfig(config.config, config.type)
+ }
+ }
+ _ElementPostConfiguration()
return true
}
-@(require_results, deferred_none = _CloseElementWithChildren)
-Rectangle :: proc(id: ElementId, layoutConfig: ^LayoutConfig, rectangleConfig: ^RectangleElementConfig) -> bool {
- _OpenRectangleElement(id, layoutConfig, rectangleConfig)
- return true
+Layout :: proc(config: LayoutConfig) -> TypedConfig {
+ return {type = ElementConfigType.Layout, config = _StoreLayoutConfig(config) }
}
-Text :: proc(id: ElementId, text: string, textConfig: ^TextElementConfig) -> bool {
- _OpenTextElement(id, MakeString(text), textConfig)
- return true
+Rectangle :: proc(config: RectangleElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Rectangle, config = _StoreRectangleElementConfig(config)}
}
-@(require_results, deferred_none = _CloseElementWithChildren)
-Image :: proc(id: ElementId, layoutConfig: ^LayoutConfig, imageConfig: ^ImageElementConfig) -> bool {
- _OpenImageElement(id, layoutConfig, imageConfig)
- return true
-}
-
-@(require_results, deferred_none = _CloseScrollElement)
-Scroll :: proc(id: ElementId, layoutConfig: ^LayoutConfig, scrollConfig: ^ScrollElementConfig) -> bool {
- _OpenScrollElement(id, layoutConfig, scrollConfig)
- return true
-}
-
-@(require_results, deferred_none = _CloseFloatingElement)
-Floating :: proc(id: ElementId, layoutConfig: ^LayoutConfig, floatingConfig: ^FloatingElementConfig) -> bool {
- _OpenFloatingElement(id, layoutConfig, floatingConfig)
- return true
-}
-
-@(require_results, deferred_none = _CloseElementWithChildren)
-Border :: proc(id: ElementId, layoutConfig: ^LayoutConfig, borderConfig: ^BorderElementConfig) -> bool {
- _OpenBorderElement(id, layoutConfig, borderConfig)
- return true
-}
-
-@(require_results, deferred_none = _CloseElementWithChildren)
-Custom :: proc(id: ElementId, layoutConfig: ^LayoutConfig, customConfig: ^CustomElementConfig) -> bool {
- _OpenCustomElement(id, layoutConfig, customConfig)
- return true
-}
-
-Layout :: proc(config: LayoutConfig) -> ^LayoutConfig {
- return _StoreLayoutConfig(config)
-}
-
-RectangleConfig :: proc(config: RectangleElementConfig) -> ^RectangleElementConfig {
- return _StoreRectangleElementConfig(config)
+Text :: proc(text: string, config: ^TextElementConfig) {
+ _OpenTextElement(MakeString(text), config)
}
TextConfig :: proc(config: TextElementConfig) -> ^TextElementConfig {
return _StoreTextElementConfig(config)
}
-ImageConfig :: proc(config: ImageElementConfig) -> ^ImageElementConfig {
- return _StoreImageElementConfig(config)
+Image :: proc(config: ImageElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Image, config = _StoreImageElementConfig(config)}
}
-FloatingConfig :: proc(config: FloatingElementConfig) -> ^FloatingElementConfig {
- return _StoreFloatingElementConfig(config)
+Floating :: proc(config: FloatingElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Floating, config = _StoreFloatingElementConfig(config)}
}
-CustomConfig :: proc(config: CustomElementConfig) -> ^CustomElementConfig {
- return _StoreCustomElementConfig(config)
+Custom :: proc(config: CustomElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Custom, config = _StoreCustomElementConfig(config)}
}
-ScrollConfig :: proc(config: ScrollElementConfig) -> ^ScrollElementConfig {
- return _StoreScrollElementConfig(config)
+Scroll :: proc(config: ScrollElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Scroll, config = _StoreScrollElementConfig(config)}
}
-BorderConfig :: proc(config: BorderElementConfig) -> ^BorderElementConfig {
- return _StoreBorderElementConfig(config)
+Border :: proc(config: BorderElementConfig) -> TypedConfig {
+ return {type = ElementConfigType.Border, config = _StoreBorderElementConfig(config)}
}
-BorderConfigOutside :: proc(outsideBorders: BorderData) -> ^BorderElementConfig {
- return _StoreBorderElementConfig((BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders})
+BorderOutside :: proc(outsideBorders: BorderData) -> TypedConfig {
+ return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders}) }
}
-BorderConfigOutsideRadius :: proc(outsideBorders: BorderData, radius: f32) -> ^BorderElementConfig {
- return _StoreBorderElementConfig(
+BorderOutsideRadius :: proc(outsideBorders: BorderData, radius: f32) -> TypedConfig {
+ return { type = ElementConfigType.Border, config = _StoreBorderElementConfig(
(BorderElementConfig){left = outsideBorders, right = outsideBorders, top = outsideBorders, bottom = outsideBorders, cornerRadius = {radius, radius, radius, radius}},
- )
+ ) }
}
-BorderConfigAll :: proc(allBorders: BorderData) -> ^BorderElementConfig {
- return _StoreBorderElementConfig((BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders})
+BorderAll :: proc(allBorders: BorderData) -> TypedConfig {
+ return { type = ElementConfigType.Border, config = _StoreBorderElementConfig((BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, betweenChildren = allBorders}) }
}
-BorderConfigAllRadius :: proc(allBorders: BorderData, radius: f32) -> ^BorderElementConfig {
- return _StoreBorderElementConfig(
+BorderAllRadius :: proc(allBorders: BorderData, radius: f32) -> TypedConfig {
+ return { type = ElementConfigType.Border, config = _StoreBorderElementConfig(
(BorderElementConfig){left = allBorders, right = allBorders, top = allBorders, bottom = allBorders, cornerRadius = {radius, radius, radius, radius}},
- )
+ ) }
}
CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
@@ -410,10 +399,6 @@ MakeString :: proc(label: string) -> String {
return String{chars = raw_data(label), length = cast(c.int)len(label)}
}
-ID :: proc(label: string, index: u32 = 0) -> ElementId {
- return _HashString(MakeString(label), index, 0)
-}
-
-IDLocal :: proc(label: string, index: u32 = 0) -> ElementId {
- return _HashString(MakeString(label), index, _GetOpenLayoutElementId())
+ID :: proc(label: string, index: u32 = 0) -> TypedConfig {
+ return { type = ElementConfigType.Id, id = _HashString(MakeString(label), index, 0) }
}
diff --git a/bindings/odin/clay-odin/linux/clay.a b/bindings/odin/clay-odin/linux/clay.a
index 1b8fc49..15d474c 100644
Binary files a/bindings/odin/clay-odin/linux/clay.a and b/bindings/odin/clay-odin/linux/clay.a differ
diff --git a/bindings/odin/clay-odin/macos-arm64/clay.a b/bindings/odin/clay-odin/macos-arm64/clay.a
index 62858f6..ca45576 100644
Binary files a/bindings/odin/clay-odin/macos-arm64/clay.a and b/bindings/odin/clay-odin/macos-arm64/clay.a differ
diff --git a/bindings/odin/clay-odin/macos/clay.a b/bindings/odin/clay-odin/macos/clay.a
index 0058fa5..d2e6b6b 100644
Binary files a/bindings/odin/clay-odin/macos/clay.a and b/bindings/odin/clay-odin/macos/clay.a differ
diff --git a/bindings/odin/clay-odin/wasm/clay.o b/bindings/odin/clay-odin/wasm/clay.o
index 151b60a..aff44a5 100644
Binary files a/bindings/odin/clay-odin/wasm/clay.o and b/bindings/odin/clay-odin/wasm/clay.o differ
diff --git a/bindings/odin/clay-odin/windows/clay.lib b/bindings/odin/clay-odin/windows/clay.lib
index 9db2ba2..af6ce18 100644
Binary files a/bindings/odin/clay-odin/windows/clay.lib and b/bindings/odin/clay-odin/windows/clay.lib differ
diff --git a/bindings/odin/examples/clay-official-website/clay-official-website.odin b/bindings/odin/examples/clay-official-website/clay-official-website.odin
index 8b64d70..ff39900 100644
--- a/bindings/odin/examples/clay-official-website/clay-official-website.odin
+++ b/bindings/odin/examples/clay-official-website/clay-official-website.odin
@@ -58,44 +58,42 @@ headerTextConfig := clay.TextElementConfig {
}
LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) {
- if clay.Border(
+ if clay.UI(
clay.ID("HeroBlob", index),
clay.Layout({sizing = {width = clay.SizingGrow({max = 480})}, padding = clay.Padding{16, 16}, childGap = 16, childAlignment = clay.ChildAlignment{y = .CENTER}}),
- clay.BorderConfigOutsideRadius({2, color}, 10),
+ clay.BorderOutsideRadius({2, color}, 10),
) {
- if clay.Image(
+ if clay.UI(
clay.ID("CheckImage", index),
clay.Layout({sizing = {width = clay.SizingFixed(32)}}),
- clay.ImageConfig({imageData = image, sourceDimensions = {128, 128}}),
+ clay.Image({imageData = image, sourceDimensions = {128, 128}}),
) {}
- clay.Text(clay.ID("HeroBlobText", index), text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
+ clay.Text(text, clay.TextConfig({fontSize = fontSize, fontId = fontId, textColor = color}))
}
}
LandingPageDesktop :: proc() {
- if clay.Container(
+ if clay.UI(
clay.ID("LandingPage1Desktop"),
clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFit({min = cast(f32)windowHeight - 70})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
) {
- if clay.Border(
+ if clay.UI(
clay.ID("LandingPage1"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
- clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
+ clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
) {
- if clay.Container(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+ if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.55)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
clay.Text(
- clay.ID("LeftTextTitle"),
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
clay.TextConfig({fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
)
- if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
+ if clay.UI(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
clay.Text(
- clay.ID("LeftTextTagline"),
"Clay is laying out this webpage right now!",
clay.TextConfig({fontSize = 36, fontId = FONT_ID_TITLE_36, textColor = COLOR_ORANGE}),
)
}
- if clay.Container(
+ if clay.UI(
clay.ID("HeroImageOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingPercent(0.45)}, childAlignment = {x = .CENTER}, childGap = 16}),
) {
@@ -110,7 +108,7 @@ LandingPageDesktop :: proc() {
}
LandingPageMobile :: proc() {
- if clay.Container(
+ if clay.UI(
clay.ID("LandingPage1Mobile"),
clay.Layout(
{
@@ -122,20 +120,18 @@ LandingPageMobile :: proc() {
},
),
) {
- if clay.Container(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+ if clay.UI(clay.ID("LeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
clay.Text(
- clay.ID("LeftTextTitle"),
"Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}),
)
- if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
+ if clay.UI(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(32)}})) {}
clay.Text(
- clay.ID("LeftTextTagline"),
"Clay is laying out this webpage right now!",
clay.TextConfig({fontSize = 32, fontId = FONT_ID_TITLE_32, textColor = COLOR_ORANGE}),
)
}
- if clay.Container(
+ if clay.UI(
clay.ID("HeroImageOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}, childGap = 16}),
) {
@@ -150,32 +146,32 @@ LandingPageMobile :: proc() {
FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED})
- if clay.Container(
+ if clay.UI(
clay.ID("HFileBoxOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {outerPadding, 32}, childGap = 8}),
) {
- if clay.Rectangle(clay.ID("HFileIncludeOuter"), clay.Layout({padding = {8, 4}}), clay.RectangleConfig({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)})) {
- clay.Text(clay.ID("HFileBoxText", 2), "#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
+ if clay.UI(clay.ID("HFileIncludeOuter"), clay.Layout({padding = {8, 4}}), clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8)})) {
+ clay.Text("#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
}
- clay.Text(clay.ID("HFileSecondLine"), "~2000 lines of C99.", textConfig)
- clay.Text(clay.ID("HFileBoxText", 5), "Zero dependencies, including no C standard library.", textConfig)
+ clay.Text("~2000 lines of C99.", textConfig)
+ clay.Text("Zero dependencies, including no C standard library.", textConfig)
}
- if clay.Container(
+ if clay.UI(
clay.ID("BringYourOwnRendererOuter"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = widthSizing}, childAlignment = {y = .CENTER}, padding = {x = outerPadding, y = 32}, childGap = 8}),
) {
- clay.Text(clay.ID("ZeroDependenciesText", 1), "Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
- clay.Text(clay.ID("ZeroDependenciesText", 2), "Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig)
- clay.Text(clay.ID("ZeroDependenciesText", 3), "Flexible output for easy compositing in your custom engine or environment.", textConfig)
+ clay.Text("Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
+ clay.Text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig)
+ clay.Text("Flexible output for easy compositing in your custom engine or environment.", textConfig)
}
}
FeatureBlocksDesktop :: proc() {
- if clay.Container(clay.ID("FeatureBlocksOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) {
- if clay.Border(
+ if clay.UI(clay.ID("FeatureBlocksOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) {
+ if clay.UI(
clay.ID("FeatureBlocksInner"),
clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {y = .CENTER}}),
- clay.BorderConfig({betweenChildren = {width = 2, color = COLOR_RED}}),
+ clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}),
) {
FeatureBlocks(clay.SizingPercent(0.5), 50)
}
@@ -183,53 +179,50 @@ FeatureBlocksDesktop :: proc() {
}
FeatureBlocksMobile :: proc() {
- if clay.Border(
+ if clay.UI(
clay.ID("FeatureBlocksInner"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}}),
- clay.BorderConfig({betweenChildren = {width = 2, color = COLOR_RED}}),
+ clay.Border({betweenChildren = {width = 2, color = COLOR_RED}}),
) {
FeatureBlocks(clay.SizingGrow({}), 16)
}
}
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
- if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
- clay.Text(clay.ID("SyntaxPageTextTitle"), "Declarative Syntax", clay.TextConfig(titleTextConfig))
- if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
+ if clay.UI(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+ clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig))
+ if clay.UI(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
clay.Text(
- clay.ID("SyntaxPageTextSubTitle1"),
"Flexible and readable declarative syntax with nested UI element hierarchies.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
)
clay.Text(
- clay.ID("SyntaxPageTextSubTitle2"),
"Mix elements with standard C code like loops, conditionals and functions.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
)
clay.Text(
- clay.ID("SyntaxPageTextSubTitle3"),
"Create your own library of re-usable components from UI primitives like text, images and rectangles.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
)
}
- if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
- if clay.Image(
+ if clay.UI(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
+ if clay.UI(
clay.ID("SyntaxPageRightImage"),
clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}),
- clay.ImageConfig({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}),
+ clay.Image({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}),
) {}
}
}
DeclarativeSyntaxPageDesktop :: proc() {
- if clay.Container(
+ if clay.UI(
clay.ID("SyntaxPageDesktop"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
) {
- if clay.Border(
+ if clay.UI(
clay.ID("SyntaxPage"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
- clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
+ clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
) {
DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
}
@@ -237,7 +230,7 @@ DeclarativeSyntaxPageDesktop :: proc() {
}
DeclarativeSyntaxPageMobile :: proc() {
- if clay.Container(
+ if clay.UI(
clay.ID("SyntaxPageMobile"),
clay.Layout(
{
@@ -260,63 +253,60 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
LOREM_IPSUM_TEXT := "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
- if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
- clay.Text(clay.ID("PerformanceTextTitle"), "High Performance", clay.TextConfig(titleTextConfig))
- if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
+ if clay.UI(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+ clay.Text("High Performance", clay.TextConfig(titleTextConfig))
+ if clay.UI(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
clay.Text(
- clay.ID("PerformanceTextSubTitle", 1),
"Fast enough to recompute your entire UI every frame.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
)
clay.Text(
- clay.ID("PerformanceTextSubTitle", 2),
"Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
)
clay.Text(
- clay.ID("PerformanceTextSubTitle", 3),
"Simplify animations and reactive UI design by avoiding the standard performance hacks.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
)
}
- if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
- if clay.Border(
+ if clay.UI(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
+ if clay.UI(
clay.ID("PerformanceRightBorder"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}),
- clay.BorderConfigAll({width = 2, color = COLOR_LIGHT}),
+ clay.BorderAll({width = 2, color = COLOR_LIGHT}),
) {
- if clay.Rectangle(
+ if clay.UI(
clay.ID("AnimationDemoContainerLeft"),
clay.Layout({sizing = {clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {16, 16}}),
- clay.RectangleConfig({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}),
+ clay.Rectangle({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}),
) {
- clay.Text(clay.ID("AnimationDemoTextLeft"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
+ clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
}
- if clay.Rectangle(
+ if clay.UI(
clay.ID("AnimationDemoContainerRight"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {16, 16}}),
- clay.RectangleConfig({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}),
+ clay.Rectangle({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}),
) {
- clay.Text(clay.ID("AnimationDemoTextRight"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
+ clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
}
}
}
}
HighPerformancePageDesktop :: proc(lerpValue: f32) {
- if clay.Rectangle(
+ if clay.UI(
clay.ID("PerformanceDesktop"),
clay.Layout(
{sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 82, y = 32}, childGap = 64},
),
- clay.RectangleConfig({color = COLOR_RED}),
+ clay.Rectangle({color = COLOR_RED}),
) {
HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5))
}
}
HighPerformancePageMobile :: proc(lerpValue: f32) {
- if clay.Rectangle(
+ if clay.UI(
clay.ID("PerformanceMobile"),
clay.Layout(
{
@@ -327,73 +317,69 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
childGap = 32,
},
),
- clay.RectangleConfig({color = COLOR_RED}),
+ clay.Rectangle({color = COLOR_RED}),
) {
HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
}
}
-RendererButtonActive :: proc(id: clay.ElementId, index: i32, text: string) {
- if clay.Rectangle(
- id,
+RendererButtonActive :: proc(index: i32, text: string) {
+ if clay.UI(
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = {16, 16}}),
- clay.RectangleConfig({color = clay.PointerOver(id) ? COLOR_RED_HOVER : COLOR_RED, cornerRadius = clay.CornerRadiusAll(10)}),
+ clay.Rectangle({color = COLOR_RED, cornerRadius = clay.CornerRadiusAll(10)}),
) {
- clay.Text(clay.ID("RendererButtonActiveText"), text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}))
+ clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}))
}
}
-RendererButtonInactive :: proc(id: clay.ElementId, index: u32, text: string) {
- if clay.Border(id, clay.Layout({}), clay.BorderConfigOutsideRadius({2, COLOR_RED}, 10)) {
- if clay.Rectangle(
+RendererButtonInactive :: proc(index: u32, text: string) {
+ if clay.UI(clay.Layout({}), clay.BorderOutsideRadius({2, COLOR_RED}, 10)) {
+ if clay.UI(
clay.ID("RendererButtonInactiveInner", index),
clay.Layout({sizing = {width = clay.SizingFixed(300)}, padding = {16, 16}}),
- clay.RectangleConfig({color = clay.PointerOver(id) ? COLOR_LIGHT_HOVER : COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}),
+ clay.Rectangle({color = COLOR_LIGHT, cornerRadius = clay.CornerRadiusAll(10)}),
) {
- clay.Text(clay.ID("RendererButtonInactiveText", index), text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}))
+ clay.Text(text, clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}))
}
}
}
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
- if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
- clay.Text(clay.ID("RendererTextTitle"), "Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
- if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
+ if clay.UI(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
+ clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
+ if clay.UI(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
clay.Text(
- clay.ID("RendererTextSubTitle", 1),
"Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
)
clay.Text(
- clay.ID("RendererTextSubTitle", 2),
"Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
)
clay.Text(
- clay.ID("RendererTextSubTitle", 3),
"There's even an HTML renderer - you're looking at it right now!",
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_RED}),
)
}
- if clay.Container(
+ if clay.UI(
clay.ID("RendererRightText"),
clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}),
) {
- clay.Text(clay.ID("RendererTextRightTitle"), "Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
- if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
- RendererButtonActive(clay.ID("RendererSelectButtonActive", 0), 0, "Raylib Renderer")
+ clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
+ if clay.UI(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
+ RendererButtonActive(0, "Raylib Renderer")
}
}
RendererPageDesktop :: proc() {
- if clay.Container(
+ if clay.UI(
clay.ID("RendererPageDesktop"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
) {
- if clay.Border(
+ if clay.UI(
clay.ID("RendererPage"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
- clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
+ clay.Border({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
) {
RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
}
@@ -401,7 +387,7 @@ RendererPageDesktop :: proc() {
}
RendererPageMobile :: proc() {
- if clay.Rectangle(
+ if clay.UI(
clay.ID("RendererMobile"),
clay.Layout(
{
@@ -412,7 +398,7 @@ RendererPageMobile :: proc() {
childGap = 32,
},
),
- clay.RectangleConfig({color = COLOR_LIGHT}),
+ clay.Rectangle({color = COLOR_LIGHT}),
) {
RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
}
@@ -430,52 +416,52 @@ animationLerpValue: f32 = -1.0
createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
mobileScreen := windowWidth < 750
clay.BeginLayout()
- if clay.Rectangle(
+ if clay.UI(
clay.ID("OuterContainer"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}),
- clay.RectangleConfig({color = COLOR_LIGHT}),
+ clay.Rectangle({color = COLOR_LIGHT}),
) {
- if clay.Container(
+ if clay.UI(
clay.ID("Header"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(50)}, childAlignment = {y = .CENTER}, childGap = 24, padding = {x = 32}}),
) {
- clay.Text(clay.ID("Logo"), "Clay", &headerTextConfig)
- if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) {}
+ clay.Text("Clay", &headerTextConfig)
+ if clay.UI(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({})}})) {}
if (!mobileScreen) {
- if clay.Rectangle(clay.ID("LinkExamplesOuter"), clay.Layout({}), clay.RectangleConfig({color = {0, 0, 0, 0}})) {
- clay.Text(clay.ID("LinkExamplesText"), "Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
+ if clay.UI(clay.ID("LinkExamplesOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) {
+ clay.Text("Examples", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
}
- if clay.Rectangle(clay.ID("LinkDocsOuter"), clay.Layout({}), clay.RectangleConfig({color = {0, 0, 0, 0}})) {
- clay.Text(clay.ID("LinkDocsText"), "Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
+ if clay.UI(clay.ID("LinkDocsOuter"), clay.Layout({}), clay.Rectangle({color = {0, 0, 0, 0}})) {
+ clay.Text("Docs", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
}
}
- githubButtonId: clay.ElementId = clay.ID("HeaderButtonGithub")
- if clay.Border(clay.ID("LinkGithubOuter"), clay.Layout({}), clay.BorderConfigOutsideRadius({2, COLOR_RED}, 10)) {
- if clay.Rectangle(
- githubButtonId,
+ // githubButtonId: clay.ElementId = clay.ID("HeaderButtonGithub")
+ if clay.UI(clay.ID("LinkGithubOuter"), clay.Layout({}), clay.BorderOutsideRadius({2, COLOR_RED}, 10)) {
+ if clay.UI(
+ // githubButtonId,
clay.Layout({padding = {16, 6}}),
- clay.RectangleConfig({cornerRadius = clay.CornerRadiusAll(10), color = clay.PointerOver(githubButtonId) ? COLOR_LIGHT_HOVER : COLOR_LIGHT}),
+ clay.Rectangle({cornerRadius = clay.CornerRadiusAll(10), color = COLOR_LIGHT}),
) {
- clay.Text(clay.ID("LinkGithubText"), "Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
+ clay.Text("Github", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = {61, 26, 5, 255}}))
}
}
}
- if clay.Rectangle(clay.ID("TopBorder1"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.RectangleConfig({color = COLOR_TOP_BORDER_5})) {}
- if clay.Rectangle(clay.ID("TopBorder2"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.RectangleConfig({color = COLOR_TOP_BORDER_4})) {}
- if clay.Rectangle(clay.ID("TopBorder3"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.RectangleConfig({color = COLOR_TOP_BORDER_3})) {}
- if clay.Rectangle(clay.ID("TopBorder4"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.RectangleConfig({color = COLOR_TOP_BORDER_2})) {}
- if clay.Rectangle(clay.ID("TopBorder5"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.RectangleConfig({color = COLOR_TOP_BORDER_1})) {}
- if clay.Rectangle(
+ if clay.UI(clay.ID("TopBorder1"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_5})) {}
+ if clay.UI(clay.ID("TopBorder2"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_4})) {}
+ if clay.UI(clay.ID("TopBorder3"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_3})) {}
+ if clay.UI(clay.ID("TopBorder4"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_2})) {}
+ if clay.UI(clay.ID("TopBorder5"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(4)}}), clay.Rectangle({color = COLOR_TOP_BORDER_1})) {}
+ if clay.UI(
clay.ID("ScrollContainerBackgroundRectangle"),
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}),
- clay.RectangleConfig({color = COLOR_LIGHT}),
+ clay.Rectangle({color = COLOR_LIGHT}),
) {
- if clay.Scroll(clay.ID("OuterScrollContainer"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}), clay.ScrollConfig({vertical = true})) {
- if clay.Border(
+ if clay.UI(clay.ID("OuterScrollContainer"), clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}}), clay.Scroll({vertical = true})) {
+ if clay.UI(
clay.ID("ScrollContainerInner"),
clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingGrow({})}}),
- clay.BorderConfig({betweenChildren = {2, COLOR_RED}}),
+ clay.Border({betweenChildren = {2, COLOR_RED}}),
) {
if (!mobileScreen) {
LandingPageDesktop()
diff --git a/clay.h b/clay.h
index 3f8d525..0c783d8 100644
--- a/clay.h
+++ b/clay.h
@@ -2623,10 +2623,6 @@ void Clay__CalculateFinalLayout() {
} else {
currentElementTreeNode->nextChildOffset.y += childElement->dimensions.height + (float)layoutConfig->childGap;
}
-
- if (currentElementTreeNode->nextChildOffset.x > 10000) {
- continue;
- }
}
}
}
@@ -2653,9 +2649,6 @@ void Clay__AttachId(Clay_ElementId elementId) {
void Clay__AttachLayoutConfig(Clay_LayoutConfig *config) {
Clay__GetOpenLayoutElement()->layoutConfig = config;
- if (config->childGap > 100) {
- return;
- }
}
void Clay__AttachElementConfig(Clay_ElementConfigUnion config, Clay__ElementConfigType type) {
Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
diff --git a/examples/raylib-sidebar-scrolling-container/main.c b/examples/raylib-sidebar-scrolling-container/main.c
index 1002198..a1c865b 100644
--- a/examples/raylib-sidebar-scrolling-container/main.c
+++ b/examples/raylib-sidebar-scrolling-container/main.c
@@ -40,14 +40,6 @@ void RenderDropdownTextItem(int index) {
Clay_RenderCommandArray CreateLayout() {
Clay_BeginLayout();
-// CLAY(CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 16), CLAY_BORDER(.betweenChildren = {1, {0,250,0,255}})) {
-// CLAY(CLAY_RECTANGLE(.color = {150,0,0,255}), CLAY_LAYOUT(.childAlignment = { .y = CLAY_ALIGN_Y_CENTER })) {
-// CLAY_TEXT(CLAY_STRING("TEST"), CLAY_TEXT_CONFIG(.fontSize = 60, .textColor = {255,255,255,255}));
-// }
-// CLAY(CLAY_RECTANGLE(.color = {150,0,0,255}), CLAY_LAYOUT(.childAlignment = { .y = CLAY_ALIGN_Y_CENTER })) {
-// CLAY_TEXT(CLAY_STRING("TEST"), CLAY_TEXT_CONFIG(.fontSize = 60, .textColor = {255,255,255,255}));
-// }
-// }
CLAY(CLAY_ID("OuterContainer"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_GROW() }, .padding = { 16, 16 }, .childGap = 16), CLAY_RECTANGLE(.color = {200, 200, 200, 255})) {
CLAY(CLAY_ID("SideBar"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW() }, .padding = {16, 16}, .childGap = 16), CLAY_RECTANGLE(.color = {150, 150, 255, 255})) {
CLAY(CLAY_ID("ProfilePictureOuter"), CLAY_LAYOUT(.sizing = { .width = CLAY_SIZING_GROW() }, .padding = { 8, 8 }, .childGap = 8, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER }), CLAY_RECTANGLE(.color = {130, 130, 255, 255})) {