<div id="menu-top" class="menu-top">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<div class="menu-top-content">
					<ul>
						<li>
							@if (Route::is('home'))
								<a href="/"><img id="logo-menu" src="" alt=""></a>
							@else
								<a href="/"><img id="logo-menu" src="{{asset('/img/logo/logoTradicionalNegativo.svg')}}" alt=""></a>
							@endif
						</li>
					</ul>
				</div>
			</div>
			<div class="col-md-4">
				<div class="meno-top-social">
					<ul>
						@if(getCompany()->linkedin)<li><a href="{{ getCompany()->linkedin }}" target="_blank"><i class="svg-size fa-brands fa-linkedin-in"></i></a></li>@endif
						@if(getCompany()->instagram)<li><a href="{{ getCompany()->instagram }}" target="_blank"><i class="svg-size fa-brands fa-instagram"></i></a></li>@endif
						@if(getCompany()->youtube)<li><a href="{{ getCompany()->youtube }}" target="_blank"><i class="svg-size fa-brands fa-youtube"></i></a></li>@endif
						@if(getCompany()->facebook)<li><a href="{{ getCompany()->facebook }}" target="_blank"><i class="svg-size fa-brands fa-facebook"></i></a></li>@endif
						@if(getCompany()->twitter)<li><a href="{{ getCompany()->twitter }}" target="_blank"><i class="svg-size fa-brands fa-twitter"></i></a></li>@endif
						@if(getCompany()->whatsapp)<li><a href="https://api.whatsapp.com/send?phone={{ getCompany()->whatsapp }}" target="_blank"><i class="svg-size fa-brands fa-whatsapp"></i></a></li>@endif
						@if(getCompany()->telegram)<li><a href="{{ getCompany()->telegram }}"target="_blank"><i class="svg-size fa-brands fa-telegram"></i></a></li>@endif
						@if(getCompany()->pinterest)<li><a href="{{ getCompany()->pinterest }}"target="_blank"><i class="svg-size fa-brands fa-pinterest"></i></a></li>@endif
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- End Menu Top Area -->


<script>
const route = '<?= Route::currentRouteName() ?>'

window.addEventListener('scroll', function() {
    const menuTop = document.getElementById('menu-top');
	const imgMenu = document.getElementById('logo-menu');
	const links = document.querySelectorAll('.meno-top-social ul li a');
	const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text');
	const whiteColor = getComputedStyle(document.documentElement).getPropertyValue('--white');

    if (window.scrollY > 50) {
			imgMenu.src = `{{asset('/img/logo/logoTradicionalEstilizada.svg')}}`;
			menuTop.style.backgroundColor = '#ffffff70';
			links.forEach(link => {link.style.color = '#000'});
		} else {
			if (route == 'home') {
				imgMenu.src = '';
				menuTop.style.backgroundColor = '#00000000'; 
				links.forEach(link => {link.style.color = whiteColor});
			} else {
				imgMenu.src = `{{asset('img/logo/logoTradicionalNegativo.svg')}}`;
				menuTop.style.backgroundColor = '#00000000'; 
				links.forEach(link => {link.style.color = whiteColor});
			}
    }
});
</script>	

