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=M.Component:extend("\086\101\114\116\105\099\097\108\078\097\118\098\097\114\066\117\116\116\111\110")function N.init(T,o)T:setState(function()return{hovered=false}end)end function N.render(o)local T={}local m=o.state.hovered or o.props.selected T.thumb=M.createElement("\073\109\097\103\101\076\097\098\101\108",{Size=UDim2.new(0,24,0,24);Position=UDim2.new(.5,0,.5,0),AnchorPoint=Vector2.new(.5,.5),Image=o.props.image;BackgroundColor3=m and o.props.hoveredColor3 or o.props.BackgroundColor3,BorderColor3=Color3.fromRGB(255,255,255),BorderSizePixel=0})if m then T.tooltip=M.createElement("\073\109\097\103\101\076\097\098\101\108",{Size=UDim2.new(0,112,0,32);Position=UDim2.new(0,-8,.5,0);AnchorPoint=Vector2.new(1,.5),BackgroundTransparency=1;Image="\114\098\120\097\115\115\101\116\105\100\058\047\047\050\056\050\051\053\055\048\053\050\053";SliceCenter=Rect.new(75,75,75,75),ScaleType=Enum.ScaleType.Slice},{text=M.createElement("\084\101\120\116\076\097\098\101\108",{Text=o.props.tooltip;BackgroundTransparency=1;Size=UDim2.new(1,0,1,0),Font=Enum.Font.GothamSemibold,TextSize=18})})end return M.createElement("\073\109\097\103\101\066\117\116\116\111\110",{Size=UDim2.new(1,m and 8 or 0,0,o.props.width);BackgroundColor3=m and o.props.hoveredColor3 or o.props.BackgroundColor3,BorderSizePixel=0,AutoButtonColor=false,Modal=true,[M.Event.MouseEnter]=function()o:setState({hovered=true})end,[M.Event.MouseLeave]=function()o:setState({hovered=false})end,[M.Event.MouseButton1Click]=function()if o.props.onClick then o.props.onClick()end end,LayoutOrder=o.props.LayoutOrder},T)end return N
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

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

local VerticalNavbarButton = Roact.Component:extend("VerticalNavbarButton")

function VerticalNavbarButton:init(initialProps)
    self:setState(function()
        return {
            hovered = false,
        }
    end)
end

function VerticalNavbarButton:render()

    local children = {}
    local active = (self.state.hovered or self.props.selected)

    children.thumb = Roact.createElement("ImageLabel", {
        Size = UDim2.new(0, 24, 0, 24),
        Position = UDim2.new(0.5, 0, 0.5, 0),
        AnchorPoint = Vector2.new(0.5, 0.5),

        Image = self.props.image,

        BackgroundColor3 = (active and self.props.hoveredColor3) or self.props.BackgroundColor3,
        BorderColor3 = Color3.fromRGB(255, 255, 255),
        BorderSizePixel = 0,
    })

    if active then
        children.tooltip = Roact.createElement("ImageLabel", {
            Size = UDim2.new(0, 112, 0, 32),
            Position = UDim2.new(0, -8, 0.5, 0),
            AnchorPoint = Vector2.new(1,0.5),
            BackgroundTransparency = 1,
            Image = "rbxassetid://2823570525",
            SliceCenter = Rect.new(75,75,75,75),
            ScaleType = Enum.ScaleType.Slice,
        }, {
            text = Roact.createElement("TextLabel", {
                Text = self.props.tooltip,
                BackgroundTransparency = 1,
                Size = UDim2.new(1, 0, 1 ,0),

                Font = Enum.Font.GothamSemibold,
                TextSize = 18,
            })
        })
    end

    return Roact.createElement("ImageButton", {
        Size = UDim2.new(1, (active and 8 or 0), 0, self.props.width),
        BackgroundColor3 = (active and self.props.hoveredColor3) or self.props.BackgroundColor3,
        BorderSizePixel = 0,
        AutoButtonColor = false,
        Modal = true,

        [Roact.Event.MouseEnter] = function()
            self:setState({
                hovered = true,
            })
        end,

        [Roact.Event.MouseLeave] = function()
            self:setState({
                hovered = false,
            })
        end,

        [Roact.Event.MouseButton1Click] = function()
            if self.props.onClick then
                self.props.onClick()
            end
        end,

        LayoutOrder = self.props.LayoutOrder,
    }, children)
end

return VerticalNavbarButton