index.html

@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/png"
-      href="/assets/ADMstaff_logo-favicon.png"
+      href="/src/assets/ADMstaff_logo-favicon.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ADMStaff - University of Bologna</title>

src/components/Header.vue

@@ -1,55 +1,91 @@
 <template>
   <header class="bg-neutral border-b border-base-300">
-    <nav class="container mx-auto px-4 py-4">
+    <nav class="container mx-auto px-4">
-      <div class="flex justify-between items-center">
+      <div class="navbar min-h-16 px-0">
-        <RouterLink to="/" class="logo">
+        <div class="navbar-start">
-          <span class="logo__mark">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="greater-icon"
-              viewBox="0 0 44 44"
-            >
-              <path fill="none" d="M15 8l14.729 14.382L15 35.367" />
-            </svg>
-          </span>
-          <span class="logo__text">ADMStaff</span>
-          <span class="logo__cursor blinking-cursor"></span>
-        </RouterLink>
-
-        <div class="flex gap-6 items-center">
           <RouterLink
-            v-for="link in links"
+            to="/"
-            :key="link.path"
+            class="group inline-flex shrink-0 items-center font-bold no-underline"
-            :to="link.path"
-            class="text-base-content hover:text-primary transition-colors"
           >
-            {{ $t(link.nameKey) }}
+            <span class="mr-1 inline-flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-3.5 w-3.5 text-base-content/70"
+                viewBox="0 0 44 44"
+              >
+                <path
+                  fill="none"
+                  class="stroke-current stroke-[6]"
+                  d="M15 8l14.729 14.382L15 35.367"
+                />
+              </svg>
+            </span>
+            <span class="inline text-lg text-base-content/70 transition-colors group-hover:text-primary"
+              >ADMStaff</span
+            >
+            <span class="blinking-cursor ml-1"></span>
           </RouterLink>
+        </div>
 
-          <!-- Language Switcher -->
+        <div class="navbar-center hidden lg:flex">
-          <div class="flex gap-2 ml-4">
+          <ul class="menu menu-horizontal px-1 gap-1">
+            <li v-for="link in links" :key="link.path">
+              <RouterLink :to="link.path" class="text-base-content hover:text-primary">
+                {{ $t(link.nameKey) }}
+              </RouterLink>
+            </li>
+          </ul>
+        </div>
+
+        <div class="navbar-end gap-2">
+          <div class="join hidden lg:flex">
             <button
-              @click="setLocale('it')"
+              v-for="lang in languages"
-              :class="[
+              :key="`desktop-${lang.code}`"
-                'px-2 py-1 rounded transition-colors',
+              @click="setLocale(lang.code)"
-                locale === 'it'
+              :class="languageBtnClass(lang.code)"
-                  ? 'bg-primary text-white'
-                  : 'text-base-content hover:text-primary',
-              ]"
             >
-              IT
+              {{ lang.label }}
             </button>
-            <button
+          </div>
-              @click="setLocale('en')"
+
-              :class="[
+          <div class="dropdown dropdown-end lg:hidden">
-                'px-2 py-1 rounded transition-colors',
+            <label tabindex="0" class="btn btn-ghost btn-square" aria-label="Open navigation menu">
-                locale === 'en'
+              <svg
-                  ? 'bg-primary text-white'
+                xmlns="http://www.w3.org/2000/svg"
-                  : 'text-base-content hover:text-primary',
+                fill="none"
-              ]"
+                viewBox="0 0 24 24"
+                class="h-5 w-5 stroke-current"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </label>
+            <ul
+              tabindex="0"
+              class="menu menu-sm dropdown-content mt-3 z-[1] w-56 rounded-box border border-base-300 bg-base-100 p-2 shadow"
             >
-              EN
+              <li v-for="link in links" :key="`mobile-${link.path}`">
-            </button>
+                <RouterLink :to="link.path">{{ $t(link.nameKey) }}</RouterLink>
+              </li>
+              <li class="menu-title"><span>Language</span></li>
+              <li>
+                <div class="join justify-start">
+                  <button
+                    v-for="lang in languages"
+                    :key="`mobile-${lang.code}`"
+                    @click="setLocale(lang.code)"
+                    :class="languageBtnClass(lang.code, true)"
+                  >
+                    {{ lang.label }}
+                  </button>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -61,7 +97,7 @@
 import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
 
-const { t, locale } = useI18n();
+const { locale } = useI18n();
 
 const links = [
   { path: "/about", nameKey: "nav.about" },
@@ -72,47 +108,23 @@ const links = [
   { path: "/lab", nameKey: "nav.lab" },
 ];
 
+const languages = [
+  { code: "it", label: "IT" },
+  { code: "en", label: "EN" },
+];
+
+function languageBtnClass(code, isMobile = false) {
+  if (locale.value === code) {
+    return "btn btn-sm join-item btn-primary text-white";
+  }
+
+  return isMobile
+    ? "btn btn-sm join-item btn-ghost"
+    : "btn btn-sm join-item btn-ghost text-base-content hover:text-primary";
+}
+
 function setLocale(lang) {
   locale.value = lang;
   localStorage.setItem("locale", lang);
 }
 </script>
-
-<style scoped>
-.logo {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.logo__mark {
-  display: inline-flex;
-  align-items: center;
-  margin-right: 5px;
-}
-
-.greater-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.greater-icon path {
-  stroke: #a9a9b3;
-  stroke-width: 6px;
-}
-
-.logo__text {
-  font-size: 1.125rem;
-  color: #a9a9b3;
-}
-
-.logo:hover .logo__text {
-  color: #618375;
-}
-
-.logo__cursor {
-  margin-left: 5px;
-}
-</style>

src/views/AboutView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="max-w-4xl mx-auto">
+  <div class="mx-auto flex flex-col md:flex-row gap-8 items-start">
     <img
       src="/img/ADMstaff_logo-modern.png"
       alt="ADMstaff logo"
-      class="w-96 mx-auto mb-8"
+      class="md:w-96 md:sticky md:top-4 rounded-2xl"
     />
 
     <div v-if="loading" class="text-center py-12">

src/views/HomeView.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <!-- About Section con cursore -->
-    <div class="about relative flex flex-row items-center mx-[5%] my-12 gap-5">
+    <div class="flex flex-col md:flex-row md:items-center md:mx-[5%] mb-12 md:my-12 md:gap-5">
       <img
         src="@/assets/ADMstaff_logo-modern-trasp.png"
         alt="ADMStaff Logo"
-        class="w-1/3"
+        class="md:w-1/3"
       />
-      <h4 id="about-text" class="leading-relaxed md:text-xl">
+      <h4 id="about-text" class=" md:text-xl">
         ADMstaff nasce come gruppo che fornisce servizi da studenti per
         studenti.<br /><br />
         Il nostro obiettivo è sperimentare e fare pratica su ciò che ci