Skip to content

[6.x] Separate header logo and nav button #13574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasonvarga merged 13 commits into from
Jan 15, 2026
Merged

[6.x] Separate header logo and nav button #13574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9e70230
separate header logo and nav button - wip
JayGeorge Jan 15, 2026
2af3af9
separate header logo and nav button - wip
JayGeorge Jan 15, 2026
80d8c6e
separate header logo and nav button - custom logo wip
JayGeorge Jan 15, 2026
0bae7e4
Spacing tweak
JayGeorge Jan 15, 2026
1fe85ac
Spacing tweak
JayGeorge Jan 15, 2026
0343756
Spacing tweak
JayGeorge Jan 15, 2026
5cb31cd
Spacing tweak
JayGeorge Jan 15, 2026
b9a33b5
Spacing tweak
JayGeorge Jan 15, 2026
93dfa3b
Fix focus radius
JayGeorge Jan 15, 2026
a1c5648
Spacing tweak
JayGeorge Jan 15, 2026
63ebe2b
Spacing tweak for official logo
JayGeorge Jan 15, 2026
2f20902
Better logomark spacing
JayGeorge Jan 15, 2026
c78595d
Pull pro badge slightly closer
JayGeorge Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion resources/js/components/global-header/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import UserDropdown from './UserDropdown.vue';
<a class="c-skip-link z-(--z-index-above) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
{{ __('Skip to content') }}
</a>
<div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85 w-full">
<div
class="dark flex items-center gap-3.5 [&:has(img)]:gap-3 text-[0.8125rem] text-white/85 w-full"
>
<Logo />
<Breadcrumbs />
</div>
Expand Down
22 changes: 11 additions & 11 deletions resources/js/components/global-header/Logo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,30 @@ function toggleNav() {

<template>
<template v-if="customLogo">
<div class="flex items-center gap-1 relative">
<div class="flex items-center gap-3 relative rounded-xs">
<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">
<div class="p-1 max-sm:ps-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 v-if="customLogoImage" :src="customLogoImage" :alt="cmsName" class="w-full max-w-[260px] max-h-7" v-tooltip="version">
</button>
<Link v-if="customLogoText && !customLogoImage" :href="cp_url('/')" class="mr-2 font-medium text-white whitespace-nowrap" v-tooltip="version" style="--focus-outline-offset: var(--outline-offset-button);">
{{ customLogoText }}
<Link :href="cp_url('/')" v-tooltip="version" style="--focus-outline-offset: var(--outline-offset-button);">
<img v-if="customLogoImage" :src="customLogoImage" :alt="cmsName" class="w-full max-w-[260px] max-h-7" v-tooltip="version">
<span v-if="customLogoText && !customLogoImage" class="font-medium text-white whitespace-nowrap">{{ customLogoText }}</span>
</Link>
</div>
</template>
<template v-else>
<div class="flex items-center gap-1.5 sm:gap-2 relative">
<div class="flex items-center gap-1.5 sm:gap-2.5 relative">
<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">
<div class="p-1 max-sm:ps-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" v-tooltip="version" />
</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 }}
<Link :href="cp_url('/')" class="flex items-center gap-1.5 max-[350px]:hidden text-white/85 rounded-xs whitespace-nowrap" style="--focus-outline-offset: var(--outline-offset-button);">
<StatamicLogo class="size-7 site-logo [&:focus:not(:focus-visible)]:outline-none" v-tooltip="version" />
<span>{{ logos.text ?? logos.siteName }}</span>
</Link>
<ProBadge v-if="isPro" />
<ProBadge v-if="isPro" class="-ms-0.25" />
</div>
</template>
</template>