feat: merge 2 nav's into one

This commit is contained in:
Ejaaz Khan 2026-01-12 11:17:11 +05:30
parent 01e804a641
commit c1513d0fce
6 changed files with 40 additions and 24 deletions

View file

@ -435,10 +435,7 @@ frappe.views.BaseList = class BaseList {
this.$result[0].style.removeProperty("height");
// place it at the footer of the page
const resultContainerHeight =
window.innerHeight -
this.$result.get(0).offsetTop -
this.$paging_area.get(0).offsetHeight;
const resultContainerHeight = window.innerHeight - this.$paging_area.get(0).offsetHeight;
this.$result.parent(".result-container").css({
height: resultContainerHeight - (frappe.is_mobile() ? 100 : 0) + "px",
});

View file

@ -2,7 +2,7 @@
<div class="container">
<div class="row flex-nowrap align-center page-head-content justify-between">
<div class="page-title">
<button class="btn-reset sidebar-toggle-btn">
<button class="btn-reset sidebar-toggle-btn navbar-brand">
<svg class="es-icon icon-md sidebar-toggle-placeholder">
<use href="#es-line-align-justify"></use>
</svg>
@ -24,7 +24,7 @@
<span class="indicator-pill whitespace-nowrap"></span>
</div>
</div>
<div class="flex col page-actions justify-content-end">
<div class="flex col page-actions justify-content-end {% if frappe.is_mobile() %} pr-0 {% endif %}">
<!-- buttons -->
<div class="filters flex"></div>
<div class="custom-actions hide hidden-xs hidden-md"></div>
@ -60,6 +60,18 @@
<button class="btn btn-primary btn-sm hide primary-action"></button>
</div>
</div>
{% if frappe.is_mobile() %}
<div class="search-bar text-muted hidden ml-2 mr-3">
<div
class="navbar-modal-search-mobile"
placeholder="Search for type a command"
>
<span class="search-icon">
<svg class="icon icon-sm"><use href="#icon-search"></use></svg>
</span>
</div>
</div>
{% endif %}
</div>
</div>
</div>

View file

@ -44,6 +44,15 @@ frappe.ui.Page = class Page {
this.wrapper = $(this.parent);
this.add_main_section();
this.setup_scroll_handler();
this.setup_main_sidebar_toggle();
this.setup_mobile_awesomebar();
}
setup_mobile_awesomebar() {
if (frappe.boot.desk_settings.search_bar && frappe.is_mobile()) {
let awesome_bar = new frappe.search.AwesomeBar();
awesome_bar.setup(".navbar-modal-search-mobile");
}
}
setup_scroll_handler() {
@ -223,6 +232,14 @@ frappe.ui.Page = class Page {
return button;
}
setup_main_sidebar_toggle() {
$(".sidebar-toggle-btn.navbar-brand").on("click", (event) => {
frappe.app.sidebar.set_height();
frappe.app.sidebar.toggle_width();
frappe.app.sidebar.prevent_scroll();
});
}
clear_indicator() {
return this.indicator
.removeClass()

View file

@ -1,10 +1,7 @@
<div class="sticky-top">
{% if (frappe.boot.read_only || frappe.boot.user.impersonated_by || frappe.is_mobile()) { %}
{% if (frappe.boot.read_only || frappe.boot.user.impersonated_by) { %}
<header class="navbar navbar-expand" role="navigation">
<div class="container">
<a class="navbar-brand navbar-home">
<img class="app-logo" src="{{ frappe.boot.app_data[0].app_logo_url }}" alt="{{ __(" App Logo") }}">
</a>
<div class="collapse navbar-collapse justify-content-end">
{% if (frappe.boot.read_only) { %}
<span class="indicator-pill yellow no-indicator-dot read-only-banner" title="{%= __("Your site is undergoing maintenance or being updated.") %}">
@ -16,19 +13,6 @@
{%= __("Impersonating {0}", [frappe.boot.user.name]) %}
</span>
{% } %}
{% if frappe.is_mobile() %}
<div class="search-bar text-muted hidden">
<div
id="navbar-modal-search"
class="navbar-modal-search-mobile"
placeholder="Search for type a command"
>
<span class="search-icon">
<svg class="icon icon-sm"><use href="#icon-search"></use></svg>
</span>
</div>
</div>
{% endif %}
</div>
</div>
</header>

View file

@ -33,7 +33,6 @@ frappe.ui.toolbar.Toolbar = class {
this.bind_events();
$(document).trigger("toolbar_setup");
this.navbar = $(".navbar-brand");
this.app_logo = this.navbar.find(".app-logo");
this.bind_click();
}
change_toolbar() {
@ -54,6 +53,7 @@ frappe.ui.toolbar.Toolbar = class {
frappe.app.sidebar.prevent_scroll();
});
}
bind_events() {
// clear all custom menus on page change
$(document).on("page-change", function () {

View file

@ -1,3 +1,9 @@
body:not([data-route^="Form"]) {
.layout-side-section {
display: none;
}
}
.page-title {
display: flex;
align-items: center;