Rendered generated pages menu links on the main page, cleaned up some code, and forced light mode for a consistent look

app/Http/Controllers/PageRender.php

@@ -7,7 +7,6 @@ use Illuminate\Http\Request;
 use Inertia\Inertia;
 
 use App\Helpers\PageBlocksHelper;
-use App\Helpers\PageSettingsHelper;
 
 use App\Models\Page;
 use App\Models\PageRevision;

resources/js/composables/useAppearance.ts

@@ -8,7 +8,7 @@ export function updateTheme(value: Appearance) {
     }
 
     if (value === 'system') {
-        const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+        const mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');
         const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
 
         document.documentElement.classList.toggle('dark', systemTheme === 'dark');

resources/js/pages/Backend/PageBuilder/Preview.vue

@@ -6,10 +6,6 @@
     import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
     import { on } from '@/Components/EventBus.vue';
 
-    import MainMenu from '@/Components/FrontPage/MenyComponent.vue';
-    import ExternalMainMenu from '@/Components/FrontPage/ExternalMenuComponent.vue';
-    import SmallHeader from '@/Components/FrontPage/SmallHeader.vue';
-
     import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';
 
     import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
@@ -37,139 +33,12 @@
         menuLinks:  { type: Object, default: () => ({}) }
     });
 
-    onMounted(() => {
-        // Check if the url has the parameter key scrollTo
-        if (urlParam('scrollTo')) {
-            // Enable scrolling on the body and html elements
-            document.body.style.overflow = 'auto';
-            document.documentElement.style.overflow = 'auto';
-            // Get the value of the parameter
-            const scrollTo = urlParam('scrollTo');
-
-            // Scroll to the section with the id that matches the value of the parameter
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: `#${scrollTo}`,
-                    autoKill: false,
-                },
-            });
-        }
-    });
-
     gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
 
     const useEventBus = ref(false);
     const showMainMenu = ref(false);
     const pageRef = ref();
     const page = usePage();
-    const smallHeader = ref(null);
-
-    const showErrorModal = ref(false);
-    const errorStatus = ref('');
-
-    const closeErrorModal = () => {
-        showErrorModal.value = false;
-    };
-
-    // Lytt etter errorModal event fra Laravel
-    window.addEventListener('errorModal', (event) => {
-        showErrorModal.value = true;
-        errorStatus.value = event.detail.status;
-    });
-
-    /** Menu button animations */
-    const menuButton = ref(null);
-
-    const handleMenuButtonOver = () => {
-        gsap.set(menuButton.value, {
-            borderRadius: '0.375rem',
-        });
-        gsap.to(menuButton.value, {
-            duration: 0.2,
-            scale: 1.1,
-        });
-    };
-
-    const handleMenuButtonOut = () => {
-        gsap.set(menuButton.value, {
-            borderRadius: '9999px',
-        });
-        gsap.to(menuButton.value, {
-            duration: 0.2,
-            scale: 1,
-        });
-    };
-
-    const clickMenuButton = () => {
-        showMainMenu.value = !showMainMenu.value;
-
-        if (showMainMenu.value) {
-            document.body.style.overflow = 'hidden';
-            document.documentElement.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'auto';
-            document.documentElement.style.overflow = 'auto';
-        }
-    };
-
-    /** Get a node value from json */
-
-    const extractMetaValue = (node, key) => {
-        let meta = JSON.parse(node.fs_meta);
-
-        return meta[key];
-    };
-
-    /**
-     * formatDate
-     * 
-     * Formats a date string to a Norwegian date format.
-     * 
-     * @param {
-     * } dateString 
-     */
-
-    const formatDate = (dateString) => {
-        const date = new Date(dateString);
-        const day = ('0' + date.getDate()).slice(-2);
-        const month = ('0' + (date.getMonth() + 1)).slice(-2);
-        const year = date.getFullYear();
-
-        return `${day}/${month}/${year}`;
-    };
-
-    /**
-     * dateString
-     * 
-     * Formats a date string to a Norwegian time format.
-     * @param {*} dateString 
-     */
-
-    const formatTime = (dateString) => {
-        const date = new Date(dateString);
-        return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
-    };
-
-    /** Get url parameters */
-
-    const urlParam = (paramKey) => {
-        const url = new URL(window.location.href);
-        return url.searchParams.get(paramKey);
-    };
-
-    // Denne funksjonen kalles fra lenker på siden for å
-    // Gi siden en myk fade ut effekt før den nye siden lastes
-    const loadLink = (url) => {
-        gsap.to(pageRef.value, {
-            duration: 1,
-            opacity: 0,
-            ease: 'power2.inOut',
-            onComplete: () => {
-                router.visit(url);
-            },
-        });
-    };
 
     const components = {
         HeroLogoTextRendered,
@@ -188,70 +57,6 @@
         PageFooterRendered
     };
 
