What is the logic of docking and undocking menus | How docking and undocking of menu works | What are panels and sidebar?

Introduction

Docking Panels

Floating Panels

Interacting with Sidebars and Panels

Active Panels and Navigation

Introduction

Our Video Portal interface is designed with flexibility and user control in mind, particularly through the use of sidebars and paneling of the Menus. Firstly, let us understand what are sidebars and panels:

1. Sidebars: The left, right, and bottom edges of the screen are designated as sidebars. These areas serve as containers for various elements such as menu options, cameras, events, and groups to be attached. 

2. Panels: Within these sidebars, we have panels. Panels can be thought of as the individual sections or tools you interact with. They can either be floating or docked to the sidebars.

Docking Panels

• Panels can be docked to any of the three sides of the sidebar (left, bottom, or right).

• When docked, multiple panels can occupy the sidebar simultaneously.

• For the left and right sidebars, the docked panels are shown as icons at the bottom.

• For the bottom sidebar, these panels are represented by their names at the top . As shown in the screenshot below:

Floating Panels

•  Panels that are not docked can float freely over the main content area.

Interacting with Sidebars and Panels

• Close Button: This button pertains to the sidebar itself. Clicking it will close the sidebar if it is empty or not.

• Dock/Undock Buttons: These buttons are specific to the panels. The "dock to" button will dock the panel to the sidebar, while the "undock" button will make the panel float.

• Sidebar Visibility: If the sidebar is empty, it will close automatically. It will reopen when a new panel is added to it.

Active Panels and Navigation

• Active Panel: When a panel is docked, it automatically becomes the active panel in the sidebar. Users can activate any panel by clicking its icon (left/right sidebar) or name (bottom sidebar).

• Panel Navigation: Each panel has a corresponding icon in the main navigation area, typically located at the top of the portal. This icon serves multiple functions:

  • If the panel is undocked, clicking the icon will hide or show the panel.
  • If the panel is docked but inactive in the sidebar, the icon will switch to this panel.
  • If the sidebar is closed, clicking the icon will open the sidebar and make the panel active.
  • If the panel is already active in the open sidebar, clicking the icon will close the sidebar.

This design allows for a highly customizable and efficient workspace, enabling users to manage their tools and resources effectively. Understanding these interactions will help you make the most out of the sidebar and panel features in the application.