<header class="header-primary">
    <div class="header-primary__left">
        <button class="hamburger btn" type="button">
			<?xml version="1.0" encoding="utf-8"?>
			<svg
				class='hamburger__icon hamburger__close'
				version="1.1"
				id="Layer_1"
				xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				x="0px"
				y="0px"
				width="24px"
				height="24px"
				viewBox="0 0 24 24"
				enable-background="new 0 0 24 24"
				xml:space="preserve">
			<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
			</svg>
			<?xml version="1.0" encoding="utf-8"?>
			<svg
				class='hamburger__icon hamburger__open'
				version="1.1"
				id="Layer_1"
				xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				x="0px"
				y="0px"
				width="24px"
				height="24px"
				viewBox="0 0 24 24"
				enable-background="new 0 0 24 24"
				xml:space="preserve">
			<path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
			</svg>
		</button>
        <div>
            <p class="header-primary__text"><a href="#">Chimera Hair Salon</a></p>
        </div>
    </div>
    <div class="header-primary__right">
        <div class="text-input text-input-small">
            <div class="text-input__inner">
                <input type="" class="text-input__input" placeholder="Search anything…" />
            </div>
        </div>
        <div class="user-menu">
            <button class="btn header-primary__user-btn">
					<span class="btn__inner">
						<div class="avatar-wrapper">
							<div class="avatar__image-wrapper">
								<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;4c06a1bc6123a9ac6645a269314334b2&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;192&amp;h&#x3D;192&amp;q&#x3D;80 alt= width="32" height="32" />
							</div>
						</div>		</span>
				</button>
            <ul class="user-menu__menu card">
                <li class="list-item">
                    <div class="list-item__image-wrapper">
                        <div class="avatar-wrapper">
                            <div class="avatar__image-wrapper">
                                <img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;4c06a1bc6123a9ac6645a269314334b2&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;192&amp;h&#x3D;192&amp;q&#x3D;80
                                    alt=w idth="40" height="40" />
                            </div>
                        </div>
                    </div>

                    <div class="list-item__text-wrapper">
                        <p class="list-item__title">Erica Romaguera</p>
                        <p class="list-item__subtitle">(605) 230-5253</p>
                    </div>
                </li>
                <li class="list-item">
                    <button class="btn btn-simple btn-full-width " type="button">
								<span class="btn__inner">
									<span class="btn__icon-wrapper">
										<?xml version="1.0" encoding="utf-8"?>
										<svg
											class='btn__icon '
											version="1.1"
											id="Layer_1"
											xmlns="http://www.w3.org/2000/svg"
											xmlns:xlink="http://www.w3.org/1999/xlink"
											x="0px"
											y="0px"
											width="18px"
											height="18px"
											viewBox="0 0 18 18"
											enable-background="new 0 0 18 18"
											xml:space="preserve">
										<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M6 7C7.51878 7 8.75 5.76878 8.75 4.25C8.75 2.73122 7.51878 1.5 6 1.5C4.48122 1.5 3.25 2.73122 3.25 4.25C3.25 5.76878 4.48122 7 6 7Z" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M1.5 12.5001C1.50011 10.7267 2.54175 9.11875 4.16015 8.39369C5.77855 7.66863 7.67188 7.96169 8.99533 9.14212" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M8.5 14.5L10.5 16.5L12.5 14.5" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M10.5 16.5V10.5" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M12.5 12.5L14.5 10.5L16.5 12.5" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M14.5 10.5V16.5" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</span>
										<span class="btn__text">Switch Accounts</span>
									
								</span>	
						</button>
                </li>
                <li class="list-item">
                    <button class="btn btn-simple btn-full-width " type="button">
								<span class="btn__inner">
									<span class="btn__icon-wrapper">
										<?xml version="1.0" encoding="utf-8"?>
										<svg
											class='btn__icon '
											version="1.1"
											id="Layer_1"
											xmlns="http://www.w3.org/2000/svg"
											xmlns:xlink="http://www.w3.org/1999/xlink"
											x="0px"
											y="0px"
											width="18px"
											height="16px"
											viewBox="0 0 18 16"
											enable-background="new 0 0 18 16"
											xml:space="preserve">
										<path fill="none" d="M1.5 8.00269H12" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9.5 10.5027L12 8.00269L9.5 5.50269" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M3.2041 11.0665C4.62034 13.9759 7.84616 15.5355 11.006 14.8384C14.1659 14.1413 16.4361 11.3693 16.4968 8.13407C16.5575 4.89881 14.3928 2.0436 11.2613 1.2285C8.12983 0.413403 4.84779 1.85088 3.32343 4.70516" stroke="#0099FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</span>
										<span class="btn__text">Log Out</span>
									
								</span>	
						</button>
                </li>
            </ul>
        </div>
    </div>
</header>
<header class="header-primary">
	<div class="header-primary__left">
		{{> @hamburger}}
		{{#if business}}
			<div>
				<p class="header-primary__text"><a href="#">{{{business}}}</a></p>
				{{#if address}}
				<p class="header-primary__text header-primary__address"><a href="#">{{{address}}}</a></p>
				{{/if}}
			</div>
		{{else}}
			<p class="header-primary__lockup" href="#">
				{{> @default-lockup}}
			</p>
		{{/if}}
	</div>
	<div class="header-primary__right">
		{{#if user}}
			{{> @search class="text-input-small" placeholder="Search anything…"}}
			{{> @user-menu}}
		{{else}}
			{{> @button className="btn-small" text="Log In"}}
			{{> @button className="btn-primary btn-small" text="Sign Up"}}
		{{/if}}
	</div>
</header>
{
  "openIcon": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>",
  "closeIcon": "<path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "business": "Chimera Hair Salon",
  "user": {
    "name": "Erica Romaguera",
    "phoneNumber": "(605) 230-5253",
    "image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80"
  }
}

Primary Header

The Primary Header communicates to the user whether or not they are logged in and indicates which business they are logged in to, as well as providing access to their personal profile and a global search.