From c441671134ceda2f646591ca963a8037ea0185a8 Mon Sep 17 00:00:00 2001
From: "Ian K. Guimaraes" <ianguimaraes31@gmail.com>
Date: Tue, 20 Aug 2024 16:40:58 -0300
Subject: [PATCH] chore: UI enhancements

---
 research/package.json                         |   1 +
 research/pnpm-lock.yaml                       |   9 +
 research/src/components/Dropdown.svelte       |  68 +++++
 research/src/components/Header.svelte         | 120 +++++++++
 research/src/components/icons/Menu.svelte     |  12 +
 research/src/components/icons/Moon.svelte     |   6 +
 research/src/components/icons/Sun.svelte      |  20 ++
 research/src/components/layout/BaseHead.astro |  33 ++-
 research/src/layouts/Header.astro             | 247 ------------------
 research/src/layouts/Layout.astro             |  29 +-
 research/src/pages/[id].astro                 |   2 +-
 research/src/pages/index.astro                |  19 +-
 research/src/stores/theme.store.ts            |  34 +++
 research/src/utils/theme.ts                   |   0
 research/tailwind.config.mjs                  |   2 +
 15 files changed, 303 insertions(+), 299 deletions(-)
 create mode 100644 research/src/components/Dropdown.svelte
 create mode 100644 research/src/components/Header.svelte
 create mode 100644 research/src/components/icons/Menu.svelte
 create mode 100644 research/src/components/icons/Moon.svelte
 create mode 100644 research/src/components/icons/Sun.svelte
 delete mode 100644 research/src/layouts/Header.astro
 create mode 100644 research/src/stores/theme.store.ts
 create mode 100644 research/src/utils/theme.ts

diff --git a/research/package.json b/research/package.json
index 4fcb237..2def3a8 100644
--- a/research/package.json
+++ b/research/package.json
@@ -15,6 +15,7 @@
         "@astrojs/svelte": "^5.7.0",
         "@astrojs/tailwind": "^5.1.0",
         "astro": "^4.14.2",
+        "nanostores": "^0.11.2",
         "svelte": "^4.2.18",
         "tailwindcss": "^3.4.10",
         "typescript": "^5.5.4"
diff --git a/research/pnpm-lock.yaml b/research/pnpm-lock.yaml
index dee6fdc..b3b18a3 100644
--- a/research/pnpm-lock.yaml
+++ b/research/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       astro:
         specifier: ^4.14.2
         version: 4.14.2(rollup@4.20.0)(sass@1.77.8)(typescript@5.5.4)
+      nanostores:
+        specifier: ^0.11.2
+        version: 0.11.2
       svelte:
         specifier: ^4.2.18
         version: 4.2.18
