Edit nav & colors

Signed-off-by: Hadi <[email protected]>

src/components/Nav.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
-  import { Menu } from "lucide-svelte";
+  import { Search, Book, Github, User, Shield, Menu } from "lucide-svelte";
   import type { Snippet } from "svelte";
-  import type { NavItem } from "../types/nav";
 
   let {
-    title = "",
-    navLinks = [],
     action,
   }: {
     title?: string;
-    navLinks?: NavItem[];
     action?: Snippet;
   } = $props();
+
+  const navLinks = [
+    { label: "Search", href: "/", icon: Search },
+    { label: "API", href: "/api-docs", icon: Book },
+    {
+      label: "More",
+      children: [
+        {
+          label: "Source code",
+          href: "https://github.com/anotherhadi/default-creds",
+          icon: Github,
+        },
+        {
+          label: "Passwords list",
+          href: "https://github.com/anotherhadi/default-creds/blob/main/src/data",
+          icon: Shield,
+        },
+        { label: "About me", href: "https://hadi.icu", icon: User },
+      ],
+    },
+  ];
 </script>
 
 <div class="bg-base-200">
@@ -31,17 +48,37 @@
                 <span>{link.label}</span>
                 <ul class="p-2">
                   {#each link.children as sublink}
-                    <li><a href={sublink.href}>{sublink.label}</a></li>
+                    <li>
+                      <a href={sublink.href} class="flex items-center gap-2">
+                        {#if sublink.icon}
+                          {@const Icon = sublink.icon}
+                          <Icon size={12} />
+                        {/if}
+                        {sublink.label}
+                      </a>
+                    </li>
                   {/each}
                 </ul>
               {:else}
-                <a href={link.href}>{link.label}</a>
+                <a href={link.href} class="flex items-center gap-2">
+                  {#if link.icon}
+                    {@const Icon = link.icon}
+                    <Icon size={12} />
+                  {/if}
+                  {link.label}
+                </a>
               {/if}
             </li>
           {/each}
         </ul>
       </div>
-      <a href="/" class="btn btn-ghost text-xl">{title}</a>
+      <a
+        href="/"
+        class="btn btn-ghost text-xl flex justify-center gap-4 items-center"
+      >
+        <img src="/logo.svg" class="m-auto h-6" alt="iky logo" />
+        <img src="/logo-large.svg" class="m-auto h-6" alt="iky logo large" />
+      </a>
     </div>
 
     <div class="navbar-center hidden lg:flex">
@@ -57,7 +94,7 @@
                       <a href={sublink.href} class="flex items-center gap-2">
                         {#if sublink.icon}
                           {@const Icon = sublink.icon}
-                          <Icon size={16} />
+                          <Icon size={12} />
                         {/if}
                         {sublink.label}
                       </a>
@@ -69,7 +106,7 @@
               <a href={link.href} class="flex items-center gap-2">
                 {#if link.icon}
                   {@const Icon = link.icon}
-                  <Icon size={18} />
+                  <Icon size={14} />
                 {/if}
                 {link.label}
               </a>

src/layouts/Layout.astro

@@ -1,7 +1,7 @@
 ---
 import "../styles/global.css";
 import Navbar from "../components/Nav.svelte";
-import { Search, Book, Github, User, Shield, Coffee } from "lucide-svelte";
+import { Coffee } from "lucide-svelte";
 
 interface Props {
   title?: string;
@@ -15,27 +15,6 @@ const {
   ogImage = `${Astro.site ?? "https://default-creds.hadi.icu"}/og.png`
 } = Astro.props;
 
-const myLinks = [
-  { label: "Search", href: "/", icon: Search },
-  { label: "API", href: "/api-docs", icon: Book },
-  {
-    label: "More",
-    children: [
-      {
-        label: "Source code",
-        href: "https://github.com/anotherhadi/default-creds",
-        icon: Github,
-      },
-      {
-        label: "Passwords list",
-        href: "https://github.com/anotherhadi/default-creds/blob/main/src/data",
-        icon: Shield,
-      },
-      { label: "About me", href: "https://hadi.icu", icon: User },
-    ],
-  },
-];
-
 const umamiUrl = process.env.PUBLIC_UMAMI_URL;
 const umamiId = process.env.PUBLIC_UMAMI_WEBSITE_ID;
 ---
@@ -67,13 +46,13 @@ const umamiId = process.env.PUBLIC_UMAMI_WEBSITE_ID;
     <meta name="twitter:image" content={ogImage} />
   </head>
   <body class="bg-base-100 min-h-screen">
-    <Navbar title="Default Creds" navLinks={myLinks} client:load>
+    <Navbar client:load>
       <a
         href="https://ko-fi.com/anotherhadi"
         slot="action"
         target="_blank"
-        class="btn btn-primary btn-sm md:btn-md"
-        ><Coffee class="size-5" /> Support me</a
+        class="btn btn-primary btn-sm"
+        ><Coffee class="size-3" /> Support me</a
       >
     </Navbar>
     <div class="m-auto max-w-5xl md:py-10 md:px-10 py-5 px-5 animate-fade-in">

src/styles/global.css

@@ -23,9 +23,9 @@
   --color-neutral: #313244; /* Surface0 */
   --color-neutral-content: #cdd6f4; /* Text */
 
-  --color-base-300: #1e1e2e; /* Base */
-  --color-base-200: #181825; /* Mantle */
-  --color-base-100: #11111b; /* Crust */
+  --color-base-300: #1a1a2a; /* Base */
+  --color-base-200: #12121F; /* Mantle */
+  --color-base-100: #0C0C16; /* Crust */
   --color-base-content: #cdd6f4; /* Text */
 
   --color-info: #89b4fa; /* Blue */