From ea5a88787e03dddbdc922767ce1cb356b283c64e Mon Sep 17 00:00:00 2001
From: Chris Hubbard <chris@thehubbards.org>
Date: Mon, 17 Jul 2023 22:45:23 -0400
Subject: [PATCH] Attempt to provide configurable breakpoint for testing

---
 src/lib/data/stores/setting.ts | 18 ++++++++++++++++++
 src/routes/+page.svelte        |  9 +++++++--
 tailwind.config.cjs            | 11 ++++++++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/lib/data/stores/setting.ts b/src/lib/data/stores/setting.ts
index 0492c01cc..21d96ad20 100644
--- a/src/lib/data/stores/setting.ts
+++ b/src/lib/data/stores/setting.ts
@@ -349,6 +349,24 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             key: 'desktop-sidebar',
             defaultValue: false
         });
+
+        settings.push({
+            type: 'list',
+            category: SETTINGS_CATEGORY_INTERFACE,
+            title: 'Action Buttons Breakpoint',
+            key: 'action-buttons-breakpoint',
+            defaultValue: 'xs',
+            entries: [
+                '3xs (325px)',
+                '2xs (400px)',
+                'xs (475px)',
+                'sm (640px)',
+                'md (768px)',
+                'lg (1024px)',
+                'xl (1280px)'
+            ],
+            values: ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']
+        });
     }
     return settings;
 })();
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 887a77c99..edd35c899 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -120,6 +120,7 @@
         proskomma: $page.data?.proskomma
     };
 
+    $: extraIconsBreakpoint = $userSettings['action-buttons-breakpoint'];
     $: extraIconsExist = showSearch || showCollectionNavbar; //Note: was trying document.getElementById('extraButtons').childElementCount; but that caused it to hang forever.
     let showOverlowMenu = false; //Controls the visibility of the extraButtons div on mobile
     function handleMenuClick(event) {
@@ -268,7 +269,11 @@
                         </button>
                     {/if}
                 </div>
-                <div id="extraButtons" class={showOverlowMenu ? 'flex' : 'hidden md:flex'}>
+                {(console.log('Breakpoint:', extraIconsBreakpoint), '')}
+                <div
+                    id="extraButtons"
+                    class={showOverlowMenu ? 'flex' : `hidden ${extraIconsBreakpoint}:flex`}
+                >
                     <!-- An overflow menu containing the other right-buttons. On mobile it expands when overflowMenuButton is clicked and collpases when handleMenuClick() is called, on larger screens these buttons are always visible. -->
 
                     <!-- Text Appearance Selector Button -->
@@ -299,7 +304,7 @@
                 {#if extraIconsExist}
                     <!-- overflowMenuButton (on mobile this toggles the visibility of the extraButtons div) -->
                     <button
-                        class="md:hidden dy-btn dy-btn-ghost dy-btn-circle"
+                        class={`${extraIconsBreakpoint}:hidden dy-btn dy-btn-ghost dy-btn-circle`}
                         on:click={() => {
                             showOverlowMenu = !showOverlowMenu;
                             event.stopPropagation();
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 04ae5ccfc..411825193 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,7 +1,16 @@
 module.exports = {
     content: ['./src/**/*.{html,js,svelte,ts}'],
     theme: {
-        extend: {}
+        screens: {
+            '3xs': '325px',
+            '2xs': '400px',
+            'xs': '475px',
+            'sm': '640px',
+            'md': '768px',
+            'lg': '1024px',
+            'xl': '1280px',
+            '2xl': '1536px',
+        }
     },
     //tailwind typography: https://daisyui.com/docs/layout-and-typography/
     //daisyui: https://daisyui.com/docs/use/