From df810d50be5f8b135bb7b5f94cffd1f0b5e67f5a Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Sun, 7 Jun 2026 20:02:03 +0200
Subject: [PATCH] feat: create reusable UI components

- Add Header component with navigation and auth state
- Add Footer component with site information
- Add BIIcon component for Bootstrap Italia icons
- Add MemberDot component for member visualization
- Add default layout wrapper

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/components/BIIcon.vue    |  20 +++++
 app/components/Footer.vue    |  57 +++++++++++++
 app/components/Header.vue    | 152 +++++++++++++++++++++++++++++++++++
 app/components/MemberDot.vue |  40 +++++++++
 app/layouts/default.vue      |  28 +++++++
 5 files changed, 297 insertions(+)
 create mode 100644 app/components/BIIcon.vue
 create mode 100644 app/components/Footer.vue
 create mode 100644 app/components/Header.vue
 create mode 100644 app/components/MemberDot.vue
 create mode 100644 app/layouts/default.vue

diff --git a/app/components/BIIcon.vue b/app/components/BIIcon.vue
new file mode 100644
index 0000000..8ed3248
--- /dev/null
+++ b/app/components/BIIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  name: string
+  size?: 'xs' | 'sm' | 'lg' | 'xl'
+  color?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'white'
+}>()
+</script>
+
+<template>
+  <svg
+      class="icon"
+      :class="[
+      size ? `icon-${size}` : '',
+      color ? `icon-${color}` : ''
+    ]"
+      aria-hidden="true"
+  >
+    <use :href="`/sprites.svg#${name}`"></use>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/app/components/Footer.vue b/app/components/Footer.vue
new file mode 100644
index 0000000..337a694
--- /dev/null
+++ b/app/components/Footer.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import MemberDot from "~/components/MemberDot.vue";
+import { useMembers } from "~/composables/useMembers";
+
+const { sortedMembers } = useMembers();
+</script>
+
+<template>
+  <footer class="it-footer">
+    <div class="it-footer-main">
+      <div class="container">
+        <section>
+          <div class="row clearfix">
+            <div class="col-sm-12">
+              <div class="it-brand-wrapper">
+                <a href="#" data-focus-mouse="false">
+                  <svg class="icon"><use xlink:href="https://italia.github.io/bootstrap-italia/dist/svg/sprites.svg#it-code-circle"></use></svg>
+                  <div class="it-brand-text">
+                    <h2>Visione</h2>
+                    <h3 class="d-none d-md-block">Segnalazioni anonime e sicure</h3>
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="py-4 border-white border-top">
+          <div class="row">
+            <div class="col-12 pb-2">
+              <div class="pb-2">
+                <h4>Progetto di</h4>
+                <div class="members-list d-flex justify-content-center align-items-center gap-5 flex-wrap w-100">
+                  <MemberDot
+                      v-for="member in sortedMembers"
+                      :key="member.name"
+                      :name="member.name"
+                      :image="member.image"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div class="it-footer-small-prints clearfix">
+      <div class="container">
+          <ul class="it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row">
+            <li class="list-inline-item"><a href="#">Note legali</a></li>
+            <li class="list-inline-item"><a href="#">Privacy policy</a></li>
+            <li class="list-inline-item"><a href="/sitemap.xml">Mappa del sito</a></li>
+            <li class="list-inline-item"><a href="https://form.agid.gov.it/view/xyz">Dichiarazione di accessibilità <span class="visually-hidden">(link esterno su sito AgID)</span></a></li>
+          </ul>
+      </div>
+    </div>
+  </footer>
+</template>
\ No newline at end of file
diff --git a/app/components/Header.vue b/app/components/Header.vue
new file mode 100644
index 0000000..ddc4b48
--- /dev/null
+++ b/app/components/Header.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const isMobileMenuOpen = ref(false)
+
+watch(() => route.path, () => {
+  isMobileMenuOpen.value = false
+})
+
+const navLinks = [
+  { name: 'Home', path: '/' },
+  { name: 'Fai una segnalazione', path: '/reports/create' },
+  { name: 'Esplora i dati', path: '/open-data' },
+  { name: 'Come funziona', path: '/info' }
+]
+
+const isAuthenticated = ref(false) // Replace with: const token = useCookie('auth_token'); computed(() => !!token.value)
+</script>
+
+<template>
+  <header class="it-header-wrapper">
+    <div class="it-header-slim-wrapper">
+      <div class="container-xxl">
+        <div class="row">
+          <div class="col-12">
+            <div class="it-header-slim-wrapper-content">
+              <a class="d-none d-lg-block navbar-brand" href="#">Dipartimento della Pubblica Sicurezza</a>
+              <div class="nav-mobile">
+                <nav aria-label="Navigazione secondaria">
+                  <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="#menuC2" role="button" aria-expanded="false" aria-controls="menuC2">
+                    <span>Dipartmento della Pubblica Sicureazza</span>
+                    <BIIcon name="it-expand" />
+                  </a>
+                </nav>
+              </div>
+              <div class="it-header-slim-right-zone">
+                <div class="it-access-top-wrapper">
+                  <!-- Dynamic Login / Area Personale Button -->
+                  <NuxtLink v-if="!isAuthenticated" class="btn btn-primary btn-sm" to="/auth/login">
+                    Accedi
+                  </NuxtLink>
+                  <NuxtLink v-else class="btn btn-primary btn-sm" to="/dashboard">
+                    Area Personale
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- CENTER HEADER (Brand) -->
+    <div class="it-nav-wrapper">
+      <div class="it-header-center-wrapper">
+        <div class="container-xxl">
+          <div class="row">
+            <div class="col-12">
+              <div class="it-header-center-content-wrapper">
+                <div class="it-brand-wrapper">
+                  <NuxtLink to="/">
+                    <BIIcon name="it-pa" />
+                    <div class="it-brand-text">
+                      <div class="it-brand-title">Visione</div>
+                      <div class="it-brand-tagline d-none d-md-block">Un'occhio per la sicurezza del cittadino.</div>
+                    </div>
+                  </NuxtLink>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="it-header-navbar-wrapper">
+        <div class="container-xxl">
+          <div class="row">
+            <div class="col-12">
+              <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
+                <button
+                    class="custom-navbar-toggler"
+                    type="button"
+                    aria-label="Mostra la navigazione"
+                    @click="isMobileMenuOpen = true"
+                >
+                  <BIIcon name="it-burger" />
+                </button>
+
+                <div
+                    class="overlay"
+                    :class="{ 'show': isMobileMenuOpen }"
+                    @click="isMobileMenuOpen = false"
+                    style="display: block;"
+                    v-show="isMobileMenuOpen"
+                ></div>
+
+                <div
+                    class="navbar-collapsable"
+                    :class="{ 'expanded': isMobileMenuOpen }"
+                    style="display: block;"
+                >
+                  <div class="close-div">
+                    <button class="btn close-menu" type="button" @click="isMobileMenuOpen = false">
+                      <span class="visually-hidden">Nascondi la navigazione</span>
+                      <BIIcon name="it-close-big" />
+                    </button>
+                  </div>
+
+                  <div class="menu-wrapper">
+                    <ul class="navbar-nav">
+                      <li
+                          v-for="link in navLinks"
+                          :key="link.path"
+                          class="nav-item"
+                          :class="{ 'active': route.path === link.path }"
+                      >
+                        <NuxtLink
+                            class="nav-link"
+                            :class="{ 'active': route.path === link.path }"
+                            :to="link.path"
+                            :aria-current="route.path === link.path ? 'page' : undefined"
+                        >
+                          <span>{{ link.name }}</span>
+                        </NuxtLink>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.overlay {
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+.overlay.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/MemberDot.vue b/app/components/MemberDot.vue
new file mode 100644
index 0000000..cdfab26
--- /dev/null
+++ b/app/components/MemberDot.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+defineProps<{
+  name?: string
+  image?: string
+}>()
+
+</script>
+
+<template>
+  <div class="member-dot">
+    <img :src="image" :alt="name" class="member-avatar">
+    <div class="member-name">{{ name }}</div>
+  </div>
+</template>
+
+<style scoped>
+.member-dot {
+  width: 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.member-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  background: #e9ecef;
+}
+
+.member-name {
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1.2;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
new file mode 100644
index 0000000..fba7dce
--- /dev/null
+++ b/app/layouts/default.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Header from "~/components/Header.vue";
+import Footer from "~/components/Footer.vue";
+</script>
+
+<template>
+  <div class="app-layout">
+    <Header />
+
+    <main class="app-main">
+      <slot />
+    </main>
+
+    <Footer />
+  </div>
+</template>
+
+<style scoped>
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-main {
+  flex-grow: 1;
+}
+</style>
\ No newline at end of file