-    /** Eventbus listeners */
-
-    on('linkClicked', (payload) => {
-        if (payload === 'om' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#content',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'arrangementer' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#events',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'nyheter' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#intro',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'sponsor' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#sponsors-intro',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'medlem' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#membership',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'medlemside' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('page-builder.index'));
-        } else if (payload === 'loggpaa' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('login'));
-        } else if (payload === 'registrer' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('register'));
-        }
-    });
-
-    on('eventBusActive', (payload) => {
-        useEventBus.value = payload;
-    });
-
 </script>
 
 <template>

resources/js/pages/Dashboard.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import AppLayout from '@/layouts/AppLayout.vue';
-import { type BreadcrumbItem } from '@/types';
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '../components/PlaceholderPattern.vue';
-
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Dashboard',
-        href: '/dashboard',
-    },
-];
-</script>
-
-<template>
-    <Head title="Dashboard" />
-
-    <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                    <PlaceholderPattern />
-                </div>
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                    <PlaceholderPattern />
-                </div>
-                <div class="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
-                    <PlaceholderPattern />
-                </div>
-            </div>
-            <div class="relative min-h-[100vh] flex-1 rounded-xl border border-sidebar-border/70 dark:border-sidebar-border md:min-h-min">
-                <PlaceholderPattern />
-            </div>
-        </div>
-    </AppLayout>
-</template>

resources/js/pages/Root.vue

@@ -6,10 +6,6 @@
     import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
     import { on } from '@/Components/EventBus.vue';
 
-    import MainMenu from '@/Components/FrontPage/MenyComponent.vue';
-    import ExternalMainMenu from '@/Components/FrontPage/ExternalMenuComponent.vue';
-    import SmallHeader from '@/Components/FrontPage/SmallHeader.vue';
-
     import HeroLogoTextRendered from '@/Components/Blocks/Heroes/HeroLogoTextRendered.vue';
 
     import FAQListRendered from '@/Components/Blocks/FAQ/FAQListRendered.vue';
@@ -37,81 +33,12 @@
         menuLinks:  { type: Object, default: () => ({}) }
     });
 
-    onMounted(() => {
-        // Check if the url has the parameter key scrollTo
-        if (urlParam('scrollTo')) {
-            // Enable scrolling on the body and html elements
-            document.body.style.overflow = 'auto';
-            document.documentElement.style.overflow = 'auto';
-            // Get the value of the parameter
-            const scrollTo = urlParam('scrollTo');
-
-            // Scroll to the section with the id that matches the value of the parameter
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: `#${scrollTo}`,
-                    autoKill: false,
-                },
-            });
-        }
-    });
-
     gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
 
     const useEventBus = ref(false);
     const showMainMenu = ref(false);
-    const pageRef = ref();
     const page = usePage();
