<div
	x-data="{ showSidebar: false }" class="relative max-w-[1920px] w-full  flex w-full flex-col md:flex-row">
	<!-- This allows screen readers to skip the sidebar and go directly to the main content. -->
	<a class="sr-only" href="#main-content">skip to the main content</a>

	<!-- dark overlay for when the sidebar is open on smaller screens  -->
	<div x-cloak x-show="showSidebar" class="fixed inset-0 z-10 bg-neutral-950/10 backdrop-blur-xs md:hidden" aria-hidden="true" x-on:click="showSidebar = false" x-transition.opacity></div>

	<nav
		x-cloak class="fixed left-0 z-20 flex h-svh w-60 shrink-0 flex-col border-r border-neutral-300 bg-neutral-50 p-4 transition-transform duration-300 md:w-64 md:translate-x-0 md:relative dark:border-neutral-700 dark:bg-neutral-900" x-bind:class="showSidebar ? 'translate-x-0' : '-translate-x-60'" aria-label="sidebar navigation">
		<!-- logo  -->
		<a href="#" class="ml-2 w-fit text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-2">
			<span class="sr-only">homepage</span>
			<img src="{{ logo_img }}" alt="" class="w-10 h-10">
            <div>{{ logo_title }}</div>
		</a>


		<!-- sidebar links  -->
		<div class="flex flex-col gap-2 overflow-y-auto pb-6">
              {{inner_content}}
		  </div>
	</nav>

	<!-- main content  -->
	<div
		id="main-content" class="h-svh w-full overflow-y-auto p-4 bg-white dark:bg-neutral-950"><!-- Add main content here  -->
	</div>

	<!-- toggle button for small screen  -->
	<button class="fixed right-4 z-20 rounded-full bg-black p-4 md:hidden text-neutral-100 dark:bg-white dark:text-black" x-on:click="showSidebar = ! showSidebar">
		<svg x-show="showSidebar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="size-5" aria-hidden="true">
			<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
		</svg>
		<svg x-show="! showSidebar" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="currentColor" class="size-5" aria-hidden="true">
			<path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"/>
		</svg>
		<span class="sr-only">sidebar toggle</span>
	</button>
</div>
