im done for rn gn

app/components/header.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineProps({
+    userProfile: {
+        type: Object,
+        default: null
+    },
+    activeTab: {
+        type: String,
+        default: 'welcome'
+    }
+})
+
+const emit = defineEmits(['logout', 'navigate'])
+</script>
+
+<template>
+    <aside class="settings-sidebar">
+        <div class="sidebar-header archivo-black">
+            MOD PORTAL
+        </div>
+
+        <div v-if="userProfile" class="user-badge">
+            <span class="user-name">{{ userProfile.username || userProfile.firstName }}</span>
+            <span class="user-email">{{ userProfile.email }}</span>
+        </div>
+
+        <nav class="sidebar-menu">
+            <button type="button" class="nav-item" :class="{ 'active-nav': activeTab === 'welcome' }"
+                @click="emit('navigate', '/')">
+                <span>Welcome</span>
+            </button>
+            <button type="button" class="nav-item logout-btn" @click="emit('logout')">
+                <span>Sign Out</span>
+            </button>
+        </nav>
+    </aside>
+</template>