Sidebar

Author: admin 32 views

Workflow

A fully customizable component that can be used for pretty much anything. It is widely used for showcasing friends and lobbies, as seen in popular games such as Counter-Strike and Valorant.

You can select the object and start tweaking the component. Make sure to add the new header objects to the ‘Headers’ list and the individual objects to the ‘Individuals’ list. The default ‘Interact Type’ is hover. Feel free to adjust it according to your needs. You can add any UI objects under the ‘Content’ child object. You can also see the demo scene for a live demonstration.

Sidebar Header

Allows to enabling or disabling of specific parent objects. It requires a gameobject to work, so make sure to assign a valid object to the ‘Target Content’ field.

Sidebar Individual

This UI element is used to showcase platform friends (e.g. Steam). It has 4 different status states (Online, Away, Offline, Custom) and a context menu system. While this element is easy to use, you need to use scripting as it relies on the given input. You can see the ‘SidebarIndividualCalls’ method in the scripting section to see how to trigger the provided functions.

Scripting

				
					using UnityEngine;
using Michsky.UI.Beam; // Namespace

public class SampleClass : MonoBehaviour
{
    [SerializeField] private SidebarAnimator sidebar;
    [SerializeField] private SidebarHeader sidebarHeader;
    [SerializeField] private SidebarIndividual sidebarIndividual;

    void SidebarCalls()
    {
        // Animate, open or close
        sidebar.Animate();
        sidebar.Open();
        sidebar.Close();
    }

    void SidebarHeaderCalls()
    {
        // If you're creating the header during runtime
        sidebar.headers.Add(sidebarHeader);

        // Expand or minimize headear content
        sidebarHeader.ExpandItem();
        sidebarHeader.MinimizeItem();
    }

    void SidebarIndividualCalls()
    {
        // If you're creating the header during runtime
        sidebar.individuals.Add(sidebarIndividual);

        // Set info
        sidebarIndividual.SetProfileName("Profile Name");
        sidebarIndividual.SetProfilePicture(targetSprite);

        // Set state
        sidebarIndividual.SetState(SidebarIndividual.IndividualState.Away);

        // Set custom state
        sidebarIndividual.SetState(SidebarIndividual.IndividualState.Custom);
        sidebarIndividual.SetCustomStatus("Custom state text");

        // Open or close context menu
        sidebarIndividual.contextMenu.Open();
        sidebarIndividual.contextMenu.Close();

        // Create a new context menu separator
        sidebarIndividual.contextMenu.CreateSeparator();

        // Create a new context menu button
        sidebarIndividual.contextMenu.CreateButton(targetSprite, "Item Text");

        // Add new event to an existing context menu item
        sidebarIndividual.contextMenu.menuItems[0].onClick.AddListener(() => TestMethod());
    }

    void TestMethod()
    {
        Debug.Log("Triggered the test method!");
    }
}

Limitations

This component is not made or optimized for gamepad inputs. Please contact me if you need gamepad support for the sidebar and its elements.