feat(*): Add basket to navbar

src/routes/+layout.svelte

@@ -97,7 +97,9 @@
 			</ul>
 		</div>
 		<div class="navbar-end">
-			<button class="btn btn-ghost btn-circle">
+			<div class="dropdown dropdown-end">
+				<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+					<div class="indicator">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							class="h-5 w-5"
@@ -108,10 +110,22 @@
 								stroke-linecap="round"
 								stroke-linejoin="round"
 								stroke-width="2"
-						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+								d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
 							/></svg
 						>
-			</button>
+						<span class="badge badge-sm indicator-item">8</span>
+					</div>
+				</div>
+				<div class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow">
+					<div class="card-body">
+						<span class="font-bold text-lg">8 Items</span>
+						<span class="text-info">Subtotal: $999</span>
+						<div class="card-actions">
+							<a class="btn btn-primary btn-block" href="/checkout">View basket</a>
+						</div>
+					</div>
+				</div>
+			</div>
 			<div class="dropdown dropdown-end">
 				<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
 					<div class="w-10 rounded-full">

src/routes/checkout/cancelled/+page.svelte

@@ -1,3 +1,3 @@
 <section>
-	<p>Forgot to add something to your cart? Shop around then come back to pay!</p>
+	<p>Forgot to add something to your basket? Shop around then come back to pay!</p>
 </section>