-    const smallHeader = ref(null);
+    const pageRef = ref();
-
-    const showErrorModal = ref(false);
-    const errorStatus = ref('');
-
-    const closeErrorModal = () => {
-        showErrorModal.value = false;
-    };
-
-    // Lytt etter errorModal event fra Laravel
-    window.addEventListener('errorModal', (event) => {
-        showErrorModal.value = true;
-        errorStatus.value = event.detail.status;
-    });
-
-    /** Menu button animations */
-    const menuButton = ref(null);
-
-    const handleMenuButtonOver = () => {
-        gsap.set(menuButton.value, {
-            borderRadius: '0.375rem',
-        });
-        gsap.to(menuButton.value, {
-            duration: 0.2,
-            scale: 1.1,
-        });
-    };
-
-    const handleMenuButtonOut = () => {
-        gsap.set(menuButton.value, {
-            borderRadius: '9999px',
-        });
-        gsap.to(menuButton.value, {
-            duration: 0.2,
-            scale: 1,
-        });
-    };
-
-    const clickMenuButton = () => {
-        showMainMenu.value = !showMainMenu.value;
-
-        if (showMainMenu.value) {
-            document.body.style.overflow = 'hidden';
-            document.documentElement.style.overflow = 'hidden';
-        } else {
-            document.body.style.overflow = 'auto';
-            document.documentElement.style.overflow = 'auto';
-        }
-    };
 
     /** Get a node value from json */
 
@@ -121,56 +48,6 @@
         return meta[key];
     };
 
-    /**
-     * formatDate
-     * 
-     * Formats a date string to a Norwegian date format.
-     * 
-     * @param {
-     * } dateString 
-     */
-
-    const formatDate = (dateString) => {
-        const date = new Date(dateString);
-        const day = ('0' + date.getDate()).slice(-2);
-        const month = ('0' + (date.getMonth() + 1)).slice(-2);
-        const year = date.getFullYear();
-
-        return `${day}/${month}/${year}`;
-    };
-
-    /**
-     * dateString
-     * 
-     * Formats a date string to a Norwegian time format.
-     * @param {*} dateString 
-     */
-
-    const formatTime = (dateString) => {
-        const date = new Date(dateString);
-        return date.toLocaleTimeString('nb-NO', { hour: '2-digit', minute: '2-digit' });
-    };
-
-    /** Get url parameters */
-
-    const urlParam = (paramKey) => {
-        const url = new URL(window.location.href);
-        return url.searchParams.get(paramKey);
-    };
-
-    // Denne funksjonen kalles fra lenker på siden for å
-    // Gi siden en myk fade ut effekt før den nye siden lastes
-    const loadLink = (url) => {
-        gsap.to(pageRef.value, {
-            duration: 1,
-            opacity: 0,
-            ease: 'power2.inOut',
-            onComplete: () => {
-                router.visit(url);
-            },
-        });
-    };
-
     const components = {
         HeroLogoTextRendered,
 
@@ -188,113 +65,12 @@
         PageFooterRendered
     };
 
-    /** Eventbus listeners */
-
-    on('linkClicked', (payload) => {
-        if (payload === 'om' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#content',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'arrangementer' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#events',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'nyheter' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#intro',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'sponsor' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#sponsors-intro',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'medlem' && useEventBus.value) {
-            clickMenuButton();
-            gsap.to(window, {
-                duration: 1,
-                scrollTo: {
-                    y: '#membership',
-                    autoKill: false,
-                },
-            });
-        } else if (payload === 'medlemside' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('page-builder.index'));
-        } else if (payload === 'loggpaa' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('login'));
-        } else if (payload === 'registrer' && useEventBus.value) {
-            clickMenuButton();
-            loadLink(route('register'));
-        }
-    });
-
-    on('eventBusActive', (payload) => {
-        useEventBus.value = payload;
-    });
-
 </script>
 
 <template>
