<div class="component-container">
        <goat-header class="sample-modal">
          <div slot="left">Left Section</div>
          <div slot="center">Center Section</div>
          <div slot="right">Right Section</div>
        </goat-header>
      </div>

      <div class="component-container">
        <goat-header>
          <div slot="left">
            <goat-header-action icon="menu" href="#"></goat-header-action>
            <goat-header-brand is:inline="true" logo="/assets/img/logo.png" href="#" name="Goat" sub-title="Subtitle"></goat-header-brand>
          </div>
          <div slot="right">
  <goat-header-action icon="light_mode" class="theme-switcher"></goat-header-action>

  <goat-header-action class="icon-only" color="primary" selected="true">
    <wc-badge content="3" class="color-error">
      <wc-icon name="notification"></wc-icon>
    </wc-badge>
  </goat-header-action>

  <goat-header-action>
    <div class="avatar-container">
      <wc-avatar src="/assets/img/avatar.webp" name="Shivaji Varma" size="1.75rem">
      <pc-text class="inherit" inline="true">Shivaji Varma</pc-text>
    </wc-avatar></div>
  </goat-header-action>

  <pc-dropdown placements="bottom-end">
    <goat-header-action icon="thumbnail--2"></goat-header-action>
    <pc-dropdown-menu class="menu" style="width: 200px">
      <pc-menu-item value="cut">
        <wc-icon name="cut" slot="start"></wc-icon>
        Cut
        <span slot="end">⌘X</span>
      </pc-menu-item>
      <pc-menu-item value="copy">
        <wc-icon name="copy" slot="start"></wc-icon>
        Copy
        <span slot="end">⌘C</span>
      </pc-menu-item>
      <pc-menu-item value="paste">
        <wc-icon name="paste" slot="start"></wc-icon>
        Paste
        <span slot="end">⌘X</span>
      </pc-menu-item>
      <pc-divider></pc-divider>
      <pc-menu-item value="delete">
        <wc-icon name="trash-can" slot="start"></wc-icon>
        Delete
        <span slot="end">←</span>
      </pc-menu-item>
    </pc-dropdown-menu>
  </pc-dropdown>
</div>
        </goat-header>
      </div>
    

      <goat-header color="primary">
        <div slot="right">
  <goat-header-action icon="light_mode" class="theme-switcher"></goat-header-action>

  <goat-header-action class="icon-only" color="primary" selected="true">
    <wc-badge content="3" class="color-error">
      <wc-icon name="notification"></wc-icon>
    </wc-badge>
  </goat-header-action>

  <goat-header-action>
    <div class="avatar-container">
      <wc-avatar src="/assets/img/avatar.webp" name="Shivaji Varma" size="1.75rem">
      <pc-text class="inherit" inline="true">Shivaji Varma</pc-text>
    </wc-avatar></div>
  </goat-header-action>

  <pc-dropdown placements="bottom-end">
    <goat-header-action icon="thumbnail--2"></goat-header-action>
    <pc-dropdown-menu class="menu" style="width: 200px">
      <pc-menu-item value="cut">
        <wc-icon name="cut" slot="start"></wc-icon>
        Cut
        <span slot="end">⌘X</span>
      </pc-menu-item>
      <pc-menu-item value="copy">
        <wc-icon name="copy" slot="start"></wc-icon>
        Copy
        <span slot="end">⌘C</span>
      </pc-menu-item>
      <pc-menu-item value="paste">
        <wc-icon name="paste" slot="start"></wc-icon>
        Paste
        <span slot="end">⌘X</span>
      </pc-menu-item>
      <pc-divider></pc-divider>
      <pc-menu-item value="delete">
        <wc-icon name="trash-can" slot="start"></wc-icon>
        Delete
        <span slot="end">←</span>
      </pc-menu-item>
    </pc-dropdown-menu>
  </pc-dropdown>
</div>
      </goat-header>