Skip to content

Commit fb4d65e

Browse files
Tevin79Tevin79
committed
feat: edt, header
1 parent 1b62a00 commit fb4d65e

File tree

9 files changed

+97
-59
lines changed

9 files changed

+97
-59
lines changed

‎refact/app.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
22
<NuxtLayout>
3-
<NuxtPage />
3+
<NuxtPage class="h-screen" />
44
</NuxtLayout>
55
</template>

‎refact/assets/css/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "tailwindcss";
2+
3+
body {
4+
background-color: rgba(75, 85, 99, 1);
5+
}

‎refact/components/Header.vue‎

Lines changed: 5 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,10 @@
11
<template>
2-
<Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
3-
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
4-
<div class="relative flex h-16 items-center justify-between">
5-
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
6-
<!-- Mobile menu button-->
7-
<DisclosureButton
8-
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:ring-2 focus:ring-white focus:outline-hidden focus:ring-inset">
9-
<span class="absolute -inset-0.5" />
10-
<span class="sr-only">Open main menu</span>
11-
<Bars3Icon v-if="!open" class="block size-6" aria-hidden="true" />
12-
<XMarkIcon v-else class="block size-6" aria-hidden="true" />
13-
</DisclosureButton>
14-
</div>
15-
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
16-
<div class="flex shrink-0 items-center">
17-
<img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
18-
alt="Your Company" />
19-
</div>
20-
<div class="hidden sm:ml-6 sm:block">
21-
<div class="flex space-x-4">
22-
<a v-for="item in navigation" :key="item.name" :href="item.href"
23-
:class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']"
24-
:aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
25-
</div>
26-
</div>
27-
</div>
28-
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
29-
<button type="button"
30-
class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
31-
<span class="absolute -inset-1.5" />
32-
<span class="sr-only">View notifications</span>
33-
<BellIcon class="size-6" aria-hidden="true" />
34-
</button>
35-
</div>
36-
</div>
37-
</div>
38-
39-
<DisclosurePanel class="sm:hidden">
40-
<div class="space-y-1 px-2 pt-2 pb-3">
41-
<DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href"
42-
:class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']"
43-
:aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
44-
</div>
45-
</DisclosurePanel>
46-
</Disclosure>
2+
<div class="flex flex-row sticky top-0 w-full space-x-10 bg-gray-700">
3+
<MyButton toTag="/" text="Home" />
4+
<MyButton toTag="/edt/1" text="L3 info" />
5+
<MyButton toTag="/edt/2" text="M1 info" />
6+
</div>
477
</template>
488

499
<script setup>
50-
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
51-
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
52-
53-
const navigation = [
54-
{ name: 'Dashboard', href: '#', current: true },
55-
{ name: 'Team', href: '#', current: false },
56-
{ name: 'Projects', href: '#', current: false },
57-
{ name: 'Calendar', href: '#', current: false },
58-
]
5910
</script>

‎refact/components/MyButton.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<NuxtLink :to="toTag"
3+
class="mybutton p-2 m-2 rounded-lg border-2 border-black text-gray-100 bg-gray-700 hover:font-bold"
4+
activeClass="bg-gray-800">{{
5+
text }}</NuxtLink>
6+
</template>
7+
<script>
8+
export default {
9+
props: {
10+
toTag: String,
11+
text: String,
12+
},
13+
};
14+
</script>

‎refact/nuxt.config.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
// https://nuxt.com/docs/api/configuration/nuxt-config
2+
import tailwindcss from "@tailwindcss/vite";
3+
24
export default defineNuxtConfig({
35
compatibilityDate: '2024-11-01',
46
devtools: { enabled: true },
5-
modules: ['@nuxt/ui']
6-
})
7+
modules: ['@nuxt/ui'],
8+
ssr: false,
9+
css: ['~/assets/css/main.css'],
10+
vite: {
11+
plugins: [
12+
tailwindcss(),
13+
],
14+
},
15+
})

‎refact/package-lock.json‎

Lines changed: 36 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎refact/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,15 @@
1010
"postinstall": "nuxt prepare"
1111
},
1212
"dependencies": {
13+
"@headlessui/vue": "^1.7.23",
14+
"@heroicons/vue": "^2.2.0",
1315
"@nuxt/ui": "^3.0.2",
16+
"flyonui": "^2.1.0",
1417
"nuxt": "^3.16.2",
15-
"typescript": "^5.8.3",
1618
"vue": "^3.5.13",
1719
"vue-router": "^4.5.0"
20+
},
21+
"devDependencies": {
22+
"typescript": "^5.8.3"
1823
}
1924
}

‎refact/pages/.index.vue.swp‎

12 KB
Binary file not shown.

‎refact/pages/edt/[id].vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<iframe :src="src" style="border:solid 1px #777" width="100%" height="100%" frameborder="0"
4+
scrolling="yes"></iframe>
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
const route = useRoute();
10+
let src: String = "";
11+
12+
if (route.params.id == 1) {
13+
src = "https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FParis&bgcolor=%23ffffff&showTitle=0&showPrint=0&mode=WEEK&src=N291cjY2a2I5Z3BsZ3Jkb2l0anFiOHEyN3NxdmwwcTFAaW1wb3J0LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23E67C73";
14+
} else if (route.params.id == 2) {
15+
src = "https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FParis&bgcolor=%23ffffff&showTitle=0&showPrint=0&mode=WEEK&src=NmhtMTMzMjZ2azRlczhiMGEwOTExNmNsMWxtbG9qYWNAaW1wb3J0LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%233F51B5";
16+
}
17+
// When accessing /posts/1, route.params.id will be 1
18+
console.log(route.params.id)
19+
</script>

0 commit comments

Comments
 (0)