App Frame

Renders a app layout component

<.app_frame id="app-frame-single-admin-sidebar" active_nav_id={:tour_operators}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Tour operators</.h1>
  </.row>
  <:nav menu_id={:main} id={:tour_operators} icon="bus" path="#1" label="Tour operators" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#3" label="Aurora Harris" />
</.app_frame>
<.app_frame
  id="app-frame-single-admin-sidebar-with-large-user-name"
  active_nav_id={:tour_operators}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Tour operators</.h1>
  </.row>
  <:nav menu_id={:main} id={:tour_operators} icon="bus" path="#1" label="Tour operators" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#3" label="Really Really Really long admin user name" />
</.app_frame>
<.app_frame
  id="app-frame-single-admin-sidebar-with-right-sidebar"
  active_nav_id={:tour_operators}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Tour operators</.h1>
  </.row>
  <:nav menu_id={:main} id={:tour_operators} icon="bus" path="#1" label="Tour operators" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#3" label="Aurora Harris" />
  <:right_sidebar>
    <.stack space="base">
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 1</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 2</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 3</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 4</.p>
      </div>
    </.stack>
  </:right_sidebar>
</.app_frame>
<.app_frame id="app-frame-single-tour-operator-sidebar" active_nav_id={:trips}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Trips</.h1>
  </.row>
  <:nav menu_id={:main} id={:trips} icon="bus" path="#1" label="Trips" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:main} id={:calendar} icon="calendar-blank" path="#3" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#4" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#5" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#6" label="Green Light Group Tours" />
</.app_frame>
<.app_frame
  id="app-frame-single-tour-operator-sidebar-with-large-user-name-and-company-name"
  active_nav_id={:trips}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Trips</.h1>
  </.row>
  <:nav menu_id={:main} id={:trips} icon="bus" path="#1" label="Trips" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:main} id={:calendar} icon="calendar-blank" path="#3" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#4" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#5" label="Really Really Really long tour operator user name" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#6" label="Really Really Really long tour operator company name" />
</.app_frame>
<.app_frame id="app-frame-single-tour-operator-sidebar-with-banner" active_nav_id={:trips}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Trips</.h1>
  </.row>
  <:banner>
    <.responsive from="md">
      <.row space="base" justify="between" align="center">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.row>
    </.responsive>
    <.responsive upto="md">
      <.stack space="base">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.stack>
    </.responsive>
  </:banner>
  <:nav menu_id={:main} id={:trips} icon="bus" path="#1" label="Trips" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:main} id={:calendar} icon="calendar-blank" path="#3" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#4" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#5" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#6" label="Green Light Group Tours" />
</.app_frame>
<.app_frame
  id="app-frame-single-tour-operator-sidebar-with-right-sidebar"
  active_nav_id={:trips}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Trips</.h1>
  </.row>
  <:banner>
    <.responsive from="md">
      <.row space="base" justify="between" align="center">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.row>
    </.responsive>
    <.responsive upto="md">
      <.stack space="base">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.stack>
    </.responsive>
  </:banner>
  <:nav menu_id={:main} id={:trips} icon="bus" path="#1" label="Trips" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:main} id={:calendar} icon="calendar-blank" path="#3" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#4" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#5" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#6" label="Green Light Group Tours" />
  <:right_sidebar>
    <.stack space="base">
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 1</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 2</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 3</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 4</.p>
      </div>
    </.stack>
  </:right_sidebar>
</.app_frame>
<.app_frame id="app-frame-single-tour-operator-sidebar-with-switcher" active_nav_id={:trips}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Trips</.h1>
  </.row>
  <:banner>
    <.responsive from="md">
      <.row space="base" justify="between" align="center">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.row>
    </.responsive>
    <.responsive upto="md">
      <.stack space="base">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.stack>
    </.responsive>
  </:banner>
  <:nav menu_id={:main} id={:trips} icon="bus" path="#1" label="Trips" />
  <:nav menu_id={:main} id={:suppliers} icon="suitcase-simple" path="#2" label="Suppliers" />
  <:nav menu_id={:main} id={:calendar} icon="calendar-blank" path="#3" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#4" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#5" label="Aurora Harris" />
  <:nav
    menu_id={:secondary}
    id={:company_info}
    icon="building-office"
    path="#6"
    label="Green Light Group Tours"
    action_menu_items={[%{label: "Tenant 2", path: "/tenant1"}]}
    show_action_menu={true}
  />
  <:right_sidebar>
    <.stack space="base">
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 1</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 2</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 3</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 4</.p>
      </div>
    </.stack>
  </:right_sidebar>
