avo 4.0.0.beta.30 → 4.0.0.beta.32

data/app/assets/stylesheets/css/components/breadcrumbs.css

@@ -1,5 +1,41 @@
 .breadcrumbs {
-  @apply w-full;
+  @apply sticky z-40 w-full bg-primary mb-4;
+  /* top: calc(var(--top-navbar-height) + var(--spacing) * 4); */
+  top: calc(var(--top-navbar-height) + var(--spacing) * 2);
+  margin-top: calc(var(--spacing) * -2 + 1px);
+
+  /* Fake background so the content scrolling underneath the breadcrumbs doesn't look like it's bleeding through */
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: calc(0.5rem);
+    transform: translateY(-100%);
+    background: var(--color-primary);
+    pointer-events: none;
+  }
+}
+
+/* Soft fade strip just below the sticky breadcrumbs — eases the seam between
+   the breadcrumb bar and the content scrolling underneath. */
+.breadcrumbs::after {
+  content: "";
+  position: absolute;
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  height: --spacing(4);
+  background: linear-gradient(
+    to bottom,
+    var(--color-primary),
+    color-mix(in oklab, var(--color-primary), transparent 100%)
+  );
+  pointer-events: none;
 }
 
 .breadcrumbs__container {
@@ -11,10 +47,10 @@
 }
 
 .breadcrumb-element {
-  @apply inline-flex items-center gap-2 font-medium leading-6 text-sm rounded-lg px-2 py-0.5 text-content-secondary;
+  @apply inline-flex items-center gap-2 font-medium leading-6 text-sm rounded-lg  px-1 py-0.5 text-content-secondary;
 
   &:first-child {
-    @apply ps-0;
+    @apply -ms-1;
   }
 }
 
@@ -42,6 +78,10 @@
   }
 
   &:hover {
-    @apply bg-secondary;
+    @apply bg-tertiary;
+
+    .breadcrumb-element__text {
+      @apply text-content;
+    }
   }
 }

data/app/assets/stylesheets/css/components/color_scheme_switcher.css

@@ -3,9 +3,15 @@
   @apply inline-flex items-center;
 }
 
+/* The switcher's trigger surfaces (inline pill + compact trigger) sit on the
+   dark top-navbar in both schemes, so they use primitive neutral tokens that
+   don't flip with light/dark — matching breadcrumbs and the sidebar toggle.
+   The popover panels below stay theme-adaptive because they render on the
+   page surface, not the navbar. */
+
 /* Inline pill — three sections sit in a single rounded container */
 .color-scheme-switcher--inline {
-  @apply gap-1 p-1 rounded-lg bg-secondary border border-tertiary;
+  @apply gap-1 p-1 rounded-lg bg-avo-neutral-800 border border-avo-neutral-700;
 }
 
 /* Compact — a single icon trigger that opens a unified panel */
@@ -15,7 +21,7 @@
 
 .color-scheme-switcher__compact-trigger {
   @apply inline-flex items-center gap-1 h-8 ps-2 pe-1.5 rounded-lg transition-all duration-150;
-  @apply text-content-secondary bg-secondary border border-tertiary hover:bg-tertiary;
+  @apply text-avo-neutral-300 bg-avo-neutral-800 border border-avo-neutral-700 hover:bg-avo-neutral-700 hover:text-avo-neutral-50;
   @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-1;
   @apply cursor-pointer;
 }
@@ -114,33 +120,22 @@
 }
 
 .color-scheme-switcher__button {
-  @apply inline-flex items-center justify-center p-1.5 rounded-md transition-all duration-150 text-content-secondary hover:bg-tertiary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-1 active:scale-95;
+  @apply inline-flex items-center justify-center p-1.5 rounded-md transition-all duration-150 text-avo-neutral-300 hover:bg-avo-neutral-700 hover:text-avo-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-1 active:scale-95;
   @apply border-0 bg-transparent cursor-pointer;
 }
 
-/* Scheme buttons - active states using scheme selection classes */
-.color-scheme-switcher__button[data-scheme="light"] {
-  @apply bg-transparent text-content-secondary shadow-none;
-}
-
-.scheme-light .color-scheme-switcher__button[data-scheme="light"] {
-  @apply bg-primary text-content shadow-sm;
-}
-
-.color-scheme-switcher__button[data-scheme="dark"] {
-  @apply bg-transparent text-content-secondary shadow-none;
-}
-
-.scheme-dark .color-scheme-switcher__button[data-scheme="dark"] {
-  @apply bg-primary text-content shadow-sm;
-}
-
+/* Scheme buttons - idle vs active state. The active "pill" stands out against
+   the neutral-800 inline pill background by going darker (neutral-950). */
+.color-scheme-switcher__button[data-scheme="light"],
+.color-scheme-switcher__button[data-scheme="dark"],
 .color-scheme-switcher__button[data-scheme="auto"] {
-  @apply bg-transparent text-content-secondary shadow-none;
+  @apply bg-transparent text-avo-neutral-300 shadow-none;
 }
 
