[6.x] Persistent sidebar collapse icon (#12846)

Author: jaygeorge

packages/ui/icons/burger-menu-no-border.svg

@@ -19,20 +19,20 @@ function toggleNav() {
 
 <template>
     <template v-if="customLogo">
-        <button class="flex items-center group cursor-pointer text-white/85 hover:text-white" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">
-            <div class="p-1 mr-1 sm:mr-2 size-7 inset-0 flex items-center justify-center">
-                <Icon name="burger-menu" class="size-5 opacity-60 hover:opacity-100" />
+        <button class="flex items-center group rounded-xs cursor-pointer" type="button" @click="toggleNav" :aria-label="__('Toggle Nav')" style="--focus-outline-offset: 0.2rem;">
+            <div class="p-1 max-sm:ps-2 mr-2 size-5 flex items-center justify-center lg:inset-0">
+                <Icon name="burger-menu-no-border" class="size-3.5! sm:size-3.25! opacity-75 hover:opacity-100" />
             </div>
+            <img :src="customLogo" :alt="cmsName" class="max-w-[260px] max-h-9">
         </button>
-        <img :src="customLogo" :alt="cmsName" class="max-w-[260px] max-h-9">
     </template>
     <template v-else>
         <div class="flex items-center gap-1.5 sm:gap-2 relative">
-            <button class="flex items-center group rounded-lg cursor-pointer" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}" style="--focus-outline-offset: 0.2rem;">
-                <div class="p-1 mr-1 sm:mr-2 size-7 flex items-center justify-center [@media(hover:hover)]:lg:opacity-0 [@media(hover:hover)]:lg:group-hover:opacity-100 [@media(hover:hover)]:lg:absolute lg:inset-0">
-                    <Icon name="burger-menu" class="size-5 max-lg:opacity-60 [@media(hover:none)]:lg:opacity-60 max-lg:hover:opacity-100" />
+            <button class="flex items-center group rounded-xs cursor-pointer" type="button" @click="toggleNav" :aria-label="__('Toggle Nav')" style="--focus-outline-offset: 0.2rem;">
+                <div class="p-1 max-sm:ps-2 mr-2 size-5 flex items-center justify-center lg:inset-0">
+                    <Icon name="burger-menu-no-border" class="size-3.5! sm:size-3.25! opacity-75 hover:opacity-100" />
                 </div>
-                <StatamicLogo class="size-7 [@media(hover:hover)]:lg:group-hover:opacity-0 transition-opacity duration-150" />
+                <StatamicLogo class="size-7" />
             </button>
             <Link :href="cp_url('/')" class="max-[350px]:hidden text-white/85 rounded-xs whitespace-nowrap" style="--focus-outline-offset: var(--outline-offset-button);">
                 {{ logos.text ?? logos.siteName }}