wm-fontis-tibi-2023/frontend/src/App.svelte

<script lang="ts">
    import Footer from "./lib/components/Footer.svelte"
    import Header from "./lib/components/Menu/Header.svelte"
    import Menu from "./lib/components/Menu/Menu.svelte"
    import NotFound from "./lib/components/NotFound.svelte"
    import Rows from "./lib/components/Pagebuilder/Rows.svelte"
    import { location, navigation, pages, serviceNavigation, rerender } from "./lib/store"
    import { Route, Router } from "svelte-routing"
    import { loadPages } from "./lib/functions/getPages"
    import { loadNavigation } from "./lib/functions/loadNavigation"
    export let url = ""

    if (url) {
        let l = url.split("?")
        $location = {
            path: l[0],
            search: l.length > 1 ? l[1] : "",
            hash: "",
            categoryPath: l[0].replace(/\/[^_\/]+_[^\/]+$/, ""),
            push: false,
            pop: false,
        }
    }

    async function getPages() {
        let pagesArray = await loadPages()
        let pagesRes: Pages = {}

        pagesArray.forEach((e) => {
            pagesRes[e.path] = e
        })
        $pages = pagesRes
        console.log(pagesRes)
    }

    async function getNavigation() {
        let nav: Navigation[] = await loadNavigation()
        console.log(nav)
        $navigation = nav[0]
        $serviceNavigation = nav[1]
    }

    getNavigation()
    getPages()

    let activeMenu = false
    $: {
        if (activeMenu) {
            document.body.classList.add("overflow")
        } else {
            document.body.classList.remove("overflow")
        }
    }
</script>

<main class="">
    <Header bind:active="{activeMenu}" />

    <div class="content-container" id="siteContainer" data-url="{url}">
        <Router url="{url}">
            <Route path="/">
                <Rows path="/" homepage="{true}" />
            </Route>
            <Route path="/*path" let:params>
                {#key $rerender}
                    <Rows path="/{params?.path}" homepage="{false}" />
                {/key}
            </Route>
            <Route>
                <NotFound />
            </Route>
        </Router>
    </div>
    <Footer />
</main>

<Menu bind:active="{activeMenu}" />

<style lang="less" global>
    @import "./lib/assets/css/main.less";
    @import "./lib/assets/css/base.less";
    @import "swiper/swiper.less";
    @import "swiper/modules/effect-fade/effect-fade.less";
    @import "swiper/modules/navigation/navigation.less";
    @import "swiper/modules/pagination/pagination.less";

    .swiper-button-prev,
    .swiper-button-next {
        color: @font-color;
        height: 70px;
        width: 70px;
        bottom: 0px !important;
        top: initial !important;
        transform: scale(0.5);
        transform-origin: bottom !important;
    }

    .swiper-button-prev {
        right: 18%;
        left: initial !important;
    }

    .swiper-button-next {
        right: 3%;
        transform-origin: right;
    }

    @media @tablet {
        .swiper-button-prev,
        .swiper-button-next {
            bottom: initial !important;
            top: 100px !important;
            transform: scale(0.8);
            transform-origin: center !important;
        }
        .swiper-button-prev {
            left: 0% !important;
            right: initial !important;
            left: initial !important;
        }
        .swiper-button-next {
            right: 0% !important;
            transform-origin: right;
        }
    }

    @media @desktop {
        .swiper-button-prev,
        .swiper-button-next {
            top: 110px !important;
            transform: scale(1);
        }
    }
    h1,
    h2 {
        font-family: "Libre Caslon Text", serif;
    }

    .overflow {
        overflow: hidden !important;
    }
    main {
        min-height: 100vh;
        background-color: @bg-color;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;

        .content-container {
            flex: 1;
        }
    }

    html,
    body {
        @media @mobile {
            font-size: @bodyfontsize;
            line-height: 1.4;
        }
        @media @tablet {
            font-size: @bodyfontsize_desktop;
            line-height: 1.6;
        }
    }
    @font-face {
        font-display: swap;
        font-family: "Libre Franklin";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/libre-franklin-v13-latin-regular.woff2") format("woff2");
    }

    @font-face {
        font-display: swap;
        font-family: "Libre Caslon Text";
        font-style: normal;
        font-weight: 400;
        src: url("./lib/assets/fonts/LibreCaslonText-Regular.woff2") format("woff2");
    }
</style>