Merge pull request 'fixed dass er bei essen bzw trinken bleibt' (#5) from dev into main

Reviewed-on: #5

src/pages/HomePage.tsx

@@ -6,7 +6,11 @@ import './HomePage.css';
 
 const HomePage: React.FC = () => {
   const [productsData, setProductsData] = useState<ProductsData>({ food: [], drinks: [] });
-  const [activeTab, setActiveTab] = useState<'food' | 'drinks'>('drinks');
+  const [activeTab, setActiveTab] = useState<'food' | 'drinks'>(() => {
+    // Initialize from session storage, default to 'drinks' if not available
+    const savedTab = sessionStorage.getItem('kelnerRechnerActiveTab');
+    return (savedTab === 'food' || savedTab === 'drinks') ? savedTab as 'food' | 'drinks' : 'drinks';
+  });
   
   useEffect(() => {
     import('../data/products.json')
@@ -16,6 +20,12 @@ const HomePage: React.FC = () => {
       .catch(error => console.error('Failed to load products:', error));
   }, []);
   
+  // Handler for tab changes that also updates session storage
+  const handleTabChange = (tab: 'food' | 'drinks') => {
+    setActiveTab(tab);
+    sessionStorage.setItem('kelnerRechnerActiveTab', tab);
+  };
+  
   return (
     <div className="home-page">
       <header className="app-header">
@@ -27,13 +37,13 @@ const HomePage: React.FC = () => {
           <div className="category-tabs">
             <button
               className={activeTab === 'drinks' ? 'active' : ''}
-              onClick={() => setActiveTab('drinks')}
+              onClick={() => handleTabChange('drinks')}
             >
               Getränke
             </button>
             <button 
               className={activeTab === 'food' ? 'active' : ''}
-              onClick={() => setActiveTab('food')}
+              onClick={() => handleTabChange('food')}
             >
               Essen
             </button>