site/resources/js/Shared/Layout.vue

<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>