+.scheme-light .color-scheme-switcher__button[data-scheme="light"],
+.scheme-dark .color-scheme-switcher__button[data-scheme="dark"],
 .scheme-auto .color-scheme-switcher__button[data-scheme="auto"] {
-  @apply bg-primary text-content shadow-sm;
+  @apply bg-avo-neutral-950 text-avo-neutral-50 shadow-sm;
 }
 
 .color-scheme-switcher__icon {

data/app/assets/stylesheets/css/components/ui/card.css

@@ -1,6 +1,11 @@
 /* Card Component - Based on Figma Design System */
 .card {
   @apply flex flex-col items-start self-stretch rounded-xl border border-tertiary bg-secondary;
+
+  /* Contain horizontal overflow so a wide inner scroller (e.g. .card__wrapper
+     wrapping a wide table) can't bleed past the card and push the document
+     wider than the viewport on narrow screens. */
+  overflow-x: clip;
 }
 
 /* Card variants */

data/app/assets/stylesheets/css/components/ui/description_list.css

@@ -1,3 +1,3 @@
 .description-list {
-  @apply w-full flex flex-wrap overflow-auto flex-1 divide-y divide-tertiary flex-col;
+  @apply w-full flex flex-wrap overflow-auto flex-1 divide-y divide-tertiary;
 }

data/app/assets/stylesheets/css/fields/code.css

@@ -37,7 +37,7 @@
 }
 
 /* Lift the main stacking context above the navbar (z-index: 100) when CodeMirror is fullscreen */
