build: initialize RetroHub with Laravel, Inertia, Vue, and Horizon

2026-08-10 13:45:18 +02:00
commit 717db65139
218 changed files with 28356 additions and 0 deletions
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import NavLink from './NavLink.vue';
+
+interface Props {
+    user: {
+        name: string;
+        email: string;
+    };
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <nav class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex">
+                    <div class="shrink-0 flex items-center">
+                        <Link :href="route('dashboard')">
+                            <h1 class="text-xl font-bold text-indigo-600">RetroHub</h1>
+                        </Link>
+                    </div>
+
+                    <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
+                        <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                            Dashboard
+                        </NavLink>
+                        <NavLink :href="route('consoles.index')" :active="route().current('consoles.*')">
+                            Consoles
+                        </NavLink>
+                        <NavLink :href="route('upload.index')" :active="route().current('upload.*')">
+                            Upload
+                        </NavLink>
+                        <NavLink :href="route('scraper.index')" :active="route().current('scraper.*')">
+                            Scraper
+                        </NavLink>
+                    </div>
+                </div>
+
+                <div class="hidden sm:flex sm:items-center sm:ms-6">
+                    <div class="ms-3 relative">
+                        <div class="flex items-center gap-3">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">{{ user.name }}</span>
+                            <Link
+                                :href="route('logout')"
+                                method="post"
+                                as="button"
+                                class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                            >
+                                Log out
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="-me-2 flex items-center sm:hidden">
+                    <button
+                        @click="showingNavigationDropdown = !showingNavigationDropdown"
+                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"
+                    >
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path v-if="!showingNavigationDropdown" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div :class="{ block: showingNavigationDropdown, hidden: !showingNavigationDropdown }" class="sm:hidden">
+            <div class="pt-2 pb-3 space-y-1">
+                <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                    Dashboard
+                </ResponsiveNavLink>
+                <ResponsiveNavLink :href="route('consoles.index')" :active="route().current('consoles.*')">
+                    Consoles
+                </ResponsiveNavLink>
+                <ResponsiveNavLink :href="route('upload.index')" :active="route().current('upload.*')">
+                    Upload
+                </ResponsiveNavLink>
+                <ResponsiveNavLink :href="route('scraper.index')" :active="route().current('scraper.*')">
+                    Scraper
+                </ResponsiveNavLink>
+            </div>
+
+            <div class="border-t border-gray-200 dark:border-gray-600 pt-4 pb-1">
+                <div class="px-4">
+                    <div class="font-medium text-base text-gray-800 dark:text-gray-200">{{ user.name }}</div>
+                    <div class="font-medium text-sm text-gray-500">{{ user.email }}</div>
+                </div>
+
+                <div class="mt-3 space-y-1">
+                    <ResponsiveNavLink :href="route('profile.edit')">
+                        Profile
+                    </ResponsiveNavLink>
+                    <ResponsiveNavLink :href="route('logout')" method="post" as="button">
+                        Log Out
+                    </ResponsiveNavLink>
+                </div>
+            </div>
+        </div>
+    </nav>
+</template>
+
+<script lang="ts">
+import ResponsiveNavLink from './ResponsiveNavLink.vue';
+
+export default {
+    components: {
+        ResponsiveNavLink,
+    },
+    data() {
+        return {
+            showingNavigationDropdown: false,
+        };
+    },
+};
+</script>