add embed, research pages

frontend/src/app/pages/home/menu/menu.html

@@ -1,12 +1,40 @@
 <menu>
-  OpenEventDatabase
+  <div class="menu-header">
+    <h1>OpenEventDatabase</h1>
+  </div>
+  
   <nav class="nav">
-    <a routerLink="/" class="link">Accueil</a>
-    <a routerLink="/community-upcoming" class="link">Community à venir</a>
-    <a routerLink="/events-docs" class="link">Docs événements</a>
+    <div class="nav-section quick-tools">
+      <h3>Outils rapides</h3>
+      <a routerLink="/embed" class="link highlight">🔗 Intégration embarquée</a>
+      <a routerLink="/batch-edit" class="link highlight">⚡ Modification en masse</a>
+    </div>
+    
+    <div class="nav-section">
+      <h3>Navigation principale</h3>
+      <a routerLink="/" class="link">🏠 Accueil</a>
+      <a routerLink="/agenda" class="link">📅 Agenda</a>
+      <a routerLink="/research" class="link">🔍 Recherche</a>
+    </div>
+    
+    <div class="nav-section">
+      <h3>Outils d'administration</h3>
+      <a routerLink="/unlocated-events" class="link">📍 Événements non localisés</a>
+      <a routerLink="/nouvelles-categories" class="link">🏷️ Nouvelles catégories</a>
+    </div>
+    
+    <div class="nav-section">
+      <h3>Intégration & API</h3>
+      <a routerLink="/events-docs" class="link">📚 Documentation API</a>
+      <a href="/demo/stats" class="link">📊 Statistiques</a>
+    </div>
+    
+    <div class="nav-section">
+      <h3>Communauté</h3>
+      <a routerLink="/community-upcoming" class="link">👥 Community à venir</a>
+      <a href="https://source.cipherbliss.com/tykayn/oedb-backend" class="link" target="_blank">💻 Sources</a>
+    </div>
   </nav>
-  <a href="/demo/stats">stats</a>
-  <a href="https://source.cipherbliss.com/tykayn/oedb-backend">sources</a>
 
   (editor)
 

frontend/src/app/pages/home/menu/menu.scss

@@ -1,6 +1,109 @@
 :host {
   display: block;
+  background: #f8f9fa;
+  border-right: 1px solid #e9ecef;
+  min-height: 100vh;
+  padding: 1rem;
+}
 
+.menu-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #3498db;
+
+  h1 {
+    color: #2c3e50;
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.nav-section {
+  h3 {
+    color: #6c757d;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.75rem;
+    padding-left: 0.5rem;
+    border-left: 3px solid #3498db;
+  }
+
+  &.quick-tools {
+    background: linear-gradient(135deg, #3498db, #2980b9);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    h3 {
+      color: white;
+      border-left: 3px solid white;
+      margin-bottom: 1rem;
+    }
+
+    .link.highlight {
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+      font-weight: 600;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      margin-bottom: 0.5rem;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.2);
+        transform: translateX(4px);
+        border-color: rgba(255, 255, 255, 0.4);
+      }
+
+      &.router-link-active {
+        background: rgba(255, 255, 255, 0.3);
+        border-color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+.link, .link-button {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: #2c3e50;
+  text-decoration: none;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.95rem;
+
+  &:hover {
+    background: #3498db;
+    color: white;
+    transform: translateX(4px);
+  }
+
+  &.router-link-active {
+    background: #2980b9;
+    color: white;
+    font-weight: 600;
+  }
+}
+
+.link-button {
+  &:hover {
+    background: #e74c3c;
+    color: white;
+  }
 }
 
 #what_categories {

frontend/src/app/pages/home/menu/menu.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import oedb_what_categories from '../../../../oedb-types';
-import { RouterLink } from "@angular/router";
+import { RouterLink, Router } from "@angular/router";
 
 @Component({
   selector: 'app-menu',
@@ -10,6 +10,7 @@ import { RouterLink } from "@angular/router";
   styleUrl: './menu.scss'
 })
 export class Menu {
+  private router = inject(Router);
 
   public oedb_what_categories: Array<any> = [];
   public onToggleView?: () => void;