@@ -1559,6 +1562,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanostores@0.11.2:
+    resolution: {integrity: sha512-6bucNxMJA5rNV554WQl+MWGng0QVMzlRgpKTHHfIbVLrhQ+yRXBychV9ECGVuuUfCMQPjfIG9bj8oJFZ9hYP/Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
   neotraverse@0.6.18:
     resolution: {integrity: sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA==}
     engines: {node: '>= 10'}
@@ -4098,6 +4105,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanostores@0.11.2: {}
+
   neotraverse@0.6.18: {}
 
   nlcst-to-string@4.0.0:
diff --git a/research/src/components/Dropdown.svelte b/research/src/components/Dropdown.svelte
new file mode 100644
index 0000000..8f406c6
--- /dev/null
+++ b/research/src/components/Dropdown.svelte
@@ -0,0 +1,68 @@
+<div class="group flex flex-col relative">
+    <button class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]">
+        Resources
+        <span class="">
+            <svg
+                class="hidden dark:block"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    class="svg-path"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
+                    fill="#D4D4D4"
+                ></path>
+            </svg>
+            <svg
+                class="dark:hidden"
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    class="svg-path"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
+                    fill="#1B1B1B"
+                ></path>
+            </svg>
+        </span>
+    </button>
+
+    <div
+        class="group-hover:block rounded bg-black sidebar p-4 absolute hidden top-6"
+    >
+        <a
+            href="https://eip2077.info"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-green text-white hover:text-black hover:rounded"
+            >EIP-2077</a
+        >
+        <a
+            href="https://eips.wiki"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >EIP Wiki</a
+        >
+        <a
+            href="https://research.2077.xyz"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >2077 Labs</a
+        >
+        <a
+            href="https://etherpedia.2077.xyz"
+            target="_blank"
+            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-black hover:rounded"
+            >Etherpedia</a
+        >
+    </div>
+</div>
diff --git a/research/src/components/Header.svelte b/research/src/components/Header.svelte
new file mode 100644
index 0000000..2af048a
--- /dev/null
+++ b/research/src/components/Header.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+    import Sun from './icons/Sun.svelte'
+    import Moon from './icons/Moon.svelte'
+    import Menu from './icons/Menu.svelte'
+    import Dropdown from './Dropdown.svelte'
+    import {
+        toggleTheme,
+        getTheme,
+        theme,
+        anotherStuff,
+    } from '../stores/theme.store'
+</script>
+
+<header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto">
+    <nav class="flex justify-between">
+        <div>
+            <a href="/" class="">
+                <img
+                    src="/logo-black.webp"
+                    alt=""
+                    width="197"
+                    height="58"
+                    class="dark:hidden block"
+                />
+                <img
+                    src="/logo-white.webp"
+                    alt=""
+                    width="197"
+                    height="58"
+                    class="dark:block hidden"
+                />
+            </a>
+        </div>
+
+        <div class="flex items-center">
+            <!-- <button
+                id="btn"
+                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
+                on:click={toggleTheme}
+            >
+                {#if $theme === 'dark'}
+                    <Sun />
+                {:else}
+                    <Moon />
+                {/if}
+            </button> -->
+
+            <button class="lg:hidden">
+                <Menu />
+            </button>
+
+            <div class="hidden lg:flex items-center gap-x-8">
+                <Dropdown />
+
+                <a href="https://2077.xyz/support" class="hover:text-green"
+                    >Support us</a
+                >
+                <a
+                    href="#subscribe"
+                    class="bg-greenLm text-black px-8 py-2 rounded font-bold"
+                >
+                    Subscribe
+                </a>
+            </div>
+        </div>
+    </nav>
+</header>
+
+<style scoped>
+    .sidebar {
+        clip-path: polygon(30px 0, 100% 0, 280% 0px, 80% 100%, 0 100%, 0 30px);
+        display: none;
+    }
+
+    .sidebar > a:hover {
+        clip-path: polygon(20px 0, 100% 0, 300% 0px, 100% 100%, 0 100%, 0 20px);
+    }
+
+    .sidebar > a:last-child:hover {
+        clip-path: polygon(50px 0, 10% 0, 137% 0px, 80% 100%, 0 100%, 0 0px);
+    }
+
+    .sidebar.show {
+        display: block;
+    }
+
+    .resources-button:hover .svg-path {
+        fill: #c6ff50;
+    }
+
+    .resources-button:focus + .sidebar,
+    .resources-button:hover + .sidebar {
+        display: block;
+    }
+
+    /* The container <div> - needed to position the dropdown content */
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    /* Dropdown Content (Hidden by Default) */
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+    }
+
+    /* Change color of dropdown links on hover */
+    .dropdown-content a:hover {
+        background-color: #ddd;
+    }
+
+    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+    .show {
+        display: block;
+    }
+</style>
diff --git a/research/src/components/icons/Menu.svelte b/research/src/components/icons/Menu.svelte
new file mode 100644
index 0000000..d4e1007
--- /dev/null
+++ b/research/src/components/icons/Menu.svelte
@@ -0,0 +1,12 @@
+<svg
+    class=""
+    width="28"
+    height="18"
+    viewBox="0 0 28 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <rect class="" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect y="8" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect x="8" y="16" width="20" height="2" rx="1" fill="#1b1b1b"></rect>
+</svg>
diff --git a/research/src/components/icons/Moon.svelte b/research/src/components/icons/Moon.svelte
new file mode 100644
index 0000000..dc6cf1a
--- /dev/null
+++ b/research/src/components/icons/Moon.svelte
@@ -0,0 +1,6 @@
+<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+        fill-rule="evenodd"
+        d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
+    />
+</svg>
diff --git a/research/src/components/icons/Sun.svelte b/research/src/components/icons/Sun.svelte
new file mode 100644
index 0000000..027c45e
--- /dev/null
+++ b/research/src/components/icons/Sun.svelte
@@ -0,0 +1,20 @@
+<svg
+    class="fill-yellow-500"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <g clip-path="url(#clip0_535_75)">
+        <path
+            d="M6.76 4.84005L4.96 3.05005L3.55 4.46005L5.34 6.25005L6.76 4.84005ZM1 10.5H4V12.5H1V10.5ZM11 0.550049H13V3.50005H11V0.550049ZM19.04 3.04505L20.448 4.45205L18.658 6.24205L17.251 4.83405L19.04 3.04505ZM17.24 18.16L19.03 19.96L20.44 18.55L18.64 16.76L17.24 18.16ZM20 10.5H23V12.5H20V10.5ZM12 5.50005C8.69 5.50005 6 8.19005 6 11.5C6 14.81 8.69 17.5 12 17.5C15.31 17.5 18 14.81 18 11.5C18 8.19005 15.31 5.50005 12 5.50005ZM12 15.5C9.79 15.5 8 13.71 8 11.5C8 9.29005 9.79 7.50005 12 7.50005C14.21 7.50005 16 9.29005 16 11.5C16 13.71 14.21 15.5 12 15.5ZM11 19.5H13V22.4501H11V19.5ZM3.55 18.5401L4.96 19.9501L6.75 18.15L5.34 16.74L3.55 18.5401Z"
+            fill="#C6FF50"
+        ></path>
+    </g>
+    <defs>
+        <clipPath id="clip0_535_75">
+            <rect width="24" height="24" fill="white"></rect>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/research/src/components/layout/BaseHead.astro b/research/src/components/layout/BaseHead.astro
index 58f44e2..2845023 100644
--- a/research/src/components/layout/BaseHead.astro
+++ b/research/src/components/layout/BaseHead.astro
@@ -1,5 +1,4 @@
 ---
