feat: add logo; update navigation with logo
This commit is contained in:
parent
85b70d0078
commit
b2099e9bbb
5 changed files with 90 additions and 57 deletions
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Packlist</title>
|
<title>Packlist</title>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
||||||
10
frontend/public/favicon.svg
Normal file
10
frontend/public/favicon.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||||||
|
<!-- Kreis Hintergrund -->
|
||||||
|
<circle cx="100" cy="100" r="90" fill="#FF9800"/>
|
||||||
|
|
||||||
|
<!-- Häkchen -->
|
||||||
|
<path d="M60 105 l25 25 l55 -60" stroke="#ffffff" stroke-width="15" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Optional: Schriftzug -->
|
||||||
|
<!-- <text x="100" y="180" font-family="Arial, sans-serif" font-size="24" fill="#000000" text-anchor="middle">FertigLos</text> -->
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 494 B |
|
|
@ -5,8 +5,9 @@ import ItemsPage from "./pages/ItemsPage";
|
||||||
import TripChecklist from "./pages/TripChecklist";
|
import TripChecklist from "./pages/TripChecklist";
|
||||||
import TripsPage from "./pages/TripsPage";
|
import TripsPage from "./pages/TripsPage";
|
||||||
import TagsPage from "./pages/TagsPage";
|
import TagsPage from "./pages/TagsPage";
|
||||||
|
import logo from "./assets/logo.svg";
|
||||||
|
|
||||||
const APP_TITLE = "da packste dich weg";
|
const APP_TITLE = "Packi";
|
||||||
|
|
||||||
function Navigation() {
|
function Navigation() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
@ -30,56 +31,31 @@ function Navigation() {
|
||||||
const isTripDetail = /^\/trips\/[^/]+$/.test(location.pathname);
|
const isTripDetail = /^\/trips\/[^/]+$/.test(location.pathname);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="mb-2 flex items-center gap-2 bg-white/80 backdrop-blur border-b border-gray-200 px-2 py-2 rounded-xl shadow-sm relative">
|
<nav className="bg-gradient-to-r from-purple-600 via-purple-500 to-fuchsia-500 backdrop-blur border-b border-fuchsia-300 rounded-b-xl shadow mb-0">
|
||||||
<button
|
<div className="flex items-center justify-between p-4">
|
||||||
className="text-2xl font-extrabold text-blue-700 tracking-tight mr-2 select-none hover:underline bg-transparent p-0"
|
<button
|
||||||
style={{ background: "none", border: "none" }}
|
className="flex items-center gap-2 text-2xl font-extrabold text-white tracking-tight select-none hover:underline bg-transparent p-0"
|
||||||
onClick={goToCurrentTrip}
|
style={{ background: "none", border: "none" }}
|
||||||
title="Zum aktuellen Trip"
|
onClick={goToCurrentTrip}
|
||||||
>
|
title="Zum aktuellen Trip"
|
||||||
{APP_TITLE}
|
>
|
||||||
</button>
|
<img src={logo} alt="Logo" width={32} height={32} />
|
||||||
{/* Hamburger für kleine Screens */}
|
{APP_TITLE}
|
||||||
<button
|
</button>
|
||||||
className="sm:hidden ml-auto px-2 py-1 rounded text-blue-700 border border-blue-200"
|
{/* Hamburger für kleine Screens */}
|
||||||
onClick={() => setMenuOpen((v) => !v)}
|
<button
|
||||||
aria-label="Menü öffnen"
|
className="sm:hidden ml-auto px-2 py-1 rounded text-white border border-fuchsia-300"
|
||||||
>
|
onClick={() => setMenuOpen((v) => !v)}
|
||||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
aria-label="Menü öffnen"
|
||||||
<rect y="6" width="28" height="2.5" rx="1.25" fill="#2563eb"/>
|
>
|
||||||
<rect y="13" width="28" height="2.5" rx="1.25" fill="#2563eb"/>
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none">
|
||||||
<rect y="20" width="28" height="2.5" rx="1.25" fill="#2563eb"/>
|
<rect y="6" width="28" height="2.5" rx="1.25" fill="#fff"/>
|
||||||
</svg>
|
<rect y="13" width="28" height="2.5" rx="1.25" fill="#fff"/>
|
||||||
</button>
|
<rect y="20" width="28" height="2.5" rx="1.25" fill="#fff"/>
|
||||||
{/* Links für große Screens */}
|
</svg>
|
||||||
<div className="hidden sm:flex items-center gap-2 ml-auto">
|
</button>
|
||||||
{navItems.map((item) => {
|
{/* Links für große Screens */}
|
||||||
const isActive =
|
<div className="hidden sm:flex items-center gap-1 ml-auto">
|
||||||
!isTripDetail && location.pathname.startsWith(item.to);
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={item.to}
|
|
||||||
to={item.to}
|
|
||||||
className={
|
|
||||||
"px-3 py-1 rounded font-medium transition " +
|
|
||||||
(isActive
|
|
||||||
? "bg-blue-600 text-white shadow"
|
|
||||||
: "text-blue-700 hover:bg-blue-100 hover:text-blue-900")
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
boxShadow: isActive ? "0 2px 8px 0 rgba(37,99,235,0.08)" : undefined,
|
|
||||||
border: isActive ? "2px solid #2563eb" : undefined,
|
|
||||||
}}
|
|
||||||
onClick={() => setMenuOpen(false)}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{/* Dropdown für kleine Screens */}
|
|
||||||
{menuOpen && (
|
|
||||||
<div className="absolute top-full left-0 w-full bg-white border-t border-blue-200 shadow-md z-50 flex flex-col sm:hidden">
|
|
||||||
{navItems.map((item) => {
|
{navItems.map((item) => {
|
||||||
const isActive =
|
const isActive =
|
||||||
!isTripDetail && location.pathname.startsWith(item.to);
|
!isTripDetail && location.pathname.startsWith(item.to);
|
||||||
|
|
@ -88,14 +64,14 @@ function Navigation() {
|
||||||
key={item.to}
|
key={item.to}
|
||||||
to={item.to}
|
to={item.to}
|
||||||
className={
|
className={
|
||||||
"px-4 py-3 border-b font-medium transition " +
|
"px-4 py-2 rounded-lg font-semibold transition-all duration-150 " +
|
||||||
(isActive
|
(isActive
|
||||||
? "bg-blue-600 text-white shadow"
|
? "bg-fuchsia-700 text-white shadow-lg"
|
||||||
: "text-blue-700 hover:bg-blue-100 hover:text-blue-900")
|
: "text-white hover:bg-fuchsia-100 hover:text-fuchsia-900")
|
||||||
}
|
}
|
||||||
style={{
|
style={{
|
||||||
boxShadow: isActive ? "0 2px 8px 0 rgba(37,99,235,0.08)" : undefined,
|
boxShadow: isActive ? "0 2px 12px 0 rgba(168,85,247,0.12)" : undefined,
|
||||||
border: isActive ? "2px solid #2563eb" : undefined,
|
border: isActive ? "2px solid #a855f7" : "2px solid transparent",
|
||||||
}}
|
}}
|
||||||
onClick={() => setMenuOpen(false)}
|
onClick={() => setMenuOpen(false)}
|
||||||
>
|
>
|
||||||
|
|
@ -104,6 +80,36 @@ function Navigation() {
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Dropdown für kleine Screens */}
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="flex flex-col sm:hidden">
|
||||||
|
<div className="bg-gradient-to-r from-purple-600 via-purple-500 to-fuchsia-500 border-t border-fuchsia-300 shadow-lg rounded-b-xl p-4">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive =
|
||||||
|
!isTripDetail && location.pathname.startsWith(item.to);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={item.to}
|
||||||
|
to={item.to}
|
||||||
|
className={
|
||||||
|
"px-6 py-4 border-b font-semibold transition-all duration-150 " +
|
||||||
|
(isActive
|
||||||
|
? "bg-fuchsia-700 text-white shadow"
|
||||||
|
: "text-white hover:bg-fuchsia-100 hover:text-fuchsia-900")
|
||||||
|
}
|
||||||
|
style={{
|
||||||
|
boxShadow: isActive ? "0 2px 12px 0 rgba(168,85,247,0.12)" : undefined,
|
||||||
|
border: isActive ? "2px solid #a855f7" : "2px solid transparent",
|
||||||
|
}}
|
||||||
|
onClick={() => setMenuOpen(false)}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|
@ -157,7 +163,7 @@ export default function App() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 max-w-5xl mx-auto">
|
<div className="max-w-5xl mx-auto p-4 pt-0">
|
||||||
<Navigation />
|
<Navigation />
|
||||||
{dbError && (
|
{dbError && (
|
||||||
<div className="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-300 font-semibold text-center">
|
<div className="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-300 font-semibold text-center">
|
||||||
|
|
|
||||||
10
frontend/src/assets/logo.svg
Normal file
10
frontend/src/assets/logo.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||||||
|
<!-- Kreis Hintergrund -->
|
||||||
|
<circle cx="100" cy="100" r="90" fill="#FF9800"/>
|
||||||
|
|
||||||
|
<!-- Häkchen -->
|
||||||
|
<path d="M60 105 l25 25 l55 -60" stroke="#ffffff" stroke-width="15" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
|
||||||
|
<!-- Optional: Schriftzug -->
|
||||||
|
<!-- <text x="100" y="180" font-family="Arial, sans-serif" font-size="24" fill="#000000" text-anchor="middle">FertigLos</text> -->
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 494 B |
6
frontend/src/declarations.d.ts
vendored
Normal file
6
frontend/src/declarations.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
declare module "*.svg" {
|
||||||
|
import * as React from "react";
|
||||||
|
export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue