menu mvp

leon-luna-ray · Feb 28, 2024 · 2364513 · 2364513
1 parent 81f825b
commit 2364513
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 28 deletions.
diff --git a/src/components/DarkModeBtn.astro b/src/components/DarkModeBtn.astro
@@ -1,8 +1,12 @@
+---
+import IconDarkMode from './icons/IconDarkMode.vue'
+---
 <div
     id="dark-mode-btn"
-    class="absolute right-[4rem] bg-theme px-[1rem] hover:cursor-pointer hidden md:block dark:text-light-yellow"
+    class="bg-theme px-[1rem] hover:cursor-pointer block dark:text-light-yellow"
 >
     I/O
+    <!-- <IconDarkMode/> -->
 </div>
 
 <script is:inline>

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,7 +1,14 @@
+<template>
+    <footer class="flex flex-col justify-center items-center gap-y-[1.875rem]">
+        <SocialIcons :email="email" :github="github" :linkedin="linkedin" />
+        <div class='copyright'>
+            <p>© {{ year }} {{ name }}. All rights reserved.</p>
+        </div>
+    </footer>
+</template>
+
 <script setup lang="ts">
-import IconEmail from './icons/IconEmail.vue';
-import IconGithub from './icons/IconGithub.vue';
-import IconLinkedin from './icons/IconLinkedin.vue';
+import SocialIcons from './SocialIcons.vue';
 
 const props = defineProps({
     name: {
@@ -21,21 +28,3 @@ const props = defineProps({
 
 const year = new Date().getFullYear();
 </script>
-<template>
-    <footer class="flex flex-col justify-center items-center gap-y-[1.875rem]">
-        <div class='social-icons flex gap-x-[1.25rem]'>
-            <a v-if="email" :href="`mailto:${email}`" aria-label="Email">
-                <IconEmail />
-            </a>
-            <a v-if="github" :href="github" target="_blank" aria-label="GitHub">
-                <IconGithub />
-            </a>
-            <a v-if="linkedin" :href="linkedin" target="_blank" aria-label="LinkedIn">
-                <IconLinkedin />
-            </a>
-        </div>
-        <div class='copyright'>
-            <p>© {{ year }} {{ name }}. All rights reserved.</p>
-        </div>
-    </footer>
-</template>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -1,10 +1,15 @@
 <template>
-    <aside :class="[isVisible, 'fixed top-0 right-[-100vw] md:right-[-25vw] w-[100vw] md:w-[25vw] h-screen bg-theme z-10 transition-transform duration-300 ease-in-out border-red']">
+    <aside :class="[isVisible, 'fixed top-0 right-[-100vw] md:right-[-25vw] w-[100vw] md:w-[25vw] h-screen bg-theme z-10 transition-transform duration-300 ease-in-out border border-dark-brown dark:border-light-yellow/80 flex flex-col justify-between']">
+
         <div class="p-[2rem] relative">
+            <div class="absolute top-6 left-5">
+                <slot name="dark-mode-btn"></slot>
+            </div>
             <button @click="isMenuOpen.set(!$isMenuOpen)" class="absolute top-5 right-5">
                 <IconClose />
             </button>
             <nav class="text-center">
+                <span class="uppercase text-chocolate dark:text-light-yellow/60 tracking-[2px]">rayluna.dev</span>
                 <h1>Menu</h1>
                 <ul class="menu-links flex flex-col gap-y-4 mt-10">
                     <li>
@@ -16,6 +21,9 @@
                 </ul>
             </nav>
         </div>
+        <div class="flex-col-1 justify-center items-center p-[2rem]">
+            <SocialIcons :email="email" :github="github" :linkedin="linkedin" />
+        </div>
     </aside>
 </template>
 
@@ -24,6 +32,20 @@ import { computed } from 'vue';
 import { isMenuOpen } from '../stores/menu';
 import { useStore } from '@nanostores/vue';
 import IconClose from '../components/icons/IconClose.vue'
+import SocialIcons from './SocialIcons.vue';
+
+// Props
+const props = defineProps({
+    email: {
+        type: String,
+    },
+    github: {
+        type: String,
+    },
+    linkedin: {
+        type: String,
+    },
+});
 
 // State
 const $isMenuOpen = useStore(isMenuOpen);

diff --git a/src/components/SocialIcons.vue b/src/components/SocialIcons.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class='social-icons flex gap-x-[1.25rem]'>
+        <a v-if="email" :href="`mailto:${email}`" aria-label="Email">
+            <IconEmail />
+        </a>
+        <a v-if="github" :href="github" target="_blank" aria-label="GitHub">
+            <IconGithub />
+        </a>
+        <a v-if="linkedin" :href="linkedin" target="_blank" aria-label="LinkedIn">
+            <IconLinkedin />
+        </a>
+    </div>
+</template>
+
+<script setup lang="ts">
+import IconEmail from './icons/IconEmail.vue';
+import IconGithub from './icons/IconGithub.vue';
+import IconLinkedin from './icons/IconLinkedin.vue';
+
+const props = defineProps({
+    email: {
+        type: String,
+    },
+    github: {
+        type: String,
+    },
+    linkedin: {
+        type: String,
+    },
+});
+
+const year = new Date().getFullYear();
+</script>
diff --git a/src/components/icons/IconDarkMode.vue b/src/components/icons/IconDarkMode.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0z" fill="none" />
+        <circle cx="12" cy="12" r="5" fill="currentColor" />
+    </svg>
+</template>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -62,16 +62,15 @@ const getPathArray = (): string[] => {
             title={global?.title}
             path={getPathArray()}
             isHome={isHome()}
-        >
-            <DarkModeBtn slot="dark-mode-btn" />
-        </Header>
+        />
         <Menu
             client:load
-            name={profile?.name}
             linkedin={profile?.linkedin}
             github={profile?.github}
             email={profile?.email}
-        />
+        >
+            <DarkModeBtn slot="dark-mode-btn" />
+        </Menu>
         <main>
             <slot />
         </main>