; MaterialSB Example - Navbar
; This example demonstrates different navbar configurations.

IncludeFile "MaterialSB.sbi"

EnableExplicit

Procedure Main(Result)
	UseModule MaterialSB
	
	SetDarkTheme(#False)
	
	; Main navbar with logo on left, links on right
	Navbar(#Navbar_Shadow2 | #Navbar_Container)
	NavbarAddLogo("MaterialSB", "", "https://lastlife.net/")
	NavbarAddLink("Home", "#")
	NavbarAddLink("Features", "#features")
	NavbarAddLink("Examples", "#examples")
	
	; Content
	Row(#Grid_Container)
	Col(12)
	
	Append("<h3>Navbar Component</h3>")
	Append("<p>The navbar automatically creates a responsive menu. On smaller screens, links collapse into a dropdown menu.</p>")
	
	Append("<h5>Navbar Flags</h5>")
	
	Protected t = Table("Flag", #Table_Striped | #Table_Highlight)
	TableAddColumn("Description", t)
	
	TableAddItem("#Navbar_Default" + Chr(10) + "Standard navbar with no special styling", t)
	TableAddItem("#Navbar_Align_Right" + Chr(10) + "Aligns the logo to the right", t)
	TableAddItem("#Navbar_Align_Center" + Chr(10) + "Centers the logo", t)
	TableAddItem("#Navbar_Bottom" + Chr(10) + "Positions navbar at the bottom of the viewport", t)
	TableAddItem("#Navbar_Shadow1" + Chr(10) + "Light shadow (z-depth-1)", t)
	TableAddItem("#Navbar_Shadow2" + Chr(10) + "Medium shadow (z-depth-2)", t)
	TableAddItem("#Navbar_Shadow3" + Chr(10) + "Heavy shadow (z-depth-5)", t)
	TableAddItem("#Navbar_Container" + Chr(10) + "Centers content in a container", t)
	
	CloseCurrentParent()
	
	; Logo alignment examples
	Col(12)
	Append("<h5>Logo Alignment</h5>")
	Append("<p>The logo can be positioned left (default), center, or right using flags in NavbarAddLogo():</p>")
	
	Append("; Logo on the left (default)" + "<br>")
	Append(~"NavbarAddLogo(\"Left Logo\")" + "<br>")
	Append("<br>")
	Append("; Logo in the center" + "<br>")
	Append(~"NavbarAddLogo(\"Centered\", \"\", \"\", #Navbar_Align_Center)" + "<br>")
	Append("<br>")
	Append("; Logo on the right" + "<br>")
	Append(~"NavbarAddLogo(\"Right Logo\", \"\", \"\", #Navbar_Align_Right)")
	
	CloseCurrentParent()
	Append("<br>")
	
	; Tips
	Col(12)
	Card()
	AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3)
	CardContent()
	CardTitle("<h5>Tips</h5>")
	Append("<ul> " +
	       "<li>Links are automatically added to both the desktop menu and the mobile dropdown</li>" +
	       "<li>When the logo is right-aligned, links appear on the left</li>"+
	       "<li>The navbar is automatically prepended to the document body</li>"+
	       "<li>You can style the navbar with color classes using AddClass()</li>"+
		   "</ul>")
	CloseCurrentParent(2)
	
	Append("<br>")
	Append("<br>")
	
	CloseCurrentParent()
	
	AutoInit()
	
	UnuseModule MaterialSB
EndProcedure

MaterialSB::Download(@Main())

; IDE Options = SpiderBasic 3.10 (Windows - x86)
; CursorPosition = 76
; Folding = -
; iOSAppOrientation = 0
; AndroidAppCode = 0
; AndroidAppOrientation = 0
; EnableXP
; DPIAware
; CompileSourceDirectory