-    <Head>
+    <Head />
-        <title>{{ revision.title }}</title>
-        <meta name="description" :content="page.props.pageSettings['site_description']" />
-        <meta name="keywords" :content="page.props.pageSettings['site_keywords']" />
-        <meta name="author" content="Arctic Software PolarPress" />
-        <meta name="robots" content="index, follow" />
-        <meta name="og:title" :content="`Forsiden - ${page.props.pageSettings['site_title']}`" />
-        <meta name="og:description" :content="page.props.pageSettings['site_description']" />
-        <meta name="og:image" content="/img/illustration-full.png" />
-        <meta name="og:url" :content="page.props.baseUrl" />
-        <meta name="og:site_name" :content="page.props.siteName" />
-        <meta name="og:type" content="website" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="og:locale" content="nb_NO" />
-        <meta name="og:locale:alternate" content="en_US" />
-        <meta name="og:imagevisiblity" content="all" />
-    </Head>
 
     <div ref="pageRef" class="min-h-screen w-full bg-black">
-        <template v-if="revision.page.main"> <!-- Show Main menu if the current page is the front page (main page) -->
-            <MainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" :menuLinks="menuLinks" />
-        </template>
-        <template v-else> <!-- Show the external main menu, if the current page is NOT the front page (main page)  -->
-            <ExternalMainMenu v-if="showMainMenu" :active="showMainMenu" :pageSettings="page.props.pageSettings" class="z-40" />
-        </template>
-        <SmallHeader />
-
-        <!-- Hovedmeny knapp -->
-        <div class="fixed top-0 right-0 p-4 z-50">
-            <button ref="menuButton" @click="clickMenuButton" @mouseover="handleMenuButtonOver" @mouseout="handleMenuButtonOut" class="p-2 text-white rounded-full shadow-md shadow-black" :class="{'bg-sky-600': showMainMenu, 'bg-green-700': !showMainMenu }">
-                <svg v-if="showMainMenu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-
-                <svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                </svg>
-            </button>
-        </div>
-
         <!-- Komponentrendring -->
         <component
             v-for="block in revision.content"

resources/js/pages/Welcome.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
     import { Head, Link } from '@inertiajs/vue3';
     import PageLogo from '@/Components/ArcticFooterLogo.vue';
+
+    const { menuLinks } = defineProps({
+        menuLinks:  { type: Object, default: () => ({}) }
+    });
 </script>
 
 <template>
@@ -8,7 +12,18 @@ import PageLogo from '@/Components/ArcticFooterLogo.vue';
     </Head>
     <div class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] dark:bg-[#0a0a0a] lg:justify-center lg:p-8">
         <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
-            <nav class="flex items-center justify-end gap-4">
+            <nav class="flex justify-between items-center">
+                <div class="flex justify-start align-middle gap-4">
+                    <Link 
+                        v-for="(link, index) in menuLinks"
+                        :key="index"
+                        :href="route('page.view', link.slug)"
+                        class="text-gray-700 dark:text-gray-300 underline hover:no-underline text-sm"
+                    >
+                        {{ link.title }}
+                    </Link>
+                </div>
+                <div class="flex items-center justify-end gap-4">
                     <Link
                         v-if="$page.props.auth.user"
                         :href="route('page-builder.index')"
@@ -30,6 +45,7 @@ import PageLogo from '@/Components/ArcticFooterLogo.vue';
                             Registrer konto
                         </Link>
                     </template>
+                </div>
             </nav>
         </header>
         <div class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow">

routes/web.php

@@ -3,11 +3,15 @@
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
+use App\Helpers\PageBlocksHelper;
+
 use App\Http\Controllers\Backend\PageBuilder;
 use App\Http\Controllers\PageRender;
 
 Route::get('/', function () {
-    return Inertia::render('Welcome');
+    return Inertia::render('Welcome', [
+        'menuLinks' => PageBlocksHelper::mainMenuLinks()
+    ]);
 })->name('forsiden');
 
 Route::get('/privacypolicy', function () {