local o=game:GetService("\082\101\112\108\105\099\097\116\101\100\083\116\111\114\097\103\101")local T=o:WaitForChild("\099\111\109\109\111\110")local m=o:WaitForChild("\108\105\098")local M=require(m:WaitForChild("\082\111\097\099\116"))local N=require(T:WaitForChild("\065\115\115\101\116\067\097\116\097\103\111\114\105\101\115"))local y=require(script:WaitForChild("\086\101\114\116\105\099\097\108\078\097\118\098\097\114\066\117\116\116\111\110"))local k=M.Component:extend("\086\101\114\116\105\099\097\108\078\097\118\098\097\114")function k.init(T,o) end function k.render(o)local T=o.props.catagories local m={}m.layout=M.createElement("\085\073\076\105\115\116\076\097\121\111\117\116",{FillDirection=Enum.FillDirection.Vertical,HorizontalAlignment=Enum.HorizontalAlignment.Center;SortOrder=Enum.SortOrder.LayoutOrder,Padding=UDim.new(0,0)})m.head=M.createElement("\070\114\097\109\101",{Size=UDim2.new(1,0,0,o.props.width);BackgroundColor3=o.props.BackgroundColor3,BorderSizePixel=0},{M.createElement("\070\114\097\109\101",{Size=UDim2.new(0,16,0,16);Position=UDim2.new(.5,0,.5,0);AnchorPoint=Vector2.new(.5,.5),BackgroundColor3=Color3.fromRGB(255,255,255);BorderSizePixel=0;Rotation=45})})for T,N in pairs(T)do m["\099\097\116\097\095"..N.id]=M.createElement(y,{BackgroundColor3=o.props.BackgroundColor3;LayoutOrder=T;tooltip=N.name;hoveredColor3=o.props.hoveredColor3 or Color3.fromRGB(75,183,255);image=N.image,width=o.props.width,onClick=function()o.props.onCatagorySelect(N)end;selected=o.props.selectedCatagory==N})end return M.createElement("\070\114\097\109\101",{BackgroundColor3=o.props.BackgroundColor3,BorderSizePixel=0,Size=UDim2.new(0,o.props.width,1,0),ZIndex=o.props.ZIndex or 2},m)end return k
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local common = ReplicatedStorage:WaitForChild("common")
local lib = ReplicatedStorage:WaitForChild("lib")

local Roact = require(lib:WaitForChild("Roact"))
local AssetCatagories = require(common:WaitForChild("AssetCatagories"))

local VerticalNavbarButton = require(script:WaitForChild("VerticalNavbarButton"))
local VerticalNavbar = Roact.Component:extend("VerticalNavbar")

function VerticalNavbar:init(initialProps)
end

function VerticalNavbar:render()
    local catagories = self.props.catagories

    local children = {}

    children.layout = Roact.createElement("UIListLayout", {
        FillDirection = Enum.FillDirection.Vertical,
        HorizontalAlignment = Enum.HorizontalAlignment.Center,
        SortOrder = Enum.SortOrder.LayoutOrder,
        Padding = UDim.new(0,0),
    })

    children.head = Roact.createElement("Frame", {
        Size = UDim2.new(1, 0, 0, self.props.width),
        BackgroundColor3 = self.props.BackgroundColor3,
        BorderSizePixel = 0,
    }, {
        Roact.createElement("Frame", {
            Size = UDim2.new(0, 16, 0, 16),
            Position = UDim2.new(0.5, 0, 0.5, 0),
            AnchorPoint = Vector2.new(0.5, 0.5),

            BackgroundColor3 = Color3.fromRGB(255, 255, 255),
            BorderSizePixel = 0,

            Rotation = 45,
        })
    })

    for idx, catagory in pairs(catagories) do
        children["cata_"..catagory.id] = Roact.createElement(VerticalNavbarButton, {
            BackgroundColor3 = self.props.BackgroundColor3,
            LayoutOrder = idx,
            tooltip = catagory.name,
            hoveredColor3 = self.props.hoveredColor3 or Color3.fromRGB(75, 183, 255),
            image = catagory.image,
            width = self.props.width,
            onClick = (function()
                self.props.onCatagorySelect(catagory)
            end),
            selected = self.props.selectedCatagory == catagory
        })
    end

    return Roact.createElement("Frame", {
        BackgroundColor3 = self.props.BackgroundColor3,
        BorderSizePixel = 0,
        Size = UDim2.new(0,self.props.width,1,0),
        ZIndex = self.props.ZIndex or 2,
    }, children)
end

return VerticalNavbar