{
  "id": "SC01",
  "title": "Standard screen",
  "topic": "screen-structure",
  "use": "The standard screen of eurodata products. The navigation sits on the left, with optional super tabs above it that divide a large navigation further. The main area carries a large heading, optional tabs and the toolbar. The content varies widely — tables and forms are common. Depending on its scope, a further navigation aid joins in, here the vertical tab bar. The content in this pattern is a placeholder — how a table is built is for the table patterns to say, not this frame.",
  "decisions": [
    "The content is a placeholder, not a model: how a table is built is for TD01 and the toolbar patterns TB01 and TB03 to say — a frame that looks like a finished table gets copied as one.",
    "No tab strip above the title: four levels are enough — product area, module, page, section — and the browser's own tabs, with window, history and bookmarks, do what a built-in strip would copy and do less.",
    "Levels one and two are one component: the super tabs are the super-tab slot of ed-side-menu, so product area and module are decided together.",
    "The title stands at the top of the content: the page names itself instead of competing in a bar with others."
  ],
  "try": [
    {
      "do": "Scroll the page",
      "then": "the header, the side menu and the toolbar stay where they are, while the page title and the tabs scroll away"
    },
    {
      "do": "Switch a super tab",
      "then": "the product area changes, while the menu below it stays"
    },
    {
      "do": "Pick Contract in the vertical tab bar",
      "then": "the section changes, while the page, its tabs and the toolbar stay"
    },
    {
      "do": "Pick the Absences tab",
      "then": "the toolbar leaves with Master data — it belongs to the section whose content it acts on"
    },
    {
      "do": "Open the user menu",
      "then": "Settings and Sign out drop down below the user's name"
    }
  ],
  "revision": 2,
  "changes": [
    {
      "revision": 2,
      "change": "The user menu in the header is a dropdown with Settings and Sign out, its trigger showing the user's avatar."
    }
  ],
  "reviewed": true,
  "source": "<style>\n  .sc01-toolbar {\n    position: sticky;\n    inset-block-start: calc(var(--ed-app-banner-top) + var(--ed-app-header-top) + var(--ed-app-subheader-top));\n    z-index: 4;\n    background: var(--ed-color-surface-default);\n  }\n</style>\n\n<!-- Demo only, not part of the pattern. The section's content decides the page's height; here every panel is tall enough for the page to scroll in its frame. -->\n\n<ed-app mobile-breakpoint=\"900px\" desktop-nav-open>\n  <ed-header slot=\"header\">\n    <ed-button navbar class=\"ed-ml-auto\"><ed-icon slot=\"start\" name=\"search\"></ed-icon>Search</ed-button>\n    <ed-button navbar>\n      <ed-icon slot=\"start\" name=\"notification\"></ed-icon>\n      Notifications\n      <ed-badge slot=\"end\" variant=\"notification\">3</ed-badge>\n    </ed-button>\n    <ed-button navbar><ed-icon slot=\"start\" name=\"help_circle\"></ed-icon>Help</ed-button>\n    <ed-dropdown>\n      <ed-button slot=\"trigger\" navbar with-caret>\n        <ed-avatar slot=\"start\" initials=\"SB\"></ed-avatar>\n        Sophie Brandt\n      </ed-button>\n      <ed-dropdown-item>Settings</ed-dropdown-item>\n      <ed-dropdown-item>Sign out</ed-dropdown-item>\n    </ed-dropdown>\n    <a slot=\"logo\" href=\"#\"><img src=\"/a/eurodata-ui/assets/images/logo_white.png\" alt=\"Home\"></a>\n  </ed-header>\n\n  <ed-side-menu slot=\"navigation\" active-tab=\"payroll\" current=\"employees\">\n    <span slot=\"super-tab\" value=\"payroll\"><ed-icon name=\"coins_euro\"></ed-icon>Payroll</span>\n    <span slot=\"super-tab\" value=\"accounting\"><ed-icon name=\"balance_sheet\"></ed-icon>Accounting</span>\n    <span slot=\"super-tab\" value=\"practice\"><ed-icon name=\"building\"></ed-icon>Practice</span>\n\n    <ed-side-menu-item href=\"#\" value=\"overview\"><ed-icon slot=\"start\" name=\"bar_chart\"></ed-icon>Overview</ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"documents\">\n      <ed-icon slot=\"start\" name=\"invoice\"></ed-icon>\n      Documents\n      <ed-badge slot=\"end\" variant=\"neutral\">137</ed-badge>\n    </ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"payroll-run\"><ed-icon slot=\"start\" name=\"checklist\"></ed-icon>Payroll run</ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"employees\">\n      <ed-icon slot=\"start\" name=\"employee-data\"></ed-icon>\n      Employees\n      <ed-badge slot=\"end\" variant=\"neutral\">10</ed-badge>\n    </ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"filings\"><ed-icon slot=\"start\" name=\"send\"></ed-icon>Filings</ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"reports\"><ed-icon slot=\"start\" name=\"timeline\"></ed-icon>Reports</ed-side-menu-item>\n    <ed-divider></ed-divider>\n    <ed-side-menu-item href=\"#\" value=\"settings\"><ed-icon slot=\"start\" name=\"settings\"></ed-icon>Settings</ed-side-menu-item>\n    <ed-side-menu-item href=\"#\" value=\"log\"><ed-icon slot=\"start\" name=\"history\"></ed-icon>Log</ed-side-menu-item>\n  </ed-side-menu>\n\n  <main id=\"main-content\" class=\"ed-stack\">\n    <h1>Employees</h1>\n    <ed-tab-group active=\"master-data\">\n      <ed-tab slot=\"nav\" panel=\"master-data\">Master data</ed-tab>\n      <ed-tab slot=\"nav\" panel=\"absences\">Absences</ed-tab>\n      <ed-tab slot=\"nav\" panel=\"certificates\">Certificates</ed-tab>\n      <ed-tab slot=\"nav\" panel=\"history\">History</ed-tab>\n\n      <ed-tab-panel name=\"master-data\">\n        <div class=\"sc01-toolbar ed-py-2\">\n          <ed-toolbar label=\"Employees\">\n            <ed-input slot=\"search\" type=\"search\" placeholder=\"Name or personnel number\" aria-label=\"Search employees\"></ed-input>\n\n            <ed-button><ed-icon slot=\"start\" name=\"plus\"></ed-icon>Create employee</ed-button>\n            <ed-button appearance=\"plain\"><ed-icon slot=\"start\" name=\"export\"></ed-icon>Export employees</ed-button>\n            <ed-button appearance=\"plain\"><ed-icon slot=\"start\" name=\"print\"></ed-icon>Print</ed-button>\n\n            <ed-select slot=\"view\" aria-label=\"Payroll group\" value=\"all\">\n              <ed-option value=\"all\">All payroll groups</ed-option>\n              <ed-option value=\"salaried\">Salaried staff</ed-option>\n              <ed-option value=\"hourly\">Hourly staff</ed-option>\n            </ed-select>\n            <ed-select slot=\"view\" aria-label=\"Location\" value=\"all\">\n              <ed-option value=\"all\">All locations</ed-option>\n              <ed-option value=\"north\">Head office North</ed-option>\n              <ed-option value=\"south\">Branch South</ed-option>\n            </ed-select>\n          </ed-toolbar>\n        </div>\n\n        <ed-tab-group placement=\"left\" active=\"all\">\n          <ed-tab slot=\"nav\" panel=\"all\">All employees</ed-tab>\n          <ed-tab slot=\"nav\" panel=\"person\">Person</ed-tab>\n          <ed-tab slot=\"nav\" panel=\"contract\">Contract</ed-tab>\n          <ed-tab slot=\"nav\" panel=\"pay\">Pay</ed-tab>\n          <ed-tab slot=\"nav\" panel=\"tax\">Tax</ed-tab>\n          <ed-tab slot=\"nav\" panel=\"social-insurance\">Social insurance</ed-tab>\n\n          <ed-tab-panel name=\"all\">\n            <div class=\"ed-stack sc01-content\">\n              <h2 class=\"ed-heading-l\">All employees</h2>\n              <p>10 employees at two locations. The table carries the weight of this screen — it is the reason the screen is opened.</p>\n              <ed-data-grid id=\"sc01-grid\" label=\"All employees\" without-toolbar></ed-data-grid>\n            </div>\n          </ed-tab-panel>\n          <ed-tab-panel name=\"person\"><div class=\"ed-placeholder sc01-content\">Personal data of 10 employees</div></ed-tab-panel>\n          <ed-tab-panel name=\"contract\"><div class=\"ed-placeholder sc01-content\">Contracts of 10 employees</div></ed-tab-panel>\n          <ed-tab-panel name=\"pay\"><div class=\"ed-placeholder sc01-content\">Pay components of 10 employees</div></ed-tab-panel>\n          <ed-tab-panel name=\"tax\"><div class=\"ed-placeholder sc01-content\">Tax data of 10 employees</div></ed-tab-panel>\n          <ed-tab-panel name=\"social-insurance\"><div class=\"ed-placeholder sc01-content\">Social insurance data of 10 employees</div></ed-tab-panel>\n        </ed-tab-group>\n      </ed-tab-panel>\n\n      <ed-tab-panel name=\"absences\"><div class=\"ed-placeholder sc01-content\">Absences of 10 employees</div></ed-tab-panel>\n      <ed-tab-panel name=\"certificates\"><div class=\"ed-placeholder sc01-content\">Certificates issued to 10 employees</div></ed-tab-panel>\n      <ed-tab-panel name=\"history\"><div class=\"ed-placeholder sc01-content\">Changes to the employee records</div></ed-tab-panel>\n    </ed-tab-group>\n  </main>\n</ed-app>\n\n<!-- Demo only, not part of the pattern. The table is a placeholder for the section's content; how a table is built is for TD01 and the toolbar patterns TB01 and TB03. -->",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/screen-structure/sc01-standard-screen/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/screen-structure/"
}