- Container9_1: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: Height: =Parent.Height Width: =If(v_MenuExpand,115,75) Children: - Container1_3: Control: GroupContainer@1.5.0 Variant: AutoLayout Properties: DropShadow: =DropShadow.None Height: =Parent.Height LayoutDirection: =LayoutDirection.Vertical LayoutGap: =10 PaddingBottom: =15 PaddingLeft: =10 PaddingRight: =10 PaddingTop: =25 RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Width: =Parent.Width Children: - Logo_3: Control: Image@2.2.3 Properties: AlignInContainer: =AlignInContainer.Center Height: | =50 LayoutMinHeight: =0 LayoutMinWidth: =0 PaddingBottom: =5 PaddingLeft: =5 PaddingRight: =5 PaddingTop: =5 RadiusBottomLeft: =100 RadiusBottomRight: =50 RadiusTopLeft: =50 RadiusTopRight: =50 Width: =70 - Container8_2: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: AlignInContainer: '=If(v_MenuExpand,AlignInContainer.Start,AlignInContainer.Center) ' DropShadow: =DropShadow.None FillPortions: =0 Height: =35 RadiusBottomLeft: =10 RadiusBottomRight: =10 RadiusTopLeft: =10 RadiusTopRight: =10 Width: =35 Children: - Image4_2: Control: Image@2.2.3 Properties: Height: =Parent.Height Image: |- ="data:image/svg+xml;utf8, " & EncodeUrl(Substitute("","currentColor", "RGBA(115, 131, 176, 1)")) PaddingBottom: =5 PaddingTop: =5 Width: =Parent.Width - Button4_2: Control: Classic/Button@2.2.0 Properties: BorderStyle: =BorderStyle.None BorderThickness: =0 Color: =RGBA(255, 255, 255, 1) Fill: =Color.Transparent Height: =Parent.Height HoverColor: =RGBA(255, 255, 255, 1) HoverFill: =RGBA(0, 0, 0, 0.1) OnSelect: =Set(v_MenuExpand, !v_MenuExpand); PressedFill: =RGBA(0, 0, 0, 0.2) Text: = Width: =Parent.Width - Gallery1_3: Control: Gallery@2.15.0 Variant: Vertical Properties: DelayItemLoading: =false Height: =Self.AllItemsCount * (Self.TemplateHeight + Self.TemplatePadding) Items: |- =Table({ MenuIcon: "", MenuID:1, MenuName:{{varitem1}}, PageNavigation:App.ActiveScreen }, { MenuIcon: "", MenuID:2, MenuName:{{varitem2}}, PageNavigation:App.ActiveScreen }, { MenuIcon: "", MenuID:3, MenuName:{{varitem3}}, PageNavigation:App.ActiveScreen }, { MenuIcon: "", MenuID:4, MenuName:{{varitem4}}, PageNavigation:App.ActiveScreen }) LayoutMinHeight: =0 LayoutMinWidth: =0 TemplatePadding: =0 TemplateSize: =50 Children: - Container5_3: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: DropShadow: =DropShadow.None Height: =Parent.TemplateHeight RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Width: =Parent.TemplateWidth Children: - Container6_3: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: DropShadow: =DropShadow.None Fill: |- =//If(Th.CurrentMenuID = ThisItem.MenuID, SideNavigation_Collapsible.SelectedIconBG , Color.Transparent) RGBA(0, 0, 0, 0.04) Height: =Parent.Height* 70% RadiusBottomLeft: =10 RadiusBottomRight: =10 RadiusTopLeft: =10 RadiusTopRight: =10 Width: =If(v_MenuExpand,Parent.Width,Self.Height) X: =(Parent.Width - Self.Width)/2 Y: =(Parent.Height - Self.Height)/2 Children: - Image3_3: Control: Image@2.2.3 Properties: Height: =Parent.Height Image: |- =// "data:image/svg+xml;utf8, " & EncodeUrl(Substitute(ThisItem.MenuIcon,"currentColor", If(SideNavigation_Collapsible.CurrentMenuID = ThisItem.MenuID , SideNavigation_Collapsible.SelectedIconColor_Text , SideNavigation_Collapsible.BaseIconColor_Text))) "data:image/svg+xml;utf8, " & EncodeUrl(Substitute(ThisItem.MenuIcon,"currentColor", "RGBA(254, 189, 47, 1)")) PaddingBottom: =8 PaddingLeft: =8 PaddingRight: =8 PaddingTop: =8 Width: =Self.Height - Label4_4: Control: Label@2.5.1 Properties: Color: =RGBA(37, 52, 100, 1) Font: =Font.Lato FontWeight: =FontWeight.Semibold Height: =35 Size: =8 Text: =ThisItem.MenuName Visible: =v_MenuExpand Width: =Parent.Width - Self.X X: =Image3_3.Width - Button1_3: Control: Classic/Button@2.2.0 Properties: BorderColor: =Color.Transparent BorderStyle: =BorderStyle.None BorderThickness: =0 Color: =RGBA(255, 255, 255, 1) Fill: =Color.Transparent Height: =Parent.Height HoverColor: =RGBA(255, 255, 255, 1) HoverFill: =RGBA(0, 0, 0, 0.1) OnSelect: =Navigate(ThisItem.PageNavigation) PressedFill: =RGBA(0, 0, 0, 0.2) Text: = Width: =Parent.Width - Container2_3: Control: GroupContainer@1.5.0 Variant: AutoLayout Properties: DropShadow: =DropShadow.None FillPortions: =0 Height: =40 LayoutAlignItems: =LayoutAlignItems.Center LayoutDirection: =LayoutDirection.Horizontal LayoutJustifyContent: =LayoutJustifyContent.Center LayoutMinWidth: =40 PaddingLeft: =5 PaddingRight: =5 RadiusBottomLeft: =0 RadiusBottomRight: =0 RadiusTopLeft: =0 RadiusTopRight: =0 Children: - Container3_3: Control: GroupContainer@1.5.0 Variant: ManualLayout Properties: AlignInContainer: =AlignInContainer.Center BorderColor: =RGBA(12, 59, 94, 1) BorderThickness: =1 DropShadow: =DropShadow.None FillPortions: =0 Height: =Self.Width LayoutMinHeight: =35 RadiusBottomLeft: =35 RadiusBottomRight: =35 RadiusTopLeft: =35 RadiusTopRight: =35 Width: =30 Children: - Image2_3: Control: Image@2.2.3 Properties: Height: =Parent.Height Image: =User().Image RadiusBottomLeft: =35 RadiusBottomRight: =35 RadiusTopLeft: =35 RadiusTopRight: =35 Width: =Parent.Width Y: | =0 - Label4_5: Control: Label@2.5.1 Properties: AlignInContainer: =AlignInContainer.Stretch Color: =RGBA(37, 52, 100, 1) FillPortions: =1 Font: =Font.Lato FontWeight: =FontWeight.Semibold LayoutMinHeight: =0 LayoutMinWidth: =0 PaddingRight: =0 Size: =9 Text: =User().FullName Visible: =v_MenuExpand Width: =Parent.Width - Self.X X: =Image3_3.Width Y: =35

Collapsible Side Navigation

Implementation