Title Bar & Fullscreen

Control the admin page title bar and fullscreen mode from your embedded app.

Title Bar

useTitleBar()

Update the title bar displayed at the top of your app in the Qumra Admin:

import { useTitleBar } from "@qumra/jisr";
import { useEffect } from "react";

function ProductPage({ product }) {
  const titleBar = useTitleBar();

  useEffect(() => {
    titleBar.update({
      title: product.name,
      breadcrumbs: [
        { label: "Products", url: "/products" },
        { label: product.name },
      ],
    });
  }, [product]);

  return <div>{/* Product content */}</div>;
}

TitleBarOptions

Property	Type	Description
title	string	The page title to display.
breadcrumbs	Breadcrumb[]	Optional breadcrumb navigation trail.
primaryAction	ActionOption	Optional primary action button in the title bar.
secondaryActions	ActionOption[]	Optional secondary action buttons.

Breadcrumb

Property	Type	Description
label	string	Display text for the breadcrumb.
url	string	Optional URL to navigate to when clicked.

Title Bar with Actions

titleBar.update({
  title: "Product Details",
  primaryAction: {
    label: "Save",
    onAction: handleSave,
  },
  secondaryActions: [
    {
      label: "Delete",
      onAction: handleDelete,
      destructive: true,
    },
  ],
});

---

Fullscreen

useFullscreen()

Toggle fullscreen mode for your app within the Qumra Admin:

import { useFullscreen } from "@qumra/jisr";

function EditorPage() {
  const fullscreen = useFullscreen();

  return (
    <div>
      <button onClick={() => fullscreen.enter()}>
        Enter Fullscreen
      </button>
      <button onClick={() => fullscreen.exit()}>
        Exit Fullscreen
      </button>
    </div>
  );
}

Methods

Method	Description
fullscreen.enter()	Enter fullscreen mode. Hides the admin sidebar and header.
fullscreen.exit()	Exit fullscreen mode. Restores the admin sidebar and header.

tip

Fullscreen mode is useful for editors, builders, or any page that needs maximum screen real estate. Remember to provide a clear way for users to exit fullscreen.