</.app_frame>
<.app_frame id="app-frame-single-supplier-sidebar" active_nav_id={:proposals}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Proposals</.h1>
  </.row>
  <:nav menu_id={:main} id={:proposals} icon="file" path="#1" label="Proposals" />
  <:nav menu_id={:main} id={:bookings} icon="book" path="#2" label="Bookings" />
  <:nav menu_id={:main} id={:clients} icon="users" path="#3" label="Clients" />
  <:nav menu_id={:main} id={:locations} icon="storefront" path="#4" label="Locations" />
  <:nav menu_id={:main} id={:services} icon="trolley-suitcase" path="#5" label="Services" />
  <:nav menu_id={:main} id={:calendar} icon="suitcase-simple" path="#6" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#7" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#8" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#9" label="Green Light Group Tours" />
</.app_frame>
<.app_frame
  id="app-frame-single-supplier-sidebar-with-large-user-name-and-company-name"
  active_nav_id={:proposals}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Proposals</.h1>
  </.row>
  <:nav menu_id={:main} id={:proposals} icon="file" path="#1" label="Proposals" />
  <:nav menu_id={:main} id={:bookings} icon="book" path="#2" label="Bookings" />
  <:nav menu_id={:main} id={:clients} icon="users" path="#3" label="Clients" />
  <:nav menu_id={:main} id={:locations} icon="storefront" path="#4" label="Locations" />
  <:nav menu_id={:main} id={:services} icon="trolley-suitcase" path="#5" label="Services" />
  <:nav menu_id={:main} id={:calendar} icon="suitcase-simple" path="#6" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#7" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#8" label="Really Really Really long supplier user name" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#9" label="Really Really Really long supplier company name" />
</.app_frame>
<.app_frame id="app-frame-single-supplier-sidebar-with-banner" active_nav_id={:proposals}>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Proposals</.h1>
  </.row>
  <:banner>
    <.responsive from="md">
      <.row space="base" justify="between" align="center">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.row>
    </.responsive>
    <.responsive upto="md">
      <.stack space="base">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.stack>
    </.responsive>
  </:banner>
  <:nav menu_id={:main} id={:proposals} icon="file" path="#1" label="Proposals" />
  <:nav menu_id={:main} id={:bookings} icon="book" path="#2" label="Bookings" />
  <:nav menu_id={:main} id={:clients} icon="users" path="#3" label="Clients" />
  <:nav menu_id={:main} id={:locations} icon="storefront" path="#4" label="Locations" />
  <:nav menu_id={:main} id={:services} icon="trolley-suitcase" path="#5" label="Services" />
  <:nav menu_id={:main} id={:calendar} icon="suitcase-simple" path="#6" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#7" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#8" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#9" label="Green Light Group Tours" />
</.app_frame>
<.app_frame
  id="app-frame-single-supplier-sidebar-with-right-sidebar"
  active_nav_id={:proposals}
>
  <:app_link app="ops" href="/" current={true} />
  <.row space="none" justify="start" align="center" class="gc-main-content-header-title">
    <.h1>Proposals</.h1>
  </.row>
  <:banner>
    <.responsive from="md">
      <.row space="base" justify="between" align="center">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.row>
    </.responsive>
    <.responsive upto="md">
      <.stack space="base">
        <.p size="base">You are currently controlling Green Light Group Tours</.p>
        <.p size="base"><.a navigate="#" size="base">Stop controlling</.a></.p>
      </.stack>
    </.responsive>
  </:banner>
  <:nav menu_id={:main} id={:proposals} icon="file" path="#1" label="Proposals" />
  <:nav menu_id={:main} id={:bookings} icon="book" path="#2" label="Bookings" />
  <:nav menu_id={:main} id={:clients} icon="users" path="#3" label="Clients" />
  <:nav menu_id={:main} id={:locations} icon="storefront" path="#4" label="Locations" />
  <:nav menu_id={:main} id={:services} icon="trolley-suitcase" path="#5" label="Services" />
  <:nav menu_id={:main} id={:calendar} icon="suitcase-simple" path="#6" label="Calendar" />
  <:nav menu_id={:main} id={:inbox} icon="envelope-simple" path="#7" label="Inbox" />
  <:nav menu_id={:secondary} id={:profile} icon="user" path="#8" label="Aurora Harris" />
  <:nav menu_id={:secondary} id={:company_info} icon="building-office" path="#9" label="Green Light Group Tours" />
  <:right_sidebar>
    <.stack space="base">
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 1</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 2</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 3</.p>
      </div>
      <div class="gc-right-sidebar-card gc-right-sidebar-card-default">
        <.p>Card content 4</.p>
      </div>
    </.stack>
  </:right_sidebar>
</.app_frame>