From 7ea529eb1f93a8ee1e8b3a014df7f9bf0c1fc8f5 Mon Sep 17 00:00:00 2001
From: Jack <d556618338@gmial.com>
Date: Tue, 9 Jun 2026 11:18:14 +0800
Subject: [PATCH] support desktop mode

---
 src/components/BottomNavigation.css | 27 +++++++++++++++++++++++++--
 src/index.css                       | 22 +++++++++++++++++++---
 src/pages/AddMeal.css               |  6 ++++++
 src/pages/Charts.css                | 18 ++++++++++++++++++
 src/pages/Dashboard.css             | 25 +++++++++++++++++++++++++
 src/pages/Onboarding.css            |  8 ++++++++
 src/pages/Settings.css              |  6 ++++++
 7 files changed, 107 insertions(+), 5 deletions(-)

diff --git a/src/components/BottomNavigation.css b/src/components/BottomNavigation.css
index 4e9af49..0bf67d9 100644
--- a/src/components/BottomNavigation.css
+++ b/src/components/BottomNavigation.css
@@ -3,8 +3,6 @@
   bottom: 0;
   left: 0;
   right: 0;
-  max-width: 480px;
-  margin: 0 auto;
   height: 70px;
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
@@ -61,3 +59,28 @@
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
 }
+
+@media (min-width: 768px) {
+  .bottom-nav {
+    top: 0;
+    bottom: 0;
+    right: auto;
+    width: 80px;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: center;
+    gap: 40px;
+    border-top: none;
+    border-right: 1px solid var(--glass-border);
+    padding-bottom: 0;
+  }
+
+  .nav-fab {
+    margin-top: 0;
+    margin-left: 0;
+  }
+
+  .nav-item.active .nav-fab {
+    transform: translateX(2px);
+  }
+}
diff --git a/src/index.css b/src/index.css
index 243d92e..ccbbc55 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,17 +52,22 @@ body {
 
 #root {
   width: 100%;
-  max-width: 480px; /* Mobile App feel */
   margin: 0 auto;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
   background-color: var(--bg-primary);
-  box-shadow: 0 0 20px rgba(0,0,0,0.5);
+  box-shadow: none;
   overflow-x: hidden;
 }
 
+@media (min-width: 768px) {
+  #root {
+    flex-direction: row;
+  }
+}
+
 /* Utilities */
 .glass-card {
   background: var(--glass-bg);
@@ -160,9 +165,20 @@ input, select, button {
 /* Page Container */
 .page-container {
   padding: 24px;
-  padding-bottom: 90px; /* Space for bottom nav */
+  padding-bottom: 90px; /* Space for bottom nav on mobile */
   flex: 1;
   overflow-y: auto;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .page-container {
+    padding: 40px;
+    padding-left: 120px; /* Space for sidebar */
+    padding-bottom: 40px;
+  }
 }
 
 /* Typography */
diff --git a/src/pages/AddMeal.css b/src/pages/AddMeal.css
index 6486fa3..131aa9e 100644
--- a/src/pages/AddMeal.css
+++ b/src/pages/AddMeal.css
@@ -26,3 +26,9 @@
 .mb-2 {
   margin-bottom: 8px;
 }
+
+@media (min-width: 768px) {
+  .add-meal-container .glass-card {
+    max-width: 600px;
+  }
+}
diff --git a/src/pages/Charts.css b/src/pages/Charts.css
index 9dbec39..a0a3f14 100644
--- a/src/pages/Charts.css
+++ b/src/pages/Charts.css
@@ -29,3 +29,21 @@
   border-radius: 50%;
   display: inline-block;
 }
+
+/* Desktop Responsive Layout */
+@media (min-width: 768px) {
+  .charts-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+  }
+  
+  .charts-container > header {
+    grid-column: 1 / -1;
+  }
+  
+  .chart-wrapper, .pie-chart-wrapper {
+    height: 300px;
+  }
+}
diff --git a/src/pages/Dashboard.css b/src/pages/Dashboard.css
index c86b122..8bbd269 100644
--- a/src/pages/Dashboard.css
+++ b/src/pages/Dashboard.css
@@ -163,3 +163,28 @@
 .water-btn:active {
   transform: scale(0.95);
 }
+
+/* Desktop Responsive Layout */
+@media (min-width: 768px) {
+  .dashboard-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+  }
+
+  .dashboard-header {
+    grid-column: 1 / -1;
+  }
+
+  .diet-summary {
+    flex-direction: row;
+    gap: 40px;
+    padding: 20px 0;
+  }
+
+  .macros-list {
+    flex: 1;
+    justify-content: center;
+  }
+}
diff --git a/src/pages/Onboarding.css b/src/pages/Onboarding.css
index 1a076c4..f60f189 100644
--- a/src/pages/Onboarding.css
+++ b/src/pages/Onboarding.css
@@ -117,3 +117,11 @@
 .macro-row:last-child {
   border-bottom: none;
 }
+
+@media (min-width: 768px) {
+  .onboarding-container .glass-card {
+    max-width: 600px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
diff --git a/src/pages/Settings.css b/src/pages/Settings.css
index 5217952..80fc47a 100644
--- a/src/pages/Settings.css
+++ b/src/pages/Settings.css
@@ -15,3 +15,9 @@
 .danger-btn:hover {
   background: rgba(239, 68, 68, 0.2);
 }
+
+@media (min-width: 768px) {
+  .settings-container .glass-card {
+    max-width: 600px;
+  }
+}