Files
vhaudiquet.fr/app/components/HeaderCompact.vue
T
vhaudiquet bd5a8ff9fa
pipeline / build-and-push-images (push) Successful in 2m53s
Headers: better responsiveness
2025-11-30 23:46:40 +01:00

31 lines
1.1 KiB
Vue

<script setup lang="ts">
defineProps<{
title: string,
previousLink?: string
}>()
</script>
<template>
<div class="flex sm:flex-row flex-col xl:w-[1270px] lg:w-[924px] sm:mt-12 mt-4 m-auto">
<Icon
@click="previousLink == undefined ? $router.back() : $router.replace(previousLink)"
name="material-symbols:arrow-back"
class="w-8 h-8 mt-auto mb-auto ml-2 mr-10 hover:cursor-pointer sm:order-none order-1 sm:visible collapse" />
<h1 class="lg:max-w-3xl text-3xl text-left sg:ml-0 sg:mt-0 ml-2 mt-4 m-auto pr-5 sm:order-none order-3">
{{ title }}
</h1>
<div @click="$router.replace('/')"
class="flex hover:cursor-pointer w-fit sm:m-0 m-auto sm:order-none order-2">
<img class="rounded-full sm:w-14 sm:h-14 w-10 h-10 ml-5 mr-0 mt-auto mb-auto" src="~/assets/img/photo_web.JPG"/>
<div class="ml-5 mr-5 m-auto flex flex-col">
<h1 class="sm:text-xl text-base text-left">Valentin Haudiquet</h1>
<h4 class="sm:hidden sm:collapse xl:block xl:visible sm:text-base text-sm text-left">Software Engineer</h4>
</div>
</div>
</div>
</template>