Add google drive sync

README.md

@@ -14,6 +14,7 @@
 - **Markdown Support:** Use Markdown to format descriptions, including lists, sublists, blockquotes, and code blocks.
 - **Skill XP Tracker:** Automatically track XP gains in various skills throughout your plan, with level indications and formatted XP values.
 - **Task Tracker:** Track the number of tasks completed and points earned at each step in your plan.
+- **Google Drive Syncing:** Sign in with your Google account to save and load plans directly from Google Drive. Avoid duplicates by selecting an existing plan or overwriting a current one.
 - **Autosave and Persistence:** Your plans are automatically saved in the browser, so you can pick up right where you left off.
 - **CSV Export/Import:** Easily share your plans by exporting them to CSV or importing from a CSV file.
 - **GitHub Pages Deployment:** The app is deployed automatically to GitHub Pages on each commit to the `main` branch.
@@ -80,6 +81,7 @@ Check out the live demo: [OSRS Leagues Planner](https://calum.github.io/osrs-lea
 
 ### Saving and Loading
 
+- **Google Drive Syncing:** Sign in with your Google account to save your plan directly to Google Drive. The save dialog allows you to select an existing plan to overwrite or create a new one. Load plans by selecting from a list of saved plans on your Google Drive.
 - **Autosave:** Your plan is automatically saved to your browser's local storage.
 - **Reload:** The app will automatically load your last saved plan when you return to the site.
 
@@ -117,4 +119,4 @@ If you encounter any issues or have suggestions, please open an issue on the [Is
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

ROADMAP.md

@@ -2,45 +2,7 @@
 
 This document outlines the next steps for improving the OSRS Leagues Planner. Each task includes an estimated size of the work and a brief explanation of how to approach it.
 
-## 1. Improve UI with a Burger Menu
-
-### Size: Medium
-
-### Description:
-To make the UI more streamlined and less cluttered, especially when the user might want to keep the window small next to their RuneLite client, we can introduce a burger menu. This will allow us to move large icons and infrequently used options off the main screen.
-
-### Steps:
-1. **Install necessary dependencies** for a burger menu, such as `react-burger-menu` or using Material UI’s `Drawer` component.
-2. **Move large icons** (e.g., "Add Step", "Upload Plan", etc.) into the burger menu.
-3. **Add a toggle button** in the top-left or top-right corner of the app to open/close the menu.
-4. **Test UI** at different window sizes to ensure it remains functional and user-friendly.
-
-## 2. Add a Section to Explain How the App Works
-
-### Size: Small
-
-### Description:
-New users may need guidance on how to use the app effectively. Adding a "How It Works" section will improve user onboarding and help them understand the features of the app.
-
-### Steps:
-1. **Create a new component** to house the "How It Works" information.
-2. **Write clear, concise instructions** on using the app, including creating/editing plans, managing inventory, and using the map.
-3. **Link this section** from the burger menu and/or an easily accessible area on the screen.
-
-## 3. Ability to Have Multiple Plans Loaded and Easily Switch Between Them
-
-### Size: Large
-
-### Description:
-Users may want to switch between different plans easily. Implementing the ability to load multiple plans and switch between them without losing progress would enhance the app's flexibility.
-
-### Steps:
-1. **Modify the state management** to handle multiple plans at once. This could involve using an array of plans in the global state.
-2. **Add a plan management component** that displays all loaded plans and allows users to switch between them.
-3. **Ensure persistence** by saving the state of each plan in local storage.
-4. **Test thoroughly** to ensure no data is lost when switching between plans.
-
-## 4. Track the Current Step
+## 1. Track the Current Step
 
 ### Size: Small to Medium
 
@@ -53,7 +15,7 @@ Tracking the current step automatically will make it easier for users to resume
 3. **Save the current step** in local storage so it can be retrieved when the user returns to the app.
 4. **Highlight the current step** visually in the UI.
 
-## 5. Track Banked Resources
+## 2. Track Banked Resources
 
 ### Size: Medium to Large
 
@@ -66,7 +28,7 @@ Tracking resources that have been banked will allow users to manage their invent
 3. **Integrate the banked resources** with the inventory component so that users can transfer items between them.
 4. **Persist the banked resources** in local storage.
 
-## 6. Track Equipment Worn
+## 3. Track Equipment Worn
 
 ### Size: Medium
 

package.json

@@ -15,6 +15,7 @@
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
     "dompurify": "^3.1.6",
+    "gapi-script": "^1.2.0",
     "gh-pages": "^6.1.1",
     "papaparse": "^5.4.1",
     "react": "^18.3.1",

src/App.css

@@ -16,15 +16,12 @@ body {
   display: flex;
 }
 
-.left-panel {
-  width: 13%;
-  background-color: #e7e7e7;
-  padding: 10px;
-}
-
 .right-panel {
-  width: 75%;
-  padding: 10px;
+  padding: 20px;
+  padding-left: 55px;
+  background-color: #fff;
+  flex-grow: 1;
+  height: 100%;
 }
 
 .step-list ul {
@@ -120,4 +117,33 @@ input[type="file"] {
   width: 80%;
   padding: 4px;
   margin-right: 10px;
+}
+
+/* Drawer Content */
+.drawer-header {
+  padding: 16px;
+  background-color: #333;
+  color: white;
+  font-size: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.drawer-content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+@media (max-width: 1200px) {
+  .right-panel {
+    margin-left: 0;
+    padding: 10px;
+  }
+
+  .container {
+    flex-direction: column;
+  }
 }