-.main-content-area:has(.CodeMirror-fullscreen) {
+.main-content:has(.CodeMirror-fullscreen) {
   z-index: 101;
 }
 

data/app/assets/stylesheets/css/layout.css

@@ -1,5 +1,17 @@
-:root {
-  --top-navbar-height: 4rem;
+@theme {
+  --top-navbar-height: 3.5rem;
+
+  --navbar-bg: var(--color-avo-neutral-900);
+  --navbar-notch-radius: 1rem;
+  --navbar-notch-color: var(--navbar-bg);
+
+  --border-color: var(--color-tertiary);
+}
+
+@layer theme {
+  .dark {
+    --border-color: var(--color-background);
+  }
 }
 
 .skip-to-content {
@@ -24,47 +36,44 @@
   height: var(--top-navbar-height);
 }
 
-/* The sidebar width stays the same regardless of the sidebar open state. */
-/* The content width and margin offset changes based on the sidebar open state and the :lg breakpoint. */
-.main {
+/* Layout variables live on the outermost sidebar host so they cascade to both
+   the top-navbar and .main (which are siblings, not parent/child).
+   --content-width is intentionally relative to .main's content box (which is
+   already offset by --sidebar-offset-size via padding), so centering via
+   mx-auto happens inside the area to the right of the sidebar — not the page. */
+[data-controller~="sidebar"] {
   --sidebar-width: --spacing(64);
   --sidebar-offset-size: 0rem;
-  --content-width: calc(100% - var(--sidebar-offset-size) - var(--spacing) * 2);
+  --content-width: calc(100% - var(--spacing));
+}
 
-  @media (min-width: theme(--breakpoint-lg)) {
-    &.sidebar-open {
-      --sidebar-offset-size: var(--sidebar-width);
-    }
+@media (min-width: theme(--breakpoint-lg)) {
+  [data-controller~="sidebar"][data-sidebar-open-value="true"] {
+    --sidebar-offset-size: var(--sidebar-width);
   }
+}
 
-  @apply mt-(--top-navbar-height);
+[data-controller~="sidebar"][data-sidebar-open-value="false"] {
+  .main-content {
+    @apply ms-0;
+  }
+}
 
-  .main-content-area {
-    @apply w-(--content-width) ms-1 flex flex-1 flex-col z-50 fixed rounded-2xl bg-primary shadow-content py-2 lg:py-4 px-2 lg:px-4 h-full;
+.main {
+  padding-top: var(--top-navbar-height);
+  padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+  transition: padding 0.1s ease-in-out;
+}
 
-    transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
+.main-content {
+  @apply w-(--content-width) flex flex-col bg-primary py-2 lg:py-4 px-2 lg:px-4 border-s border-(--border-color) ms-1;
+  transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
+  min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
+}
 
-    height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
 
-    .scrollable-wrapper {
-      @apply overflow-y-auto h-full flex-1 flex flex-col;
-      @apply px-0.5; /* add some space for the view type toggle buttons to not be cut off by the overflow. this might be needed to be handled differently with a wrapper inside the scrolling area */
-      @apply pt-1; /* add some space for the button focus ring to not be cut off by the overflow */
-    }
-    .avo-container {
-      @apply flex flex-1 flex-col justify-between;
-    }
-  }
-
-  &.sidebar-open {
-    /* Add padding to the main area to allow for the sidebar to expand. */
-    .main-content-area {
-      @media (min-width: theme(--breakpoint-lg)) {
-        margin-inline-start: calc(var(--sidebar-width) + var(--spacing));
-        width: var(--content-width);
-      }
-    }
-  }
+.main-content__container {
+  @apply flex flex-1 flex-col px-2;
 }
 
 .container-large {
@@ -80,7 +89,130 @@
 }
 
 .top-navbar {
-  @apply z-100 fixed w-full flex shrink-0 items-center px-4 lg:px-2 space-x-4 rtl:space-x-reverse lg:space-x-0;
+  @apply z-100 fixed top-0 inset-x-0 w-full shrink-0 pointer-events-none;
+
+  /* Three-region grid: start | center | end. start/end share remaining space
+     equally (1fr each) so the center column (search) stays visually anchored
+     to the navbar's midpoint regardless of breadcrumb length. */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 1rem;
+  padding-inline: 0.75rem;
+
+  background-color: var(--navbar-bg);
+
+  > * {
+    @apply pointer-events-auto;
+  }
+
+  .breadcrumbs__container {
+    @apply flex-nowrap overflow-x-auto;
+  }
+
+  /* Inverted arches at the top corners of the content area — a square just
+     below the navbar painted with the notch color, with a quarter-circle cut
+     out of one bottom corner. The cut reveals the content beneath, so the
+     content looks like it has a rounded top corner without actually applying
+     border-radius to it (which would clip its scroll). */
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    width: var(--navbar-notch-radius);
+    height: var(--navbar-notch-radius);
+    pointer-events: none;
+  }
+
+  &::before {
+    left: 0;
+    background: radial-gradient(
+      circle var(--navbar-notch-radius) at 100% 100%,
+      transparent 99%,
+      var(--navbar-notch-color) 100%
+    );
+  }
+
+  &::after {
+    right: 0;
+    background: radial-gradient(
+      circle var(--navbar-notch-radius) at 0% 100%,
+      transparent 99%,
+      var(--navbar-notch-color) 100%
+    );
+  }
+}
+
+.top-navbar__start {
+  @apply flex items-center gap-3 min-w-0 h-full;
+}
+
+.top-navbar__logo {
+  @apply shrink-0;
+
+  height: calc(var(--top-navbar-height) - --spacing(6));
+}
+
+.top-navbar__center {
+  @apply flex items-center justify-center min-w-0;
+
+  /* Search input is rendered against the dark navbar in both light/dark
+     themes, so it uses primitive neutral tokens that are stable across modes
+     — matching the breadcrumbs and sidebar-toggle treatment. */
+  .search-input__input {
+    background-color: var(--color-avo-neutral-800);
+    border-color: var(--color-avo-neutral-700);
+    color: var(--color-avo-neutral-50);
+
+    &::placeholder {
+      color: var(--color-avo-neutral-400);
+    }
+  }
+
+  .search-input__prefix,
+  .search-input__suffix {
+    color: var(--color-avo-neutral-400);
+  }
+
+  .search-input__suffix kbd {
+    background-color: var(--color-avo-neutral-700);
+    border-color: var(--color-avo-neutral-600);
+    color: var(--color-avo-neutral-200);
+    box-shadow: none;
+  }
+
+  /* On mobile, collapse the navbar search to just the input + search icon —
+     hide the keyboard shortcut suffix and drop the reserved end-padding so it
+     stays compact next to the logo. */
+  @media (width < theme(--breakpoint-sm)) {
+    .search-input__suffix {
+      display: none;
+    }
+
+    .search-input__input.search-input__input--with-shortcut,
+    .search-input__input.search-input__input--with-two-key-shortcut {
+      padding-inline-end: calc(
+        var(--input-icon-offset) +
+        var(--input-icon-gap)
+      );
+    }
+  }
+}
+
+.top-navbar__end {
+  @apply flex items-center justify-end gap-4 min-w-0 h-full;
+}
+
+/* Links inside the always-dark navbar use primitive neutral tokens so they
+   stay readable in both light and dark mode — matching the search input and
+   sidebar toggle treatment. */
+.top-navbar a {
+  color: var(--color-avo-neutral-300);
+
+  &:hover {
+    color: var(--color-avo-neutral-50);
+  }
 }
 
 /* Sidebar toggle: choose icon via navbar variables; visibility driven by data attribute */
@@ -100,14 +232,31 @@ button[data-sidebar-state="closed"] .sidebar-toggle-icon--closed {
   @apply inline-flex;
 }
 
-/* Default hidden state - LTR: sidebar slides in from left */
+/* The toggle sits on the dark top-navbar, so it uses primitive neutral tokens
+   that are stable across light/dark — matching the breadcrumbs treatment. */
+button[data-sidebar-toggle-icon] {
+  --btn-text-color: var(--color-avo-neutral-300);
+
+  &:hover {
+    --btn-text-color: var(--color-avo-neutral-50);
+    background-color: var(--color-avo-neutral-800);
+  }
+}
+
+/* Default hidden state - LTR: sidebar slides in from left.
+   Sidebar starts below the navbar (matching .main's padding-top), so the
+   navbar is uninterrupted across the full viewport width. */
 .avo-sidebar {
-  @apply fixed z-60 top-0 flex-1 border-e border-tertiary lg:border-none mt-(--top-navbar-height) h-[calc(100dvh-var(--top-navbar-height))] bg-background lg:bg-transparent w-(--sidebar-width);
+  @apply fixed z-50 start-0 flex-1 border-e border-tertiary lg:border-none bg-background lg:bg-transparent w-(--sidebar-width) dark:bg-primary;
 
+
+  top: var(--top-navbar-height);
+  height: calc(100dvh - var(--top-navbar-height));
   transform: translateX(-100%);
-  transition: transform 0.1s ease;
+  transition: transform 0.1s ease-in-out;
 }
 
+
 /* RTL: sidebar slides in from right when hidden */
 html[dir="rtl"] .avo-sidebar {
   transform: translateX(100%);

data/app/assets/stylesheets/css/scrollbar.css

@@ -1,3 +1,15 @@
+/* Keep auto-scrolled targets (focus, scrollIntoView, anchor jumps, hash links)
+   below the sticky navbar. Applied to every likely scroll container so it
+   works whether the document, the body, or the main content area is what
+   actually scrolls. */
+html,
+body,
+.main-content,
+.scrollable-wrapper {
+  scroll-padding-top: calc(var(--top-navbar-height) + var(--spacing) * 2);
+  scroll-padding-bottom: calc(var(--spacing) * 2);
+}
+
 /* total width */
 body.os-pc .mac-styled-scrollbar::-webkit-scrollbar {
     background-color: none;

data/app/assets/stylesheets/css/sidebar.css

@@ -285,11 +285,11 @@
 /* ================================================ */
 
 .sidebar-status {
-  @apply p-4 border-t border-tertiary;
+  @apply p-4 border-t border-(--border-color);
 }
 
 .sidebar-status__link {
-  @apply px-4 py-2 border border-tertiary rounded-sm flex justify-between items-center w-full text-content text-sm;
+  @apply px-4 py-2 border border-(--border-color) rounded-sm flex justify-between items-center w-full text-content text-sm;
 }
 
 .sidebar-status__indicator {

data/app/components/avo/fields/belongs_to_field/edit_component.html.erb

@@ -5,7 +5,7 @@
       data-association="<%= @field.id %>"
       data-association-class="<%= @field&.target_resource&.model_class || nil %>"
     >
-    <div class="description-list">
+    <div class="w-full flex flex-wrap">
       <%= field_wrapper(**field_wrapper_args, label_for: @field.polymorphic_form_field_label, help: @field.polymorphic_help || '') do %>
         <%= @form.select @field.type_input_foreign_key, @field.types.map { |type| [Avo.resource_manager.get_resource_by_model_class(type.to_s).name, type.to_s] },
         {
@@ -29,11 +29,11 @@
           <%= @form.hidden_field @field.type_input_foreign_key %>
         <% end %>
       <% end %>
-      <div data-belongs-to-field-target="container" class="hidden border-0"></div>
+      <div data-belongs-to-field-target="container" class="hidden <%= @field.width_class %>"></div>
       <% @field.types.each do |type| %>
         <template data-belongs-to-field-target="type" data-type="<%= type %>">
           <div data-polymorphic-type="<%= type %>">
-            <%= field_wrapper(**field_wrapper_args.merge!(data: reload_data), label: Avo.resource_manager.get_resource_by_model_class(type.to_s).name) do %>
+            <%= field_wrapper(**field_wrapper_args.merge!(data: reload_data), label: Avo.resource_manager.get_resource_by_model_class(type.to_s).name, class: "!w-full") do %>
               <% if @field.is_searchable? %>
                 <%= render Avo::Pro::SearchableAssociations::AutocompleteComponent.new form: @form,
                   disabled: disabled,

data/app/javascript/js/controllers/actions_overflow_controller.js

@@ -7,11 +7,30 @@ export default class extends Controller {
     panelList: Boolean,
   }
 
-  // get the table or grid component, if both null, get the panel body (for show page for example)
+  // Table/grid on index pages; main content region on show/edit and other non-list views.
   get parentTarget() {
     return document.querySelector('[data-component-name="avo/view_types/table_component"]')
       || document.querySelector('[data-component-name="avo/view_types/grid_component"]')
-      || document.querySelector('.main-content-area .scrollable-wrapper') // TODO: to be fixed when we get to the row controls
+      || document.querySelector('#main-content')
+  }
+
+  // Parent nodes grow with page content, but overflow should be measured against
+  // the visible viewport — the old .scrollable-wrapper had a fixed height for this.
+  get visibleParentDimensions() {
+    const parent = this.parentTarget
+
+    if (!parent) {
+      return { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight }
+    }
+
+    const rect = parent.getBoundingClientRect()
+
+    return {
+      top: rect.top,
+      left: rect.left,
+      right: rect.right,
+      bottom: Math.min(rect.bottom, window.innerHeight),
+    }
   }
 
   // Check if the document is in RTL mode
@@ -28,7 +47,7 @@ export default class extends Controller {
     this.element.style.display = 'block'
     this.childDimensions = this.contentTarget.getBoundingClientRect()
     this.element.style.display = ''
-    this.parentDimensions = this.parentTarget.getBoundingClientRect()
+    this.parentDimensions = this.visibleParentDimensions
 
     this.adjustOverflow()
   }

data/app/javascript/js/controllers/sidebar_controller.js

@@ -121,12 +121,23 @@ export default class extends Controller {
   toggleSidebar() {
     if (this.sidebarTarget.classList.contains('hidden')) {
       this.sidebarTarget.classList.remove('hidden')
+
+      // The sidebar starts the session as display:none when closed. Removing
+      // `hidden` and toggling `sidebar-open` in the same tick would let the
+      // browser collapse both style changes into one repaint — meaning the
+      // transform: translateX transition would never fire on the very first
+      // open. Force a reflow so the browser commits the post-hidden state
+      // (translateX(-100%) visible) before we flip to translateX(0).
+      this.mainAreaTarget.offsetHeight // eslint-disable-line no-unused-expressions
     }
     this.mainAreaTarget.classList.toggle('sidebar-open')
 
     Cookies.set(this.cookieKey, this.newValue(Cookies.get(this.cookieKey)))
 
     const isOpen = this.mainAreaTarget.classList.contains('sidebar-open')
+    // Keep the controller's openValue in sync so --sidebar-offset-size flips,
+    // which drives the navbar spacer width and .main padding transitions.
+    this.openValue = isOpen
     this.setToggleButtonsState(isOpen ? 'open' : 'closed')
   }
 

data/app/views/avo/partials/_footer.html.erb

@@ -1,3 +1,3 @@
-<div class="text-center text-sm text-gray-700 <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>">
+<div class="text-center text-sm text-content-secondary <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>">
   <a href="https://avohq.io/" target="_blank">Avo</a> · &copy; <%= Date.today.year %> AvoHQ · v<%= Avo::VERSION %>
 </div>

data/app/views/avo/partials/_navbar.html.erb

@@ -1,60 +1,42 @@
 <%
-  # Icons shown when sidebar is open (collapse) vs closed (expand). Change these to customize.
   sidebar_open_icon = 'layout-sidebar-left-collapse'
   sidebar_closed_icon = 'layout-sidebar-left-expand'
   sidebar_state = @sidebar_open ? 'open' : 'closed'
 %>
 <%= content_tag :nav, class: class_names("top-navbar", {"print:hidden": Avo.configuration.hide_layout_when_printing}) do %>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-auto lg:w-64 shrink-0 h-full py-2">
-    <div class="flex items-center gap-0">
-      <%= a_button class: 'lg:hidden',
-                   size: :sm,
-                   style: :text,
-                   data: {
-                     action: 'click->sidebar#toggleSidebarOnMobile',
-                     sidebar_toggle_icon: true,
-                     sidebar_state: sidebar_state
-                   },
-                   aria: { label: "Toggle sidebar" } do %>
-        <span class="sidebar-toggle-icon sidebar-toggle-icon--open">
-          <%= svg sidebar_open_icon, class: 'h-4 button__icon' %>
-        </span>
-        <span class="sidebar-toggle-icon sidebar-toggle-icon--closed">
-          <%= svg sidebar_closed_icon, class: 'h-4 button__icon' %>
-        </span>
-      <% end %>
+  <div class="top-navbar__start">
+    <%# Mobile always needs a toggle to reach the overlay sidebar. Desktop toggle
+        is optional and controlled by sidebar_toggle_visible. %>
+    <%= a_button class: class_names('shrink-0', 'lg:hidden': !Avo.configuration.sidebar_toggle_visible),
+                 size: :sm,
+                 style: :text,
+                 data: {
+                   action: 'click->sidebar#toggleSidebarForViewport',
+                   sidebar_toggle_icon: true,
+                   sidebar_state: sidebar_state
+                 },
+                 aria: { label: "Toggle sidebar" } do %>
+      <span class="sidebar-toggle-icon sidebar-toggle-icon--open">
+        <%= svg sidebar_open_icon, class: 'h-4 button__icon' %>
+      </span>
+      <span class="sidebar-toggle-icon sidebar-toggle-icon--closed">
+        <%= svg sidebar_closed_icon, class: 'h-4 button__icon' %>
+      </span>
+    <% end %>
 
-      <% if Avo.configuration.sidebar_toggle_visible %>
-        <%= a_button class: '!hidden lg:!inline-flex',
-                     size: :sm,
-                     style: :text,
-                     data: {
-                       action: 'click->sidebar#toggleSidebar',
-                       sidebar_toggle_icon: true,
-                       sidebar_state: sidebar_state
-                     },
-                     aria: { label: "Toggle sidebar" } do %>
-          <span class="sidebar-toggle-icon sidebar-toggle-icon--open">
-            <%= svg sidebar_open_icon, class: 'h-4 button__icon' %>
-          </span>
-          <span class="sidebar-toggle-icon sidebar-toggle-icon--closed">
-            <%= svg sidebar_closed_icon, class: 'h-4 button__icon' %>
-          </span>
-        <% end %>
-      <% end %>
+    <div class="top-navbar__logo">
+      <%= render partial: "avo/partials/logo" %>
     </div>
-    <%= render partial: "avo/partials/logo" %>
   </div>
-  <div class="flex-1 flex items-center justify-between lg:justify-start space-x-2 rtl:space-x-reverse sm:space-x-8 lg:px-1">
-    <%= render Avo::Pro::GlobalSearch::InputComponent.new(resource:) if defined?(Avo::Pro::GlobalSearch::InputComponent) %>
-    <div class="flex justify-between w-full h-full items-center m-0">
-      <%= render partial: "avo/partials/header" %>
-      <%= render partial: "avo/partials/color_scheme_switcher" %>
-    </div>
+
+  <div class="top-navbar__center">
+    <% if defined?(Avo::Pro::GlobalSearch::InputComponent) %>
+      <%= render Avo::Pro::GlobalSearch::InputComponent.new(resource: @resource) %>
+    <% end %>
+  </div>
+
+  <div class="top-navbar__end">
+    <%= render partial: "avo/partials/header" %>
+    <%= render partial: "avo/partials/color_scheme_switcher" %>
   </div>
 <% end %>
-<!-- This is a hack to fix the issue with the navbar not being accesible because of the .main-content-wrapper padding-->
-<!-- TODO: when implementing the final layout (search covered issue) see if we still need this hack-->
-<%#
-<div class="relative opacity-0 h-16 pointer-events-none"></div>
-%>