first
This commit is contained in:
130
inspond-nuxt-safekiso/base/layouts/SideNavbarAndFooter.vue
Normal file
130
inspond-nuxt-safekiso/base/layouts/SideNavbarAndFooter.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!--
|
||||
This example requires updating your template:
|
||||
|
||||
```
|
||||
<html class="h-full bg-gray-100">
|
||||
<body class="h-full">
|
||||
```
|
||||
-->
|
||||
<div>
|
||||
<TransitionRoot as="template" :show="sidebarOpen">
|
||||
<Dialog
|
||||
as="div"
|
||||
class="relative z-40 md:hidden bg-white"
|
||||
@close="sidebarOpen = false"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 flex z-40">
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enter-from="-translate-x-full"
|
||||
enter-to="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leave-from="translate-x-0"
|
||||
leave-to="-translate-x-full"
|
||||
>
|
||||
<DialogPanel
|
||||
class="relative flex-1 flex flex-col max-w-xs w-full"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="ease-in-out duration-300"
|
||||
enter-from="opacity-0"
|
||||
enter-to="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
@click="sidebarOpen = false"
|
||||
>
|
||||
<span class="sr-only"
|
||||
>Close sidebar</span
|
||||
>
|
||||
<XMarkIcon
|
||||
class="h-6 w-6 text-white"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<BaseNavSideBar1 :on-move="onMoveHandler" />
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 w-14" aria-hidden="true">
|
||||
<!-- Force sidebar to shrink to fit close icon -->
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</TransitionRoot>
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
<!-- Sidebar component, swap this element with another sidebar if you like -->
|
||||
<div class="flex-1 flex flex-col min-h-0 bg-white">
|
||||
<BaseNavSideBar1 :on-move="onMoveHandler" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:pl-64 flex flex-col flex-1">
|
||||
<div
|
||||
class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-gray-100"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<main class="flex-1">
|
||||
<!-- Replace with your content -->
|
||||
<div class="mt-5 sm:px-3 lg:px-5"><slot /></div>
|
||||
<!-- /End replace -->
|
||||
</main>
|
||||
<BaseModal1 />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
TransitionChild,
|
||||
TransitionRoot,
|
||||
} from '@headlessui/vue';
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
class: 'h-full bg-gray-50',
|
||||
},
|
||||
bodyAttrs: {
|
||||
class: 'h-full',
|
||||
},
|
||||
});
|
||||
|
||||
const sidebarOpen = ref(false);
|
||||
|
||||
function onMoveHandler() {
|
||||
sidebarOpen.value = false;
|
||||
}
|
||||
</script>
|
||||
14
inspond-nuxt-safekiso/base/layouts/TopNavbarAndFooter.vue
Normal file
14
inspond-nuxt-safekiso/base/layouts/TopNavbarAndFooter.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<TopNavBar1 class="mb-3" />
|
||||
<slot class="bg-gray-50 mt-5 sm:px-3 lg:px-5" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
<BaseModal1 />
|
||||
<Footer1 class="mt-3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavBar1 from '../components/TopNavBar1.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<TopNavBar1 class="mb-3" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
|
||||
<slot class="bg-gray-50 mt-5 sm:px-3 lg:px-5" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
<BaseModal1 />
|
||||
<Footer1 class="mt-3" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavBar1 from '../components/TopNavBar1.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<body class="flex flex-col min-h-screen">
|
||||
<header>
|
||||
<TopNavBar1 class="mb-3" />
|
||||
</header>
|
||||
<main>
|
||||
<slot class="bg-gray-50 mt-5 sm:px-3 lg:px-5" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
<BaseModal1 />
|
||||
<Footer1 class="mt-3" />
|
||||
</main>
|
||||
|
||||
<footer class="sticky top-[100vh]"><StickyFooter /></footer>
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavBar1 from '../components/TopNavBar1.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<TopNavBar1 class="mb-3" />
|
||||
<slot class="bg-gray-50 mt-5 sm:px-3 lg:px-5" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
<BaseModal1 />
|
||||
<Footer1 class="mt-3" />
|
||||
<div class="mt-3 bg-yellow-50"></div>
|
||||
<StickyFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavBar1 from '../components/TopNavBar1.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="flex flex-col min-h-screen">
|
||||
<TopNavBar1 class="mb-3" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
|
||||
<slot class="bg-gray-50 mt-5 sm:px-3 lg:px-5" />
|
||||
<!-- It is cushion -->
|
||||
<div class="flex-grow justify-center"></div>
|
||||
<BaseModal1 />
|
||||
<Footer1 class="mt-3" />
|
||||
<div class="mt-3 bg-yellow-50"></div>
|
||||
<StickyFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TopNavBar1 from '../components/TopNavBar1.vue';
|
||||
</script>
|
||||
8
inspond-nuxt-safekiso/base/layouts/center.vue
Normal file
8
inspond-nuxt-safekiso/base/layouts/center.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div class="items-center justify-center h-screen">
|
||||
<slot />
|
||||
<BaseModal1 />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
27
inspond-nuxt-safekiso/base/layouts/default.vue
Normal file
27
inspond-nuxt-safekiso/base/layouts/default.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<NuxtLayout :name="layout">
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { _siteConfig } from '@/config/site';
|
||||
const layout = _siteConfig.siteLayout;
|
||||
|
||||
/*
|
||||
let modalOpendedFlag = false;
|
||||
|
||||
if (modalOpendedFlag == false) {
|
||||
_crossCtl.openModal(
|
||||
'info',
|
||||
'베타 서비스 종료',
|
||||
'지금은 정식 서비스 오픈 준비중입니다. 2023년 5월 10일까지의 베타 서비스를 마치고 2023년 6월중에 정식 서비스 오픈을 위해 지금은 서비스 준비중입니다. 베타 서비스 기간에 생성된 계정이나 API 키는 현재 사용하실 수 없습니다. 확인 버튼을 누르시면 보다 상세한 안내 페이지로 이동합니다.',
|
||||
['확인'],
|
||||
(btnIdx) => {
|
||||
modalOpendedFlag = true;
|
||||
navigateTo('/doc/intermissions');
|
||||
}
|
||||
);
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
7
inspond-nuxt-safekiso/base/layouts/raw.vue
Normal file
7
inspond-nuxt-safekiso/base/layouts/raw.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
Reference in New Issue
Block a user