Последняя версия с сервера прошлого разработчика

resources/js/Shared/Layout.vue

@@ -0,0 +1,149 @@
+<template>
+  <header-bar v-if="$page.props.auth.user" />
+
+  <div class="min-h-screen-header flex overflow-hidden">
+    <sidebar v-if="$page.props.auth.user" />
+
+    <div class="flex-1 flex flex-col overflow-hidden contain">
+      <div class="bg-indigo-300 flex-1 flex items-stretch overflow-hidden">
+        <!-- pb-10 -->
+        <main class="flex-1 overflow-y-auto relative">
+          <button v-if="$page.props.sidebar_layout" class="default text-center right-2 top-3 absolute z-40 flex lg:hidden items-center text-white text-xs"
+                  @click="openSidebar"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24"
+                 height="24" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor"
+                 stroke-width="2" stroke-linecap="round"
+                 stroke-linejoin="round" class="feather feather-menu"
+            ><line x1="3" y1="12"
+                   x2="21" y2="12"
+            ></line><line x1="3" y1="6"
+                          x2="21" y2="6"
+            ></line><line x1="3" y1="18"
+                          x2="21" y2="18"
+            ></line></svg>
+            <span class="ml-1">Лидеры</span>
+          </button>
+
+          <section class="min-w-0 flex-1 h-full flex flex-col overflow-hidden lg:order-last">
+            <flash-messages />
+            <slot />
+
+            <footer :class="{'px-2 md:px-6 2xl:px-28': $page.props.sidebar_layout}" class="bg-indigo-300 mt-auto">
+              <div class="container mx-auto p-2 text-sm text-gray-light">
+                <ul class="flex justify-center flex-wrap gap-3 text-xs px-3">
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/company.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >О компании</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/offer_authors.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Оферта для авторов</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/offer_paid_subscription.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Оферта на платную подписку</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/security_policy.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Политика безопасности</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/privacy_policy.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Политика конфиденциальности</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/terms_use.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Пользовательское соглашение</a>
+                  </li>
+                  <li>
+                    <a target="_blank" class="hover:underline"
+                       href="/docs/personal_data.pdf"
+                       rel="noopener noreferrer nofollow"
+                    >Согласие на обработку персональных данных</a>
+                  </li>
+                </ul>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <section v-if="$page.props.sidebar_layout" ref="userSidebar"
+                 class="lg:mt-16  lg:w-[19rem] xl:w-[26rem] 2xl:w-[32rem] overflow-y-auto lg:block lg:pr-5 2xl:pr-28 transition-transform z-50 absolute top-0 right-0 transform-gpu translate-x-full lg:relative lg:transform-none"
+        >
+          <sidebar-secondary />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FlashMessages from '@/Shared/Misc/FlashMessages.vue'
+import HeaderBar from '@/Shared/LayoutParts/HeaderBar.vue'
+import Sidebar from '@/Shared/LayoutParts/Sidebar.vue'
+import SidebarSecondary from '@/Shared/LayoutParts/SidebarSecondary.vue'
+import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
+
+
+export default {
+    components: {
+        FlashMessages,
+        HeaderBar,
+        Sidebar,
+        SidebarSecondary,
+    },
+    setup(){
+
+        const userSidebar = ref(null)
+
+
+        let openSidebar = () => {
+            if (window.matchMedia('(max-width: 1024px)').matches) {
+                userSidebar.value.classList.remove('translate-x-full')
+                userSidebar.value.classList.add('translate-x-0')
+                userSidebar.value.classList.add('shadow-classic')
+            }
+        }
+
+        let closeSidebar = () => {
+            if (window.matchMedia('(max-width: 1024px)').matches) {
+                userSidebar.value.classList.add('translate-x-full')
+                userSidebar.value.classList.remove('translate-x-0')
+                userSidebar.value.classList.remove('shadow-classic')
+            }
+        }
+
+        if (window.matchMedia('(max-width: 1024px)').matches) {
+            onClickOutside(userSidebar, () => {
+                closeSidebar()
+            })
+        }
+        return {
+            openSidebar,
+            closeSidebar,
+            userSidebar
+        }
+    },
+}
+</script>
+
+<style>
+
+.prose-content a{
+    text-decoration: underline;
+}
+</style>