✨ Add navbar & logo.

src/components/logo.svelte

@@ -0,0 +1,59 @@
+<svg
+  width="30"
+  viewBox="0 0 512 512"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  class=""
+  ><rect
+    id="r4"
+    width="512"
+    height="512"
+    x="0"
+    y="0"
+    rx="128"
+    fill="#222"
+    stroke="#FFFFFF"
+    stroke-width="0"
+    stroke-opacity="100%"
+    paint-order="stroke"
+  ></rect><rect
+    width="512"
+    height="512"
+    x="0"
+    y="0"
+    fill="url(#r6)"
+    rx="128"
+    style="mix-blend-mode: overlay;"
+  ></rect><clipPath id="clip"><use xlink:href="#r4"></use></clipPath><defs
+    ><linearGradient
+      id="r5"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="rotate(135)"
+      style="transform-origin: center center;"
+      ><stop stop-color="#222"></stop><stop offset="1" stop-color="#222222"></stop></linearGradient
+    ><radialGradient
+      id="r6"
+      cx="0"
+      cy="0"
+      r="1"
+      gradientUnits="userSpaceOnUse"
+      gradientTransform="translate(256) rotate(90) scale(512)"
+      ><stop stop-color="white"></stop><stop offset="1" stop-color="white" stop-opacity="0"
+      ></stop></radialGradient
+    ></defs
+  ><svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="310"
+    height="310"
+    fill="#e8e8e8"
+    viewBox="0 0 256 256"
+    x="101"
+    y="101"
+    alignment-baseline="middle"
+    style="color: rgb(255, 255, 255);"
+    ><path
+      d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
+    ></path></svg
+  ></svg
+>

src/routes/+layout.svelte

@@ -26,11 +26,15 @@
   import Transition from '@/components/transition.svelte';
   import Container from '@/components/container.svelte';
   import Theme from '@/components/theme.svelte';
+
+  // Layout:
+  import Navbar from '@/components/navbar.svelte';
 </script>
 
+<Navbar />
 <main>
-  <nav
+  <aside
-    class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-300 dark:border-neutral-800 md:fixed md:left-0 md:top-0 md:h-full md:w-60 md:border-none md:pb-10"
+    class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-300 dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
   >
     <div class="px-6 py-6">
       <div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
@@ -117,7 +121,7 @@
         </div>
       </a>
     </div>
-  </nav>
+  </aside>
   <div class="py-2 md:ml-60 md:py-6">
     {#if data.pathname !== '/'}
       <Container>