The session and presenter headers both look good.

src/lib/ae_string_snippets.ts

@@ -15,7 +15,8 @@ string_snippets['classes__core_menu__button'] = 'btn btn-sm mx-1 variant-soft-te
 string_snippets['classes__core_menu__button_highlight'] = 'btn btn-sm mx-1 variant-filled-tertiary text-info-300 hover:text-info-800';
 string_snippets['classes__core_menu__button_warning'] = 'btn btn-sm mx-1 variant-soft-warning text-info-300 hover:text-info-800';
 
-string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center space-y-1 border border-blue-200 rounded-md py-1 px-2 hover:bg-blue-100 transition-all duration-700 hover:duration-300';
+// string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center space-y-1 border border-blue-200 rounded-md py-1 px-2 hover:bg-blue-100 transition-all duration-700 hover:duration-300';
+string_snippets['classes__events_pres_mgmt_menu'] = 'flex flex-col items-center gap-1 border border-gray-200 rounded-md p-1 hover:bg-gray-100 transition-all duration-700 hover:duration-300';
 
 string_snippets['classes__events_pres_mgmt_menu__button'] = 'btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800';
 string_snippets['classes__events_pres_mgmt_menu__button_highlight'] = 'btn btn-sm mx-1 variant-filled-tertiary text-info-300 hover:text-info-800';

src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte

@@ -19,6 +19,7 @@ import { events_func } from '$lib/ae_events_functions';
 
 import Form_agree from './../../form_agree.svelte';
 import Presenter_view from './../../presenter_view.svelte';
+import Presenter_page_menu from './../../presenter_page_menu.svelte';
 
 // Exports
 export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