-// @ts-ignore: Cannot find module 'astro:transitions'
 import { ViewTransitions } from 'astro:transitions'
 
 interface Props {
@@ -45,22 +44,22 @@ const { title, description, ogImage } = Astro.props
     />
 
     <script is:inline>
-        const theme = () => {
-            let btn = document.querySelector('#btn')
-            let btn_mobile = document.querySelector('#btn-mobile')
-            const toggleDarkMode = () => {
-                document.documentElement.classList.toggle('dark')
-                const isDarkMode =
-                    document.documentElement.classList.contains('dark')
-                localStorage.setItem('theme', isDarkMode ? 'dark' : 'light')
-            }
-            btn.addEventListener('click', toggleDarkMode)
-            btn_mobile.addEventListener('click', toggleDarkMode)
-        }
-
-        theme()
-
-        document.addEventListener('astro:after-swap', theme)
+        // const theme = () => {
+        //     let btn = document.querySelector('#btn')
+        //     let btn_mobile = document.querySelector('#btn-mobile')
+        //     const toggleDarkMode = () => {
+        //         document.documentElement.classList.toggle('dark')
+        //         const isDarkMode =
+        //             document.documentElement.classList.contains('dark')
+        //         localStorage.setItem('theme', isDarkMode ? 'dark' : 'light')
+        //     }
+        //     btn.addEventListener('click', toggleDarkMode)
+        //     btn_mobile.addEventListener('click', toggleDarkMode)
+        // }
+
+        // theme()
+
+        // document.addEventListener('astro:after-swap', theme)
     </script>
 
     <script
diff --git a/research/src/layouts/Header.astro b/research/src/layouts/Header.astro
deleted file mode 100644
index d32dfce..0000000
--- a/research/src/layouts/Header.astro
+++ /dev/null
@@ -1,247 +0,0 @@
-<header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto">
-    <Dropdown />
-    <nav class="flex justify-between">
-        <div>
-            <a href="/" class="logo block light">
-                <img src="/logo-black.webp" alt="" width="197" height="58" />
-            </a>
-            <a href="/" class="logo hidden">
-                <img src="/logo-white.webp" alt="" width="197" height="58" />
-            </a>
-        </div>
-
-        <div class="flex items-center">
-            <button
-                id="btn"
-                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
-            >
-                <svg
-                    id="light-icon"
-                    class="fill-yellow-500 hidden dark:block light"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <g clip-path="url(#clip0_535_75)">
-                        <path
-                            d="M6.76 4.84005L4.96 3.05005L3.55 4.46005L5.34 6.25005L6.76 4.84005ZM1 10.5H4V12.5H1V10.5ZM11 0.550049H13V3.50005H11V0.550049ZM19.04 3.04505L20.448 4.45205L18.658 6.24205L17.251 4.83405L19.04 3.04505ZM17.24 18.16L19.03 19.96L20.44 18.55L18.64 16.76L17.24 18.16ZM20 10.5H23V12.5H20V10.5ZM12 5.50005C8.69 5.50005 6 8.19005 6 11.5C6 14.81 8.69 17.5 12 17.5C15.31 17.5 18 14.81 18 11.5C18 8.19005 15.31 5.50005 12 5.50005ZM12 15.5C9.79 15.5 8 13.71 8 11.5C8 9.29005 9.79 7.50005 12 7.50005C14.21 7.50005 16 9.29005 16 11.5C16 13.71 14.21 15.5 12 15.5ZM11 19.5H13V22.4501H11V19.5ZM3.55 18.5401L4.96 19.9501L6.75 18.15L5.34 16.74L3.55 18.5401Z"
-                            fill="#C6FF50"></path>
-                    </g>
-                    <defs>
-                        <clipPath id="clip0_535_75">
-                            <rect width="24" height="24" fill="white"></rect>
-                        </clipPath>
-                    </defs>
-                </svg>
-            </button>
-
-            <button class="lg:hidden">
-                <svg
-                    class="hidden"
-                    width="28"
-                    height="18"
-                    viewBox="0 0 28 18"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <rect class="" width="28" height="2" rx="1" fill="white"
-                    ></rect>
-                    <rect y="8" width="28" height="2" rx="1" fill="white"
-                    ></rect>
-                    <rect x="8" y="16" width="20" height="2" rx="1" fill="white"
-                    ></rect>
-                </svg>
-                <svg
-                    class=""
-                    width="28"
-                    height="18"
-                    viewBox="0 0 28 18"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <rect class="" width="28" height="2" rx="1" fill="#1b1b1b"
-                    ></rect>
-                    <rect y="8" width="28" height="2" rx="1" fill="#1b1b1b"
-                    ></rect>
-                    <rect
-                        x="8"
-                        y="16"
-                        width="20"
-                        height="2"
-                        rx="1"
-                        fill="#1b1b1b"></rect>
-                </svg>
-            </button>
-
-            <div class="hidden lg:flex items-center gap-x-8">
-                <div class="dropdown">
-                    <button
-                        onclick="myFunction()"
-                        class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]"
-                    >
-                        Resources
-                        <span class="">
-                            <svg
-                                class="hidden dark:block"
-                                width="16"
-                                height="17"
-                                viewBox="0 0 16 17"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    class="svg-path"
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
-                                    fill="#D4D4D4"></path>
-                            </svg>
-                            <svg
-                                class="dark:hidden"
-                                width="16"
-                                height="17"
-                                viewBox="0 0 16 17"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    class="svg-path"
-                                    fill-rule="evenodd"
-                                    clip-rule="evenodd"
-                                    d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
-                                    fill="#1B1B1B"></path>
-                            </svg>
-                            <!-----
-              
-              <svg
-                class="dark:hidden"
-                width="16"
-                height="17"
-                viewBox="0 0 16 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class="svg-path"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M2.19526 5.77046C2.45561 5.51011 2.87772 5.51011 3.13807 5.77046L7.52861 10.161C7.78896 10.4213 8.21107 10.4213 8.47142 10.161L12.8619 5.77046C13.1223 5.51011 13.5444 5.51011 13.8047 5.77046C14.0651 6.03081 14.0651 6.45292 13.8047 6.71327L9.41423 11.1038C8.63318 11.8848 7.36685 11.8848 6.5858 11.1038L2.19526 6.71327C1.93491 6.45292 1.93491 6.03081 2.19526 5.77046Z"
-                  fill="#1B1B1B"></path>
-              </svg>
-              --- -->
-                        </span>
-                    </button>
-
-                    <div
-                        id="myDropdown"
-                        class="dropdown-content rounded bg-black sidebar p-4 mt-4"
-                    >
-                        <a
-                            href="https://eip2077.info"
-                            target="_blank"
-                            class="block px-4 py-2 hover:bg-green text-white hover:text-black hover:rounded"
-                            >EIP-2077</a
-                        >
-                        <a
-                            href="https://eips.wiki"
-                            target="_blank"
-                            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-gray-700 hover:rounded"
-                            >EIP Wiki</a
-                        >
-                        <a
-                            href="https://research.2077.xyz"
-                            target="_blank"
-                            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-gray-700 hover:rounded"
-                            >2077 Labs</a
-                        >
-                        <a
-                            href="https://etherpedia.2077.xyz"
-                            target="_blank"
-                            class="block px-4 py-2 hover:bg-[#C6FF50] text-white hover:text-gray-700 hover:rounded"
-                            >Etherpedia</a
-                        >
-                    </div>
-                </div>
-
-                <a href="https://2077.xyz/support" class="hover:text-green"
-                    >Support us</a
-                >
-                <a
-                    href="#subscribe"
-                    class="bg-greenLm text-black px-8 py-2 rounded font-bold"
-                >
-                    Subscribe
-                </a>
-            </div>
-        </div>
-    </nav>
-</header>
-
-<style is:global>
-    .sidebar {
-        clip-path: polygon(30px 0, 100% 0, 280% 0px, 80% 100%, 0 100%, 0 30px);
-        display: none;
-
-        a {
-            &:hover {
-                clip-path: polygon(
-                    20px 0,
-                    100% 0,
-                    300% 0px,
-                    100% 100%,
-                    0 100%,
-                    0 20px
-                );
-            }
-            &:last-child:hover {
-                clip-path: polygon(
-                    50px 0,
-                    10% 0,
-                    137% 0px,
-                    80% 100%,
-                    0 100%,
-                    0 0px
-                );
-            }
-        }
-    }
-    .sidebar.show {
-        display: block;
-    }
-
-    .resources-button:hover .svg-path {
-        fill: #c6ff50;
-    }
-
-    .resources-button:focus + .sidebar,
-    .resources-button:hover + .sidebar {
-        display: block;
-    }
-
-    /* The container <div> - needed to position the dropdown content */
-    .dropdown {
-        position: relative;
-        display: inline-block;
-    }
-
-    /* Dropdown Content (Hidden by Default) */
-    .dropdown-content {
-        display: none;
-        position: absolute;
-        min-width: 160px;
-        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-        z-index: 1;
-    }
-
-    /* Change color of dropdown links on hover */
-    .dropdown-content a:hover {
-        background-color: #ddd;
-    }
-
-    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
-    .show {
-        display: block;
-    }
-</style>
diff --git a/research/src/layouts/Layout.astro b/research/src/layouts/Layout.astro
index 826bf6f..4b807a0 100644
--- a/research/src/layouts/Layout.astro
+++ b/research/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import BaseHead from '../components/layout/BaseHead.astro'
-import Header from '../layouts/Header.astro'
+import Header from '../components/Header.svelte'
 import Footer from '../layouts/Footer.astro'
 
 interface Props {
@@ -17,26 +17,6 @@ const _ogImage = new URL(
 ---
 
 <script is:inline>
-    const theme = (() => {
-        if (
-            typeof localStorage !== 'undefined' &&
-            localStorage.getItem('theme')
-        ) {
-            return localStorage.getItem('theme')
-        }
-        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark'
-        }
-        return 'light'
-    })()
-
-    if (theme === 'light') {
-        document.documentElement.classList.remove('dark')
-    } else {
-        document.documentElement.classList.add('dark')
-    }
-    window.localStorage.setItem('theme', theme)
-
     function myFunction() {
         document.getElementById('myDropdown').classList.toggle('show')
     }
@@ -58,8 +38,9 @@ const _ogImage = new URL(
 
 <html lang="en" class="h-full">
     <BaseHead ogImage={_ogImage} title={title} description={description} />
-    <Header />
-    <body>
+    <Header client:load />
+    <body class="dark:bg-black dark:text-white">
         <slot />
-    </body><Footer />
+    </body>
+    <Footer />
 </html>
diff --git a/research/src/pages/[id].astro b/research/src/pages/[id].astro
index d2476d0..6a13a42 100644
--- a/research/src/pages/[id].astro
+++ b/research/src/pages/[id].astro
@@ -78,7 +78,7 @@ try {
                                 />
                             </div>
                             <div
-                                class="max-w-screen-lg m-auto flex flex-col gap-y-4 mb-32"
+                                class="max-w-screen-lg m-auto flex flex-col gap-y-4 mb-32 dark:text-white"
                                 set:html={article.data?.content.replace(
                                     /<hr\s*\/?>/g,
                                     '',
diff --git a/research/src/pages/index.astro b/research/src/pages/index.astro
index 02ac050..2830160 100644
--- a/research/src/pages/index.astro
+++ b/research/src/pages/index.astro
@@ -45,7 +45,7 @@ try {
             </div>
             <div class="flex justify-between">
                 <div
-                    class="menu hidden bg-black lg:block mr-12 rounded-xl xl:w-1/6 h-[520px]"
+                    class="menu hidden dark:bg-gray bg-black lg:block mr-12 rounded-xl xl:w-1/6 h-[520px]"
                 >
                     <div class="pt-8 px-8 flex flex-col gap-6">
                         {
@@ -77,6 +77,10 @@ try {
                                 class="flex flex-col gap-y-1 mb-6"
                                 data-key={article.id}
                             >
+                                <a
+                                    class="bg-transparent"
+                                    href={`/${article.id}`}
+                                >
                                 <img
                                     src={`${article.thumb}`}
                                     alt=""
@@ -86,21 +90,16 @@ try {
                                 <ul class="flex gap-x-2 py-2">
                                     {article?.categories.map((category) => (
                                         <li>
-                                            <a
-                                                href={`/categories/${category.name}`}
+                                            <div
+                                                class="flex items-center gap-0.5 text-sm bg-[#1B1B1B] text-[#C6FF50] max-w-fit-content px-2 py-1.5 rounded-md"
                                             >
                                                 {category.name}
-                                            </a>
+                                            </div>
                                         </li>
                                     ))}
                                 </ul>
-                                <h2 class="mb-2">{article.title}</h2>
+                                <h2 class="mb-2 text-xl font-bold">{article.title}</h2>
                                 <p class="mb-4">{article.summary}</p>
-                                <a
-                                    class="bg-transparent hover:text-[#C6FF50]"
-                                    href={`/${article.id}`}
-                                >
-                                    Read post &rarr;
                                 </a>
                             </li>
                         ))
diff --git a/research/src/stores/theme.store.ts b/research/src/stores/theme.store.ts
new file mode 100644
index 0000000..4e9d6bc
--- /dev/null
+++ b/research/src/stores/theme.store.ts
@@ -0,0 +1,34 @@
+import { atom } from 'nanostores'
+
+const Themes = {
+    Light: 'light',
+    Dark: 'dark',
+} as const
+type Theme = (typeof Themes)[keyof typeof Themes]
+const LOCAL_STORAGE_KEY = 'theme'
+
+export const theme = atom<Theme>(Themes.Light)
+
+export const anotherStuff = atom<boolean>(false)
+
+export function toggleTheme() {
+    console.log('toggleTheme called')
+
+    const currentTheme = localStorage.getItem(LOCAL_STORAGE_KEY)
+
+    if (currentTheme === Themes.Dark || !currentTheme) {
+        theme.set(Themes.Light)
+        console.log(theme.get())
+        localStorage.setItem(LOCAL_STORAGE_KEY, Themes.Light)
+        document.documentElement.classList.remove('dark')
+    } else {
+        theme.set(Themes.Dark)
+        console.log(theme.get())
+        localStorage.setItem(LOCAL_STORAGE_KEY, Themes.Dark)
+        document.documentElement.classList.add('dark')
+    }
+}
+
+export function getTheme() {
+    return theme
+}
diff --git a/research/src/utils/theme.ts b/research/src/utils/theme.ts
new file mode 100644
index 0000000..e69de29
diff --git a/research/tailwind.config.mjs b/research/tailwind.config.mjs
index aae8e5c..af7ee10 100644
--- a/research/tailwind.config.mjs
+++ b/research/tailwind.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
     darkMode: 'class',
+    safelist: ['dark'],
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
         colors: {
@@ -8,6 +9,7 @@ export default {
             white: '#efefef',
             green: '#C6FF50',
             greenLm: '#91b208',
+            gray: '#1b1b1b',
         },
         fontFamily: {
             sans: ['Graphik', 'sans-serif'],