RegWatch frontend : React/Vite -> nginx + Docker/CI homelab

- URL d'API externalisée (VITE_API_URL bakée au build), plus de localhost en dur - Dockerfile multi-stage pnpm build -> nginx (fallback SPA) - docker-compose (Watchtower) + .gitea/workflows/build.yml Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-24 18:43:29 +02:00
commit 2307d9a134
49 changed files with 6678 additions and 0 deletions
@@ -0,0 +1,150 @@
+.sidebar {
+  width: 16rem;
+  background-color: white;
+  border-right: 1px solid rgb(229, 231, 235);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 10;
+}
+
+.header {
+  padding: 1.5rem 1.25rem;
+  border-bottom: 1px solid rgb(229, 231, 235);
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: rgb(17, 24, 39);
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: rgb(75, 85, 99);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.nav {
+  flex: 1;
+  padding: 1rem 0.75rem;
+}
+
+.navButton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+  margin-bottom: 0.25rem;
+  border: none;
+  cursor: pointer;
+  background: white;
+}
+
+.navButtonActive {
+  background-color: rgb(243, 244, 246);
+  color: rgb(17, 24, 39);
+}
+
+.navButtonInactive {
+  color: rgb(55, 65, 81);
+}
+
+.navButtonInactive:hover {
+  background-color: rgb(249, 250, 251);
+}
+
+.navIconActive {
+  color: rgb(75, 85, 99);
+}
+
+.navIconInactive {
+  color: rgb(156, 163, 175);
+}
+
+/* ===== USER ===== */
+
+.userSection {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 0;
+}
+
+.userAvatar {
+  width: 34px;
+  height: 34px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+
+  background: rgb(249, 250, 251);
+  border: 1px solid rgb(229, 231, 235);
+
+  color: rgb(107, 114, 128);
+
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition: all 0.2s ease;
+}
+
+.userAvatar:hover {
+  background: rgb(243, 244, 246);
+  border-color: rgb(209, 213, 219);
+}
+
+/* ===== LOGOUT ===== */
+
+.logoutBtn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+
+  width: calc(100% - 1.5rem);
+  margin: 0 0.75rem 1rem 0.75rem;
+
+  padding: 0.625rem 0.75rem;
+
+  border-radius: 0.5rem;
+  border: 1px solid rgb(229, 231, 235);
+
+  background: white;
+  color: rgb(107, 114, 128);
+
+  font-size: 0.875rem;
+  font-weight: 500;
+
+  cursor: pointer;
+
+  transition: all 0.2s ease;
+}
+
+.logoutBtn:hover {
+  background: rgb(249, 250, 251);
+  border-color: rgb(209, 213, 219);
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    position: relative;
+    height: auto;
+    margin-bottom: 1rem;
+  }
+}