diff --git a/frontend/src/app.css b/frontend/src/app.css index dc81b06..93c78c1 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -41,15 +41,46 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; - height: var(--nav-h); display: flex; align-items: stretch; - background: var(--surface); border-top: 1px solid var(--border); + height: var(--nav-h); + display: flex; + align-items: stretch; + background: var(--surface); + border-top: 1px solid var(--border); z-index: 20; + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; + -ms-overflow-style: none; + justify-content: flex-start; + gap: 2px; + padding: 0 6px; + box-sizing: border-box; +} +.bottom-nav::-webkit-scrollbar { + display: none; } .nav-item { - flex: 1; display: flex; flex-direction: column; align-items: center; - justify-content: center; gap: 3px; color: var(--text3); - text-decoration: none; font-size: 10px; font-weight: 500; - transition: color 0.15s; padding-bottom: env(safe-area-inset-bottom, 0); + flex: 0 0 auto; + min-width: 56px; + max-width: 96px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; + color: var(--text3); + text-decoration: none; + font-weight: 500; + transition: color 0.15s; + padding: 0 4px calc(4px + env(safe-area-inset-bottom, 0)); + box-sizing: border-box; +} +.nav-item span { + font-size: 10px; + line-height: 1.15; + text-align: center; + max-width: 100%; } .nav-item.active { color: var(--accent); } .nav-item svg { flex-shrink: 0; } @@ -256,11 +287,15 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we .analysis-page__header { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } +.analysis-page__header > div:first-child { + flex: 1; + min-width: 0; +} .analysis-split { display: flex; @@ -544,14 +579,6 @@ a.analysis-split__nav-item { } } -/* 6-item nav - smaller labels */ -.nav-item span { font-size: 11px; } - -/* 7-item nav scrollable */ -.bottom-nav { overflow-x: auto; } -.nav-item span { font-size: 11px; } -.nav-item { min-width: 60px; } - /* Header with profile avatar */ .app-header { display:flex; align-items:center; justify-content:space-between; } .app-header a { display:flex; } diff --git a/frontend/src/config/appNav.js b/frontend/src/config/appNav.js index e3cd55c..23d36d8 100644 --- a/frontend/src/config/appNav.js +++ b/frontend/src/config/appNav.js @@ -2,6 +2,7 @@ import { LayoutDashboard, PlusSquare, TrendingUp, + Target, BarChart2, Settings, Shield @@ -18,6 +19,7 @@ function baseItems() { { to: '/', label: 'Übersicht', end: true }, { to: '/capture', label: 'Erfassen' }, { to: '/history', label: 'Verlauf' }, + { to: '/goals', label: 'Ziele', shortLabel: 'Ziele', end: true }, { to: '/analysis', label: 'Analyse' }, { to: '/settings', label: 'Einstellungen', shortLabel: 'Einst.' } ] @@ -29,6 +31,7 @@ export function getMainNavItems(isAdmin) { LayoutDashboard, PlusSquare, TrendingUp, + Target, BarChart2, Settings ] diff --git a/frontend/src/pages/Analysis.jsx b/frontend/src/pages/Analysis.jsx index 3823823..25cea80 100644 --- a/frontend/src/pages/Analysis.jsx +++ b/frontend/src/pages/Analysis.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useMemo } from 'react' -import { Brain, Trash2, ChevronDown, ChevronUp, Target } from 'lucide-react' -import { useNavigate } from 'react-router-dom' +import { Brain, Trash2, ChevronDown, ChevronUp } from 'lucide-react' +import { Link } from 'react-router-dom' import { api } from '../utils/api' import { useAuth } from '../context/AuthContext' import Markdown from '../utils/Markdown' @@ -330,7 +330,6 @@ function InsightCard({ ins, onDelete, defaultOpen=false, prompts=[] }) { export default function Analysis() { const { canUseAI } = useAuth() - const navigate = useNavigate() const [prompts, setPrompts] = useState([]) const [allInsights, setAllInsights] = useState([]) const [loading, setLoading] = useState(null) @@ -474,15 +473,14 @@ export default function Analysis() { return (
+ Ziele und Fokusbereiche steuern den Kontext der Auswertungen –{' '} + unter „Ziele“ konfigurieren + {' '}(auch über die untere Navigation). +
++ Konkrete Ziele, Focus Areas und Fortschritt – eigener Bereich{' '} + Ziele in der Navigation (nicht in der KI-Analyse). +
+ + Zu den Zielen + +