- added OasisContact.vue

- Mobile responsivenes

resources/js/Oasis/Homepage/Components/OasisNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-    <nav class="oasis-navigation navigation">
+    <nav class="oasis-navigation navigation" :class="{'white': isWhite}">
         <div class="container">
             <router-link :to="{name: 'Homepage'}" tag="div" class="logo">
                 <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
@@ -7,10 +7,19 @@
             </router-link>
             <ul class="links">
                 <li v-for="(item, i) in navigation" :key="i">
-                    <a :href="`#${item.href}`">{{ item.title }}</a>
+                    <a v-if="$router.currentRoute.name !== 'DynamicPage'" @click="scrollToSection(item.href)">{{ item.title }}</a>
+
+                    <router-link v-if="$router.currentRoute.name === 'DynamicPage'" :to="{path: '/', hash: `#${item.href}`}">
+                        {{ item.title }}
+                    </router-link>
                 </li>
             </ul>
-            <div class="log-in">
+            <div v-if="config.isAuthenticated" class="log-in">
+                <router-link :to="{name: 'Files'}" class="base-button theme-color">
+                    {{ $t('go_to_files') }}
+                </router-link>
+            </div>
+            <div v-if="! config.isAuthenticated" class="log-in">
                 <router-link :to="{name: 'SignIn'}" class="base-button theme-color">
                     Prihlásit se
                 </router-link>
@@ -34,26 +43,53 @@
         },
         data() {
             return {
+                isWhite: false,
                 navigation: [
-                    {
-                        title: 'O Nás',
-                        href: 'o-nas',
-                    },
-                    /*{
-                        title: 'Kariéra',
-                        href: 'kariera',
-                    },*/
                     {
                         title: 'Ceník',
                         href: 'cenik',
                     },
                     {
-                        title: 'Podpora',
-                        href: 'podpora',
+                        title: 'O Nás',
+                        href: 'o-nas',
+                    },
+                    {
+                        title: 'Kontakt a Podpora',
+                        href: 'kontakt-a-podpora',
                     },
                 ],
             }
         },
+        methods: {
+            scrollToSection(anchor) {
+                var el = document.getElementById('vuefilemanager')
+
+                const section = document.getElementById(anchor),
+                    position = section.offsetTop - 100;
+
+                el.scrollTo({top: position, behavior: 'smooth'});
+            }
+        },
+        created() {
+
+            // Perform scroll to loaded location
+            if (document.location.hash) {
+                setTimeout(() => {
+                    this.scrollToSection(document.location.hash.substring(1))
+                }, 300)
+            }
+
+            // Set white bar after user scrolling down
+            var el = document.getElementById('vuefilemanager')
+
+            el.addEventListener('scroll', () => {
+                if (el.scrollTop > 35 ) {
+                    this.isWhite = true
+                } else {
+                    this.isWhite = false
+                }
+            })
+        }
     }
 </script>
 
@@ -61,4 +97,18 @@
     @import '@assets/oasis/_components';
     @import '@assets/oasis/_homepage';
     @import '@assets/oasis/_responsive';
+
+    @media only screen and (max-width: 960px) {
+        .oasis-navigation.navigation {
+            margin-top: 10px;
+
+            .base-button {
+                padding: 12px 24px;
+            }
+        }
+
+        .links {
+            display: none;
+        }
+    }
 </style>