Now, let's examine the three concrete state classes, as follows:

export class MainPanelOnly  
    implements IState { 
    getPanelType() : PanelType { return PanelType.Primary; } 
    getStateType() : StateType { return StateType.MainPanelOnly; } 
    getPanelButtonClass() : string { return 'fa-chevron-right';} 
    isSideNavVisible() : boolean { return false; } 
} 

We start with a state class named MainPanelOnly, which is used to describe the state when the side navigation bar is not visible, and we are on the main viewing panel. This is a very simple class that implements the IState interface and as such, simply returns the correct values for each of the four functions. As we can see by the return values, we are on PanelType.Primary, the isSideNavVisible function returns false, and we need an 'fa-chevron-right' class to display on our show/hide button. Our other two concrete states are very similar, as follows:

export class MainPanelWithSideNav  
    implements IState { 
    getPanelType() : PanelType { return PanelType.Primary; } 
    getStateType() : StateType { return StateType.MainPanelWithSideNav; } 
    getPanelButtonClass() : string { return 'fa-chevron-left';} 
    isSideNavVisible() : boolean { return true; } 
} 
 
export class DetailPanel  
    implements IState { 
    getPanelType() : PanelType { return PanelType.Detail; } 
    getStateType() : StateType { return StateType.DetailPanel; } 
    getPanelButtonClass() : string { return '';} 
    isSideNavVisible() : boolean { return false; } 
} 

Here, the MainPaleWithSideNav state class is the same as the MainPanel class, except that it returns true for the isSideNavVisible function, and 'fa-chevron-left' for the panel button class.  The DetailPanel state class returns PanelType.Detail, false for the isSideNavVisible function, and a blank class name for the panel button.

These three classes are very simple, and they describe the state that the UI elements should be in when they are in the current state. These classes help us to encapsulate the logic that is used in our application to manage the various UI elements on our screen.