Files
borrow-system/frontend/src/layout/Layout.tsx
theis.gaedigk 2480bfab89 feat: update UI components and styles for improved user experience
- Removed obsolete PDF file from the mock directory.
- Updated index.html to change the favicon and title for the application.
- Deleted unused vite.svg file and replaced it with shapes.svg.
- Enhanced App component layout and styling.
- Refined Form1 component with better spacing and updated styles.
- Improved Form2 component to enhance item selection UI and responsiveness.
- Updated Form4 component to improve loan display and interaction.
- Enhanced Header component styling for better visibility.
- Refined LoginForm component for a more modern look.
- Updated Object component styles for better text visibility.
- Improved Sidebar component layout and item display.
- Updated global CSS for better touch target improvements.
- Enhanced Layout component for better responsiveness and structure.
- Updated main.tsx to change toast notification theme.
- Updated tailwind.config.js to include index.html for Tailwind CSS processing.
2025-08-19 23:32:14 +02:00

41 lines
1.2 KiB
TypeScript

import React from "react";
import "../App.css";
import Header from "../components/Header";
import Sidebar from "../components/Sidebar";
type LayoutProps = {
children: React.ReactNode;
onLogout: () => void;
};
const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
return (
<div className="min-h-screen flex bg-slate-50 text-slate-800">
{/* Main */}
<main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
{/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
<div className="w-full max-w-5xl md:flex md:gap-6">
<div className="block md:hidden mb-3">
<Sidebar />
</div>
<div className="hidden md:block md:shrink-0 md:w-72">
<Sidebar />
</div>
<div className="flex-1 min-w-0">
<div className="w-full">
<Header onLogout={onLogout} />
</div>
<div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
{children}
</div>
</div>
</div>
</main>
</div>
);
};
export default Layout;