@@ -56,120 +57,14 @@ let lq__event_presenter_obj = liveQuery(
 
 
 <section
-    class="ae_events_pres_mgmt_event_presenter md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8"
+    class="ae_events_pres_mgmt_event_presenter md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
     >
 
-<div
-    class="pres_mgmt__presenter_view_menu {ae_snip.classes__events_pres_mgmt_menu}"
-    class:border-none={!$events_loc.pres_mgmt.show_content__presenter_page_help}
-    >
 
-    <div>
+<Presenter_page_menu
-    <a href="/events_pres_mgmt/event/{$events_slct.event_presenter_obj.event_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
+    data={data}
-        <span class="fas fa-arrow-left mx-1"></span>
+    lq__event_presenter_obj={lq__event_presenter_obj}
-        Back to Session Search
+    />
-    </a>
-
-    <a href="/events_pres_mgmt/session/{$events_slct.event_presenter_obj.event_session_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
-        <span class="fas fa-arrow-left mx-1"></span>
-        Back to Session
-    </a>
-
-    {#if $lq__event_presenter_obj?.agree}
-        <!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]} -->
-        <button
-            type="button"
-            disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]}
-            on:click={
-                () => {
-                    $events_slct.event_presentation_id = $events_slct.event_presenter_obj.event_presentation_id_random;
-                    $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;
-
-                    $events_slct.event_presenter_id = $events_slct.event_presenter_obj.event_presenter_id_random;
-                    $events_slct.event_presenter_obj = $events_slct.event_presenter_obj;
-
-                    $events_sess.pres_mgmt.show_content__agree_text = $events_slct.event_presenter_obj.event_presenter_id_random;
-                }
-            }
-            class="{ae_snip.classes__events_pres_mgmt_menu__button} hover:variant-filled-success"
-            title="Agreed to terms and conditions"
-            >
-            <span class="fas fa-check text-green-500 px-1" title="Agreed to terms and conditions"></span>
-            Agreed
-        </button>
-    {:else}
-        <button
-            type="button"
-            disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]}
-            on:click={
-                () => {
-                    $events_slct.event_presentation_id = $events_slct.event_presenter_obj.event_presentation_id_random;
-                    $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;
-
-                    $events_slct.event_presenter_id = $events_slct.event_presenter_obj.event_presenter_id_random;
-                    $events_slct.event_presenter_obj = $events_slct.event_presenter_obj;
-
-                    $events_sess.pres_mgmt.show_content__agree_text = $events_slct.event_presenter_obj.event_presenter_id_random;
-                }
-            }
-            class="{ae_snip.classes__events_pres_mgmt_menu__button_warning} hover:variant-filled-warning"
-            title="View terms and conditions"
-            >
-            <span class="fas fa-times bg-red-500 text-white px-1 mx-1" title="Not agreed to terms and conditions"></span>
-            Not yet agreed
-        </button>
-    {/if}
-
-    <button
-        type="button"
-        on:click={() => {
-            $events_loc.pres_mgmt.show_content__presenter_page_help = !$events_loc.pres_mgmt.show_content__presenter_page_help;
-        }}
-        class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-        title="Help and information about the session search"
-        >
-        <span class="fas fa-question-circle mx-1"></span>
-        {#if $events_loc.pres_mgmt.show_content__presenter_page_help}
-            Hide
-        {:else}
-            Show
-        {/if}
-        Help?
-    </button>
-    </div>
-
-    <Element_data_store
-        ds_code="events__pres_mgmt__presenter_page_help"
-        ds_name="Default: Events - Pres Mgmt Presenter Page Help"
-        ds_type="html"
-        for_type="event"
-        for_id={$events_slct.event_id}
-        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
-        show_edit={false}
-        show_edit_btn={true}
-        hide={!$events_loc.pres_mgmt.show_content__presenter_page_help}
-        />
-
-    <div>
-        <button
-            type="button"
-            on:click={() => {
-                $events_loc.pres_mgmt.show_content__presenter_page_help = !$events_loc.pres_mgmt.show_content__presenter_page_help;
-            }}
-            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
-            class:hidden={!$events_loc.pres_mgmt.show_content__presenter_page_help}
-            title="Help and information about the session search"
-            >
-            <span class="fas fa-question-circle mx-1"></span>
-            {#if $events_loc.pres_mgmt.show_content__presenter_page_help}
-                Hide
-            {:else}
-                Show
-            {/if}
-            Help?
-        </button>
-    </div>
-</div>
 
 {#if !$lq__event_presenter_obj}
     <span class="fas fa-spinner fa-spin mx-1"></span>
@@ -248,7 +143,7 @@ let lq__event_presenter_obj = liveQuery(
 
 
 <style lang="postcss">
-/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
+/* Use the div.ae_quick_modal_container to block background clicks when ung the section.ae_quick_popover. */
 div.ae_quick_modal_container {
     position: fixed;
     top: 0;

src/routes/events_pres_mgmt/presenter_page_menu.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+export let data: any;
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+import Element_ae_crud from '$lib/element_ae_crud.svelte';
+import Element_data_store from '$lib/element_data_store.svelte';
+import Sign_in_out from './sign_in_out.svelte';
+
+export let lq__event_presenter_obj: any;
+
+let ae_tmp: key_val = {};
+let ae_triggers: key_val = {};
+
+</script>
+
+
+<!-- New standard page specific menu 2024-08-01 -->
+<div
+    class="pres_mgmt__presenter_view_menu {ae_snip.classes__events_pres_mgmt_menu}"
+    class:border-none={!$events_loc.pres_mgmt.show_menu__presenter}
+    >
+
+    <!-- BEGIN: The menu button options -->
+    <div
+        class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
+
+    <span
+        class="ae_menu__navigation_options flex flex-row items-center justify-around"
+        >
+        <a href="/events_pres_mgmt/event/{$events_slct.event_presenter_obj.event_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
+            <span class="fas fa-arrow-left"></span>
+            Back to Session Search
+        </a>
+
+        <a href="/events_pres_mgmt/session/{$events_slct.event_presenter_obj.event_session_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
+            <span class="fas fa-arrow-left"></span>
+            Back to Session
+        </a>
+    </span>
+
+    <span
+        class="ae_menu__object_options flex flex-row items-center justify-around"
+        >
+        <button
+            type="button"
+            on:click={() => {
+                if ($events_loc.pres_mgmt.show_menu__presenter == 'options') {
+                    $events_loc.pres_mgmt.show_menu__presenter = null;
+                } else {
+                    $events_loc.pres_mgmt.show_menu__presenter = 'options';
+                }
+            }}
+            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
+            class:hidden={!$ae_loc.trusted_access}
+            title="Options for the presenter"
+            >
+            <span class="fas fa-cog m-1"></span>
+            {#if $events_loc.pres_mgmt.show_menu__presenter == 'options'}
+                Hide
+            {:else}
+                Show
+            {/if}
+            Options
+        </button>
+        <button
+            type="button"
+            on:click={() => {
+                if ($events_loc.pres_mgmt.show_menu__presenter == 'help') {
+                    $events_loc.pres_mgmt.show_menu__presenter = null;
+                } else {
+                    $events_loc.pres_mgmt.show_menu__presenter = 'help';
+                }
+            }}
+            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
+            title="Help and information about the presenter"
+            >
+            <span class="fas fa-question-circle mx-1"></span>
+            {#if $events_loc.pres_mgmt.show_menu__presenter == 'help'}
+                Hide
+            {:else}
+                Show
+            {/if}
+            Help?
+        </button>
+    </span>
+
+    <span
+        class="ae_menu__action_options flex flex-row items-center justify-around"
+        >
+        {#if $lq__event_presenter_obj?.agree}
+            <!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]} -->
+            <button
+                type="button"
+                disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]}
+                on:click={
+                    () => {
+                        $events_slct.event_presentation_id = $events_slct.event_presenter_obj.event_presentation_id_random;
+                        $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;
+
+                        $events_slct.event_presenter_id = $events_slct.event_presenter_obj.event_presenter_id_random;
+                        $events_slct.event_presenter_obj = $events_slct.event_presenter_obj;
+
+                        $events_sess.pres_mgmt.show_content__agree_text = $events_slct.event_presenter_obj.event_presenter_id_random;
+                    }
+                }
+                class="{ae_snip.classes__events_pres_mgmt_menu__button} hover:variant-filled-success"
+                title="Agreed to terms and conditions"
+                >
+                <span class="fas fa-check text-green-500 px-1" title="Agreed to terms and conditions"></span>
+                Agreed
+            </button>
+        {:else}
+            <button
+                type="button"
+                disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$events_slct.event_presenter_obj.event_presenter_id_random]}
+                on:click={
+                    () => {
+                        $events_slct.event_presentation_id = $events_slct.event_presenter_obj.event_presentation_id_random;
+                        $events_slct.event_presentation_obj = $events_slct.event_presentation_obj;
+
+                        $events_slct.event_presenter_id = $events_slct.event_presenter_obj.event_presenter_id_random;
+                        $events_slct.event_presenter_obj = $events_slct.event_presenter_obj;
+
+                        $events_sess.pres_mgmt.show_content__agree_text = $events_slct.event_presenter_obj.event_presenter_id_random;
+                    }
+                }
+                class="{ae_snip.classes__events_pres_mgmt_menu__button_warning} hover:variant-filled-warning"
+                title="View terms and conditions"
+                >
+                <span class="fas fa-times bg-red-500 text-white px-1 mx-1" title="Not agreed to terms and conditions"></span>
+                Not yet agreed
+            </button>
+        {/if}
+    </span>
+
+
+    </div> <!-- END: The menu button options -->
+
+
+    <!-- BEGIN: The expanded menu area for information and options -->
+    <div
+        class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
+        class:hidden={$events_loc.pres_mgmt.show_menu__presenter != 'options'}
+        >
+        Nothing here yet.
+    </div> <!-- END: The expanded menu area for information and options -->
+
+    <Element_data_store
+        ds_code="events__pres_mgmt__presenter_page_help"
+        ds_name="Default: Events - Pres Mgmt Presenter Page Help"
+        ds_type="html"
+        for_type="event"
+        for_id={$events_slct.event_id}
+        class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md"
+        show_edit={false}
+        show_edit_btn={true}
+        hide={$events_loc.pres_mgmt.show_menu__presenter != 'help'}
+        />
+
+    <div>
+        <button
+            type="button"
+            on:click={() => {
+                $events_loc.pres_mgmt.show_menu__presenter = !$events_loc.pres_mgmt.show_menu__presenter;
+            }}
+            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
+            class:hidden={!$events_loc.pres_mgmt.show_menu__presenter}
+            title="Collapse the expanded menu"
+            >
+            <span class="fas fa-chevron-up m-1"></span>
+            {#if $events_loc.pres_mgmt.show_menu__presenter}
+                Hide
+                <!-- Collapse -->
+            {:else}
+                Show
+            {/if}
+            <!-- Menu? -->
+        </button>
+    </div>
+</div> <!-- End of the new standard page specific menu -->

src/routes/events_pres_mgmt/session/[slug]/+page.svelte

@@ -214,316 +214,16 @@ onMount(() => {
 
 
 <section
-    class="ae_events_pres_mgmt_event_session md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8"
+    class="ae_events_pres_mgmt_event_session md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
     >
 
+
 <Session_page_menu
     data={data}
     lq__event_session_obj={lq__event_session_obj}
     />
 
 
-<!-- New standard page specific menu 2024-08-01 -->
-{#if 1==3}
-<div
-    class="pres_mgmt__session_menu {ae_snip.classes__events_pres_mgmt_menu}"
-    class:border-none={!$events_loc.pres_mgmt.show_menu__session}
-    >
-
-    <!-- The menu button options -->
-    <div
-        class="flex flex-row items-center justify-around w-full">
-
-    <span
-        class="ae_menu__navigation_options"
-        >
-        <a href="/events_pres_mgmt/event/{$events_slct.event_session_obj.event_id_random}" class="{ae_snip.classes__events_pres_mgmt_menu__button}">
-            <span class="fas fa-arrow-left m-1"></span>
-            Back to Session Search
-        </a>
-    </span>
-
-    <span
-        class="ae_menu__object_options"
-        >
-        <button
-            type="button"
-            on:click={() => {
-                if ($events_loc.pres_mgmt.show_menu__session == 'options') {
-                    $events_loc.pres_mgmt.show_menu__session = null;
-                } else {
-                    $events_loc.pres_mgmt.show_menu__session = 'options';
-                }
-                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
-            }}
-            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-            class:hidden={!$ae_loc.trusted_access}
-            title="Options for the session"
-            >
-            <span class="fas fa-cog m-1"></span>
-            {#if $events_loc.pres_mgmt.show_menu__session == 'options'}
-                Hide
-            {:else}
-                Show
-            {/if}
-            Options
-        </button>
-
-        <button
-            type="button"
-            on:click={() => {
-                if ($events_loc.pres_mgmt.show_menu__session == 'help') {
-                    $events_loc.pres_mgmt.show_menu__session = null;
-                } else {
-                    $events_loc.pres_mgmt.show_menu__session = 'help';
-                }
-                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
-            }}
-            class="{ae_snip.classes__events_pres_mgmt_menu__button}"
-            title="Help and information about the session"
-            >
-            <span class="fas fa-question-circle m-1"></span>
-            {#if $events_loc.pres_mgmt.show_menu__session == 'help'}
-                Hide
-            {:else}
-                Show
-            {/if}
-            Help?
-        </button>
-    </span>
-
-    <span
-        class="ae_menu__action_options"
-        class:hidden={!$events_loc.auth__person?.id}
-        >
-        <!-- The Sign_in_out component is usually just a button for Sign Out if they are signed in as a POC or presenter. -->
-        <Sign_in_out data={data} />
-    </span>
-
-    </div> <!-- End of the menu button options -->
-
-
-    <!-- The expanded menu area for information and options -->
-    <div
-        class="flex flex-row items-center justify-around w-full"
-        class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
-        >
-        <Element_ae_crud
-            trigger_patch={ae_triggers.priority}
-            api_cfg={$ae_api}
-            object_type={'event_session'}
-            object_id={$lq__event_session_obj?.event_session_id_random}
-            field_name={'priority'}
-            field_type={'button'}
-            field_value={ae_tmp.value__priority}
-            allow_null={true}
-            hide_edit_btn={true}
-            outline_element={false}
-            show_crud={false}
-            display_inline={true}
-            class_li={'m-1'}
-            on:ae_crud_updated={e => {
-                console.log(`ae_crud_updated:`, e.detail);
-
-                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
-            }}
-            >
-            <!-- {@html $lq__event_session_obj?.priority ? '<span class="fas fa-star m-1"></span> High Priority' : '<span class="far fa-star m-1"></span> Priority not set'} -->
-            <button
-                on:click={() => {
-                    ae_tmp.value__priority = !$lq__event_session_obj?.priority;
-
-                    // $events_slct.exhibit_tracking_obj.priority = !$lq__event_session_obj?.priority;
-                    ae_triggers.priority = true;
-                }}
-                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
-                class:variant-soft-success={!$lq__event_session_obj?.priority}
-                class:variant-soft-warning={$lq__event_session_obj?.priority}
-                >
-                {#if $lq__event_session_obj?.priority}
-                    <span class="fas fa-star m-1"></span>
-                    <!-- <span class="fas fa-arrow-down m-1"></span> -->
-                    <span class="hidden">
-                    Not Priority?
-                    </span>
-                {:else}
-                    <!-- <span class="fas fa-toggle-off m-1"></span> -->
-                    <span class="far fa-star m-1"></span>
-                    <span class="hidden">
-                    Priority
-                    </span>
-                    ?
-                {/if}
-            </button>
-        </Element_ae_crud>
-
-        <Element_ae_crud
-            trigger_patch={ae_triggers.hide}
-            api_cfg={$ae_api}
-            object_type={'event_session'}
-            object_id={$lq__event_session_obj?.event_session_id_random}
-            field_name={'hide'}
-            field_type={'button'}
-            field_value={ae_tmp.value__hide}
-            allow_null={false}
-            hide_edit_btn={true}
-            outline_element={false}
-            show_crud={false}
-            display_inline={true}
-            class_li={'m-1'}
-            on:ae_crud_updated={e => {
-                console.log(`ae_crud_updated:`, e.detail);
-
-                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1});
-            }}
-            >
-            <!-- {($lq__event_session_obj?.hide ? 'Hidden' : 'Not Hidden')} -->
-            <button
-                on:click={() => {
-                    ae_tmp.value__hide = !$lq__event_session_obj?.hide;
-
-                    // $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
-                    ae_triggers.hide = true;
-                }}
-                class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
-                class:variant-soft-success={!$lq__event_session_obj?.hide}
-                class:variant-soft-warning={$lq__event_session_obj?.hide}
-                disabled={!$ae_loc.trusted_access}
-                >
-                {#if $lq__event_session_obj?.hide}
-                    <span class="fas fa-toggle-on m-1"></span>
-                    Unhide?
-                {:else}
-                    <!-- <span class="fas fa-toggle-off m-1"></span> -->
-                    <span class="fas fa-eye m-1"></span>
-                    <span class="hidden">
-                    Not Hidden
-                    </span>
-                {/if}
-                <!-- {@html ($lq__event_session_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
-            </button>
-        </Element_ae_crud>
-
-
-        <!-- Enable/Disable -->
-        <Element_ae_crud
-            trigger_patch={ae_triggers.enable}
-            api_cfg={$ae_api}
-            object_type={'event_session'}
-            object_id={$lq__event_session_obj?.event_session_id_random}
-            field_name={'enable'}
-            field_type={'button'}
-            field_value={ae_tmp.value__enable}
-            allow_null={false}
-            hide_edit_btn={true}
-            outline_element={false}
-            show_crud={false}
-            display_inline={true}
-            class_li={'m-1'}
-            on:ae_crud_updated={e => {
-                console.log(`ae_crud_updated:`, e.detail);
-
-                events_func.handle_load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj?.event_session_id_random, log_lvl: 1})
-                .then(function (load_results) {
-                    // Maybe reload page?
-                    // window.location.reload();
-                });
-            }}
-            >
-            <!-- {($lq__event_session_obj?.enable ? 'Enabled' : 'Disabled')} -->
-            <button
-                on:click={() => {
-                    ae_tmp.value__enable = !$lq__event_session_obj?.enable;
-
-                    // $events_slct.exhibit_tracking_obj.hide = !$lq__event_session_obj?.hide;
-                    ae_triggers.enable = true;
-                }}
-                class="btn btn-sm"
-                class:variant-soft-success={$lq__event_session_obj?.enable}
-                class:variant-soft-warning={!$lq__event_session_obj?.enable}
-                disabled={!$ae_loc.administrator_access}
-                >
-                {#if $lq__event_session_obj?.enable}
-                    <span class="fas fa-toggle-on m-1"></span>
-                    Enabled
-                {:else}
-                    <span class="fas fa-toggle-off m-1"></span>
-                    Enable?
-                {/if}
-                <!-- {@html ($lq__event_session_obj?.enable ? '<span class="fas fa-toggle-on m-1"></span> Disable?' : '<span class="fas fa-toggle-off m-1"></span> Enable?')} -->
-            </button>
-        </Element_ae_crud>
-
-
-        <!-- Sort -->
-
-
-        <!-- Group -->
-
-
-        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous' && $ae_loc.access_type != 'authenticated'}
-            {#if $ae_loc.edit_mode}
-                <button
-                    on:click={() => {
-                        $ae_loc.edit_mode = false;
-                    }}
-                    class="btn btn-sm variant-soft-success"
-                    >
-                    <!-- <span class="fas fa-toggle-on m-1"></span> -->
-                    <span class="fas fa-edit m-1"></span>
-                    Edit Mode On
-                </button>
-            {:else}
-                <button
-                    on:click={() => {
-                        $ae_loc.edit_mode = true;
-                    }}
-                    class="btn btn-sm variant-soft-warning"
-                    >
-                    <span class="fas fa-toggle-off m-1"></span>
-                    <!-- <span class="fas fa-edit m-1"></span> -->
-                    Edit Mode?
-                </button>
-            {/if}
-        {/if}
-    </div>
-
-    <Element_data_store
-        ds_code="events__pres_mgmt__session_help"
-        ds_name="Default: Events - Pres Mgmt Session Help"
-        ds_type="html"
-        for_type="event"
-        for_id={$events_slct.event_id}
-        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
-        show_edit={false}
-        show_edit_btn={true}
-        hide={$events_loc.pres_mgmt.show_menu__session != 'help'}
-        />
-
-    <div>
-        <button
-            type="button"
-            on:click={() => {
-                $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
-            }}
-            class="btn btn-sm m-1 variant-ghost-error hover:variant-filled-error"
-            class:hidden={!$events_loc.pres_mgmt.show_menu__session}
-            title="Collapse the expanded menu"
-            >
-            <span class="fas fa-chevron-up m-1"></span>
-            {#if $events_loc.pres_mgmt.show_menu__session}
-                Hide
-                <!-- Collapse -->
-            {:else}
-                Show
-            {/if}
-            <!-- Menu? -->
-        </button>
-    </div>
-</div> <!-- End of the new standard page specific menu -->
-{/if}
-
-
 {#if !$lq__event_session_obj}
 <div>
     <span class="fas fa-spinner fa-spin m-1"></span>

src/routes/events_pres_mgmt/session_page_menu.svelte

@@ -17,15 +17,16 @@ let ae_triggers: key_val = {};
 
 </script>
 
+
 <!-- New standard page specific menu 2024-08-01 -->
 <div
     class="pres_mgmt__session_menu {ae_snip.classes__events_pres_mgmt_menu}"
     class:border-none={!$events_loc.pres_mgmt.show_menu__session}
     >
 
-    <!-- The menu button options -->
+    <!-- BEGIN: The menu button options -->
     <div
-        class="flex flex-row items-center justify-around w-full">
+        class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
 
     <span
         class="ae_menu__navigation_options"
@@ -47,7 +48,6 @@ let ae_triggers: key_val = {};
                 } else {
                     $events_loc.pres_mgmt.show_menu__session = 'options';
                 }
-                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
             }}
             class="{ae_snip.classes__events_pres_mgmt_menu__button}"
             class:hidden={!$ae_loc.trusted_access}
@@ -70,7 +70,6 @@ let ae_triggers: key_val = {};
                 } else {
                     $events_loc.pres_mgmt.show_menu__session = 'help';
                 }
-                // $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
             }}
             class="{ae_snip.classes__events_pres_mgmt_menu__button}"
             title="Help and information about the session"
@@ -93,12 +92,13 @@ let ae_triggers: key_val = {};
         <Sign_in_out data={data} />
     </span>
 
-    </div> <!-- End of the menu button options -->
+
+    </div> <!-- END: The menu button options -->
 
 
-    <!-- The expanded menu area for information and options -->
+    <!-- BEGIN: The expanded menu area for information and options -->
     <div
-        class="flex flex-row items-center justify-around w-full"
+        class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
         class:hidden={$events_loc.pres_mgmt.show_menu__session != 'options'}
         >
         <Element_ae_crud
@@ -130,8 +130,8 @@ let ae_triggers: key_val = {};
                     ae_triggers.priority = true;
                 }}
                 class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
-                class:variant-soft-success={!$lq__event_session_obj?.priority}
+                class:variant-ringed-surface={!$lq__event_session_obj?.priority}
-                class:variant-soft-warning={$lq__event_session_obj?.priority}
+                class:variant-ghost-success={$lq__event_session_obj?.priority}
                 >
                 {#if $lq__event_session_obj?.priority}
                     <span class="fas fa-star m-1"></span>
@@ -179,8 +179,8 @@ let ae_triggers: key_val = {};
                     ae_triggers.hide = true;
                 }}
                 class="btn btn-sm m-1 transition-all hover:transition-all *:hover:inline"
-                class:variant-soft-success={!$lq__event_session_obj?.hide}
+                class:variant-ghost-success={!$lq__event_session_obj?.hide}
-                class:variant-soft-warning={$lq__event_session_obj?.hide}
+                class:variant-ringed-warning={$lq__event_session_obj?.hide}
                 disabled={!$ae_loc.trusted_access}
                 >
                 {#if $lq__event_session_obj?.hide}
@@ -232,8 +232,8 @@ let ae_triggers: key_val = {};
                     ae_triggers.enable = true;
                 }}
                 class="btn btn-sm"
-                class:variant-soft-success={$lq__event_session_obj?.enable}
+                class:variant-ghost-success={$lq__event_session_obj?.enable}
-                class:variant-soft-warning={!$lq__event_session_obj?.enable}
+                class:variant-ringed-warning={!$lq__event_session_obj?.enable}
                 disabled={!$ae_loc.administrator_access}
                 >
                 {#if $lq__event_session_obj?.enable}
@@ -260,7 +260,7 @@ let ae_triggers: key_val = {};
                     on:click={() => {
                         $ae_loc.edit_mode = false;
                     }}
-                    class="btn btn-sm variant-soft-success"
+                    class="btn btn-sm variant-ghost-success"
                     >
                     <!-- <span class="fas fa-toggle-on m-1"></span> -->
                     <span class="fas fa-edit m-1"></span>
@@ -271,7 +271,7 @@ let ae_triggers: key_val = {};
                     on:click={() => {
                         $ae_loc.edit_mode = true;
                     }}
-                    class="btn btn-sm variant-soft-warning"
+                    class="btn btn-sm variant-ringed-warning"
                     >
                     <span class="fas fa-toggle-off m-1"></span>
                     <!-- <span class="fas fa-edit m-1"></span> -->
@@ -279,7 +279,7 @@ let ae_triggers: key_val = {};
                 </button>
             {/if}
         {/if}
-    </div>
+    </div> <!-- END: The expanded menu area for information and options -->
 
     <Element_data_store
         ds_code="events__pres_mgmt__session_help"
@@ -287,7 +287,7 @@ let ae_triggers: key_val = {};
         ds_type="html"
         for_type="event"
         for_id={$events_slct.event_id}
-        class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
+        class_li="bg-yellow-100 border border-yellow-400 p-2 rounded-md"
         show_edit={false}
         show_edit_btn={true}
         hide={$events_loc.pres_mgmt.show_menu__session != 'help'}
@@ -299,7 +299,7 @@ let ae_triggers: key_val = {};
             on:click={() => {
                 $events_loc.pres_mgmt.show_menu__session = !$events_loc.pres_mgmt.show_menu__session;
             }}
-            class="btn btn-sm m-1 variant-ghost-error hover:variant-filled-error"
+            class="btn btn-sm mx-1 variant-ghost-error hover:variant-filled-error"
             class:hidden={!$events_loc.pres_mgmt.show_menu__session}
             title="Collapse the expanded menu"
             >