round 4

web/vue-app/src/layout/ParentLayout.vue

@@ -15,7 +15,13 @@ const handleBack = () => {
 }
 
 const showBack = computed(
-  () => !(route.path === '/parent' || route.name === 'TaskView' || route.name === 'RewardView'),
+  () =>
+    !(
+      route.path === '/parent' ||
+      route.name === 'TaskView' ||
+      route.name === 'RewardView' ||
+      route.name === 'NotificationView'
+    ),
 )
 </script>
 
@@ -40,7 +46,7 @@ const showBack = computed(
           aria-label="Children"
           title="Children"
         >
-          <!-- Children Icon: Two user portraits -->
+          <!-- Children Icon -->
           <svg
             width="24"
             height="24"
@@ -105,6 +111,29 @@ const showBack = computed(
             <rect x="7" y="2" width="10" height="15" rx="5" />
           </svg>
         </button>
+        <button
+          :class="{ active: ['NotificationView'].includes(String(route.name)) }"
+          @click="router.push({ name: 'NotificationView' })"
+          aria-label="Notifications"
+          title="Notifications"
+        >
+          <!-- Notification/Bell Icon -->
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.7"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 16v-5a6 6 0 1 0-12 0v5" />
+            <path d="M2 16h20" />
+            <path d="M8 20a4 4 0 0 0 8 0" />
+            <circle cx="19" cy="7" r="2" fill="#ef4444" stroke="none" />
+          </svg>
+        </button>
       </nav>
       <LoginButton class="login-btn" />
     </header>