Making progress converting template
This commit is contained in:
Mike Conrad
@ -51,7 +51,6 @@ const onScroll = () => {
|
||||
<div class="lg:hidden">
|
||||
<NavLinksMobile :links="links" />
|
||||
</div>
|
||||
<ColorModeSwitch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,53 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import { Bars2Icon } from "@heroicons/vue/20/solid";
|
||||
|
||||
const { links } = defineProps<{
|
||||
links: { name: string; to: string }[];
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<nuxt-ui-dropdown as="div" class="inline-block text-left z-10">
|
||||
<div>
|
||||
<nuxt-ui-dropdown-toggle class="border rounded-full px-2 py-2 text-zinc-500 border-zinc-500 hover:bg-white hover:text-zinc-900 hover:border-zinc-900 active:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-700 focus-visible:ring-opacity-75"
|
||||
>
|
||||
<span class="sr-only">Menu</span>
|
||||
<Bars2Icon class="h-4 w-4" aria-hidden="true" />
|
||||
</nuxt-ui-dropdown-toggle>
|
||||
</div>
|
||||
<v-btn icon @click="dialog = true">
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<transition
|
||||
enter-active-class="transition duration-100 ease-out"
|
||||
enter-from-class="transform scale-95 opacity-0"
|
||||
enter-to-class="transform scale-100 opacity-100"
|
||||
leave-active-class="transition duration-75 ease-in"
|
||||
leave-from-class="transform scale-100 opacity-100"
|
||||
leave-to-class="transform scale-95 opacity-0"
|
||||
<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
|
||||
<v-card>
|
||||
<v-toolbar dark color="primary">
|
||||
<v-btn icon @click="dialog = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
<v-toolbar-title>Menu</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
|
||||
<v-list>
|
||||
<v-list-item
|
||||
v-for="link in links"
|
||||
:key="link.to"
|
||||
@click="navigate(link.to)"
|
||||
>
|
||||
<nuxt-ui-dropdown-menu
|
||||
class="absolute right-0 mt-4 w-56 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-700 rounded-xl bg-white dark:bg-black shadow-lg ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div class="px-2 py-2 w-full">
|
||||
<nuxt-ui-dropdown-item
|
||||
v-for="(link, index) in links"
|
||||
:key="index"
|
||||
v-slot="{ close }"
|
||||
>
|
||||
<NuxtLink
|
||||
:class="[
|
||||
$route.path === link.to
|
||||
? 'bg-zinc-200 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-200'
|
||||
: 'text-zinc-900 dark:text-zinc-200',
|
||||
'group block w-full items-center rounded-xl text-sm',
|
||||
]"
|
||||
:to="link.to"
|
||||
>
|
||||
<span @click.native="close" class="truncate px-4 py-2 block">{{
|
||||
link.name
|
||||
}}</span>
|
||||
</NuxtLink>
|
||||
</nuxt-ui-dropdown-item>
|
||||
<v-list-item-title>{{ link.name }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</nuxt-ui-dropdown-menu>
|
||||
</transition>
|
||||
</nuxt-ui-dropdown>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
const props = defineProps<{ links: { name: string; to: string }[] }>()
|
||||
const dialog = ref(false)
|
||||
const router = useRouter()
|
||||
|
||||
function navigate(to: string) {
|
||||
dialog.value = false
|
||||
router.push(to)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
src="img/bg-glow.png"
|
||||
aria-hidden="true"
|
||||
class="w-[44rem]"
|
||||
format="webp"
|
||||
format="png"
|
||||
width="944"
|
||||
height="586"
|
||||
/>
|
||||
|
||||
@ -4,14 +4,10 @@ import tailwindcss from "@tailwindcss/vite";
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2024-11-01',
|
||||
devtools: { enabled: true },
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
vite: {
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
],
|
||||
// css: ['./assets/css/main.css'],
|
||||
tailwindcss: {
|
||||
cssPath: "./assets/css/main.css",
|
||||
},
|
||||
|
||||
future: {
|
||||
compatibilityVersion: 4
|
||||
},
|
||||
@ -23,6 +19,7 @@ export default defineNuxtConfig({
|
||||
'@nuxt/image',
|
||||
'@nuxt/scripts',
|
||||
'vuetify-nuxt-module',
|
||||
'@nuxtjs/tailwindcss',
|
||||
],
|
||||
|
||||
ssr: true,
|
||||
|
||||
@ -14,12 +14,14 @@
|
||||
"lint:fix": "eslint . --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@nuxt/eslint": "1.3.0",
|
||||
"@nuxt/fonts": "0.11.2",
|
||||
"@nuxt/icon": "1.12.0",
|
||||
"@nuxt/image": "1.10.0",
|
||||
"@nuxt/scripts": "0.11.6",
|
||||
"@tailwindcss/vite": "^4.1.5",
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@unhead/vue": "^2.0.3",
|
||||
"eslint": "^9.0.0",
|
||||
"nuxt": "^3.17.2",
|
||||
@ -30,10 +32,10 @@
|
||||
"devDependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@nuxt/fonts": "^0.11.1",
|
||||
"@nuxt/postcss8": "^1.1.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.3",
|
||||
"sass-embedded": "^1.86.3",
|
||||
"tailwindcss": "^4.1.5",
|
||||
"typescript": "^5.6.3",
|
||||
"vue-tsc": "^2.1.6",
|
||||
"vuetify-nuxt-module": "^0.18.6"
|
||||
|
||||
40
tailwind.config.js
Normal file
40
tailwind.config.js
Normal file
@ -0,0 +1,40 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,vue}',
|
||||
'./components/**/*.{js,ts,vue}',
|
||||
'./layouts/**/*.{js,ts,vue}',
|
||||
'./plugins/**/*.{js,ts,vue}',
|
||||
],
|
||||
theme: {
|
||||
fontFamily: {
|
||||
display: ["Cormorant Garamond", "ui-serif", "Georgia"],
|
||||
body: ["Poppins", "ui-sans-serif", "system-ui"],
|
||||
},
|
||||
extend: {
|
||||
maxWidth: {
|
||||
"8xl": "90rem",
|
||||
},
|
||||
colors: {
|
||||
"body-dark": "#121213",
|
||||
},
|
||||
opacity: {
|
||||
2: "0.02",
|
||||
},
|
||||
keyframes: {
|
||||
"pulse-once": {
|
||||
"0%, 100%": { transform: "scale(1)" },
|
||||
"50%": { transform: "scale(1.2)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"pulse-once": "pulse-once 0.5s cubic-bezier(0.4, 0, 0.6, 1) 1s 2",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user