clrghouz/resources/views/layouts/partials/topmenu.blade.php

<div id="nav-menu">
	<h1>{{ $title ?? config('app.name') }}</h1>

	<ul id="navlist-desktop">
		<li><a href="{{ url('/') }}" class="@if(preg_match('#^/#',request()->path()))thispage @endif"><span>Home</span></a></li>
		<li><a href="{{ url('about') }}" class="@if(preg_match('#^about#',request()->path()))thispage @endif"><span>About</span></a></li>
		<li><a href="{{ url('help') }}" class="@if(preg_match('#^help#',request()->path()))thispage @endif disabled"><span>Help</span></a></li>
		@can('admin')
			<li><a href="{{ url('setup') }}" class="@if(preg_match('#^setup#',request()->path()))thispage @endif"><span>Setup</span></a></li>
		@endcan
		@if(preg_match('#^/network/#',request()->path()))
			<li><a href="{{ url('join') }}" class="@if(preg_match('#^join#',request()->path()))thispage @endif"><span>Join</span></a></li>
		@endif
	</ul>

	<ul class="float-end">
		@auth
			<li class="{{ $user->switched ? 'switched' : '' }}"><a href="{{ url('settings') }}"><span>{{ $user->name }}</span></a></li>
			@if($user->switched)
				<li><a href="{{ url('admin/switch/stop') }}">
					<span>Switch Back</span>
				</a></li>
			@else
				<li><a href="{{ url('logout') }}"><span>Logout</span></a></li>
			@endif

		@endauth
		@guest
			<li><a href="{{ url('login') }}"><span>Login</span></a></li>
		@endguest
	</ul>

	@auth
	<ul class="float-end" id="searchbar">
		<li><input type="text" class="ps-2" id="q" name="search" placeholder="Search..."><i class="bi bi-search"></i><div id="search_results"></div></li>
	</ul>
	@endauth

	{{--
	<div id="fontwidget">
		<span id="row1">
			Text mode font:
		</span>
		<span id="row2">
			<a id="togglefonts" class="on" href="#-" onclick="toggleFonts();">[✓]</a>
			<a id="selectfont1" class="on" href="#-" onclick="switchFont(1);">1</a>
			<a id="selectfont2" href="#-" onclick="switchFont(2);" class="on">2</a>
			<a id="selectfont3" href="#-" onclick="switchFont(3);" class="on">3</a>
			<a id="selectfont4" href="#-" onclick="switchFont(4);" class="on">4</a>
			<a id="selectfont5" href="#-" onclick="switchFont(5);" class="on">5</a>
			<a id="selectfont6" href="#-" onclick="switchFont(6);" class="on">6</a>
		</span>
		<span id="currentfont">
			IBM VGA 8x16
		</span>
	</div>
	--}}

	{{--
	@todo Get rid of the CSS values if they arenot used, then delete this
	<noscript>
		<div id="fontwidget-no-js">
			<div class="grn">Enable JavaScript for full functionality of all site features.</div>
		</div>
	</noscript>
	--}}

	{{--
	@todo Is this required?
	<div id="mobile-nav-content">
		<ul>
			<li>Oldschool PC Fonts:</li>
			<li class="nobullet"><a href="../"><span>Home</span></a></li>
			<li><a class="thispage"><span>Fonts</span></a></li>
			<li><a href="../readme/"><span>Readme</span></a></li>
			<li><a href="../showcase/"><span>Showcase</span></a></li>
			<li><a href="../download/"><span>Download</span></a></li>
		</ul>
		<div class="mobile-button" id="mobile-button-burger" onclick="toggleSidebar();"> ≡ </div>
		<div class="mobile-button" id="mobile-button-fontwidget" onclick="toggleFontWidget();">Aa</div>
	</div>
	--}}

	<div id="sidebar">
		@include('layouts.partials.sidebar')
	</div>
</div>

@section('page-scripts')
	<style>
		/* Solid border */
		div.typeahead.dropdown-menu > .dropdown-header {
			color: #000000;
			text-align: left;
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function() {
			$("input[id=q]").typeahead({
				autoSelect: false,
				scrollHeight: 10,
				theme: 'bootstrap5',
				delay: 500,
				minLength: 2,
				items: {{ $search_limit ?? 100 }},
				fitToElement: false,
				selectOnBlur: false,
				appendTo: "#search_results",
				source: function (query,process) {
					search('{{ url('search') }}',query,process);
				},

				matcher: function () { return true; },

				// Disable sorting and just return the items (items should by the ajax method)
				sorter: function(items) {
					return items;
				},

				updater: function (item) {
					window.parent.location.href = item.value;
				},
			})
				.on('keyup keypress', function(event) {
					var key = event.keyCode || event.which;
					if (key === 13) {
						event.preventDefault();
						return false;
					}
				});
		});

		var c=0;
		var search = _.debounce(function(url,query,process,icon){
			$.ajax({
				url : url,
				type : 'GET',
				data : 'term=' + query,
				dataType : 'JSON',
				async : true,
				cache : false,
				beforeSend : function() {
					if (c++ == 0) {
						$('i.bi-search').addClass('spinner-grow spinner-grow-sm');
					}
				},
				success : function(data) {
					// if json is null, means no match, won't do again.
					if(data==null || (data.length===0)) return;

					process(data);
				},
				complete : function() {
					if (--c == 0) {
						$('i.bi-search').removeClass('spinner-grow spinner-grow-sm');
					}
				}
			})
		}, 500);
	</script>
@append