Common Navbar Framework7

August 7, 2025 · AI Conversations

User
Fossettscircus Scanner

<script>

</script>
<script>

</script>
<script>

</script>
<script>

</script>
<script>

</script>

Make common navbar to use on every page

Assistant
To make a **common navbar** that appears on every page in your Framework7 + jQuery Cordova app, follow these steps:

—

### ✅ 1. **Create a Common Navbar HTML (Reusable Component)**

**File**: `components/navbar.html`

<!-- components/navbar.html -->
<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link back">
        <i class="icon f7-icons">arrow_left_circle_fill</i>
      </a>
    </div>
    <div class="title nav-title display-flex">
      <span>
        <img src="img/logo.png" alt="logo" class="responsive-logo" />
      </span>
      <span>FOSSETT'S CIRCUS<br />Staff Management System</span>
    </div>
    <div class="right">
      <a href="#" class="link logout-staff">
        <i class="icon f7-icons">power</i>
      </a>
    </div>
  </div>
</div>

—

### ✅ 2. **In Each Page, Include Placeholder for Navbar**

Each page like `staff.html`, `home.html`, etc., should include:

<!-- pages/staff.html -->
<div class="page" data-name="staff">
  <!-- Navbar will be loaded here -->
  <div id="navbar-placeholder"></div>

  <div class="page-content">
    <!-- your staff page content -->
  </div>
</div>

—

### ✅ 3. **Load the Navbar Dynamically via jQuery**

Update your `index.js` or `f7-init.js` to load the navbar automatically on page load:

$(document).on('page:init', function (e, page) {
  $('#navbar-placeholder', page.el).load('components/navbar.html');
});

This ensures the navbar loads into every page that has “.

—

### ✅ 4. **Add Styling for `.responsive-logo` (Optional)**

/* Add to css/index.css */
.responsive-logo {
  height: 30px;
  margin-right: 5px;
  vertical-align: middle;
}
.nav-title span {
  display: inline-block;
  vertical-align: middle;
}

—

### ✅ Result

Now your common navbar will:

– Load into all pages that have `#navbar-placeholder`
– Show logo, title, and logout
– Use Framework7’s navigation styling

Would you like to also **cache** the navbar after first load or **replace inline navbars** to make all pages lighter?

User
Uncaught TypeError: page is undefined
Assistant
The error `Uncaught TypeError: page is undefined` means the `page` parameter in your `page:init` callback is missing or not structured correctly.

Framework7 v6+ uses a different structure for `page:init` when you're using **jQuery** and **Framework7 with DOM7 or vanilla JS**, especially outside of the Svelte/React/Vue setups.

—

### ✅ Fix for Your Setup (Cordova + Framework7 + jQuery)

Since you're using **jQuery**, try this updated and safe approach that works across pages:

// js/index.js or js/f7-init.js
$(document).on('page:init', function (e) {
  const pageEl = e.detail.page.el;

  // Load navbar into the placeholder if it exists
  const $navbarPlaceholder = $(pageEl).find('#navbar-placeholder');
  if ($navbarPlaceholder.length) {
    $navbarPlaceholder.load('components/navbar.html');
  }
});

### ✅ Explanation:
– `e.detail.page.el` safely grabs the DOM element of the current page.
– `$(pageEl).find('#navbar-placeholder')` scopes the navbar load to that page.
– No reliance on `page` being directly passed (which was causing your error).

—

### 🔁 Make Sure:
1. Your pages are loaded via Framework7 router (not raw AJAX or file links).
2. Each page has:

<div class="page" data-name="yourpage">
  <div id="navbar-placeholder"></div>
  <div class="page-content">
    <!-- Content -->
  </div>
</div>

—

Let me know if you'd like to auto-load the navbar only once and reuse it across all pages with caching!

User
Uncaught TypeError: e.detail.page is undefined
Assistant
Thanks — the new error `Uncaught TypeError: e.detail.page is undefined` confirms you're likely using **Framework7 with jQuery and DOM7**, not with Vue/React, and you're relying on the **default `page:init` event**.

In this case, **Framework7 passes only one argument** (the `event`), and **you must extract the page element** differently.

—

### ✅ Clean and Safe Solution for Your Setup

Update your `index.js` or `f7-init.js` with this:

$(document).on('page:init', function (e) {
  const pageEl = e.target; // This is the actual page DOM element
  const $navbarPlaceholder = $(pageEl).find('#navbar-placeholder');

  if ($navbarPlaceholder.length) {
    $navbarPlaceholder.load('components/navbar.html');
  }
});

—

### ✅ Why This Works

– `e.target` gives you the “ element that triggered the `page:init` event.
– You then safely look for the `#navbar-placeholder` inside that page.
– This works in jQuery + Framework7 (non-component) mode like you're using in Cordova.

—

### ✅ Confirm This Is Present in Your HTML Page Templates

<div class="page" data-name="staff">
  <div id="navbar-placeholder"></div>

  <div class="page-content">
    <!-- content here -->
  </div>
</div>

—

Let me know if you'd like to:
– Show/hide the back button dynamically,
– Handle logout button click,
– Or preload the navbar for performance optimization.

User
arrow_left_circle_fill

FOSSETT'S CIRCUS
Customer system

arrow_2_circlepath

I need arrow_2_circlepath on home pqage only

Assistant
To show the `arrow_2_circlepath` (reload icon) **only on the home page**, you can add a simple condition in your dynamic navbar loading logic.

—

### ✅ Step 1: Add a class or attribute to identify the home page

In your `home.html` (or the page you consider "home"), do this:

<div class="page" data-name="home">
  <div id="navbar-placeholder" data-navbar="home"></div>
  <div class="page-content">
    <!-- Home page content -->
  </div>
</div>

For all **other pages**, keep:

<div class="page" data-name="...">
  <div id="navbar-placeholder"></div>
</div>

—

### ✅ Step 2: Modify `index.js` or `f7-init.js` to load different navbars

Update your JS like this:

$(document).on('page:init', function (e) {
  const pageEl = e.target;
  const $navbarPlaceholder = $(pageEl).find('#navbar-placeholder');

  if ($navbarPlaceholder.length) {
    const isHome = $navbarPlaceholder.attr('data-navbar') === 'home';
    const navbarFile = isHome
      ? 'components/navbar-home.html'
      : 'components/navbar-common.html';

    $navbarPlaceholder.load(navbarFile);
  }
});

—

### ✅ Step 3: Create Two Navbar Files

#### `components/navbar-home.html`:
Includes the **reload icon**.

<div class="navbar custom-navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="/" class="link back-to-access text-blue-200">
        <i class="icon f7-icons">arrow_left_circle_fill</i>
      </a>
    </div>
    <div class="title nav-title display-flex align-items-center">
      <img src="img/logo.png" alt="logo" class="responsive-logo" />
      <div class="title-text ml-10">
        <div class="font-bold text-yellow-300">FOSSETT'S CIRCUS</div>
        <div class="text-blue-200">Customer system</div>
      </div>
    </div>
    <div class="right">
      <a href="#" class="link reload-events text-color-blue">
        <i class="icon f7-icons">arrow_2_circlepath</i>
      </a>
    </div>
  </div>
</div>

#### `components/navbar-common.html`:
No reload icon.

<div class="navbar custom-navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="/" class="link back-to-access text-blue-200">
        <i class="icon f7-icons">arrow_left_circle_fill</i>
      </a>
    </div>
    <div class="title nav-title display-flex align-items-center">
      <img src="img/logo.png" alt="logo" class="responsive-logo" />
      <div class="title-text ml-10">
        <div class="font-bold text-yellow-300">FOSSETT'S CIRCUS</div>
        <div class="text-blue-200">Customer system</div>
      </div>
    </div>
    <div class="right">
      <!-- Empty or something else -->
    </div>
  </div>
</div>

—

This method keeps things modular, works in jQuery + Framework7, and avoids inline conditions in HTML. Let me know if you'd prefer to use a single file with JS to toggle the icon dynamically instead.

User
hide based on page
Assistant
To **show or hide the reload icon (`arrow_2_circlepath`) based on the current page**, without duplicating navbar files, follow this dynamic **single-navbar + JS toggle** method.

—

### ✅ Step 1: Use One Common Navbar with the Reload Icon Always Present

In `components/navbar.html`:

<!-- components/navbar.html -->
<div class="navbar custom-navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <div class="left">
      <a href="/" class="link back-to-access text-blue-200">
        <i class="icon f7-icons">arrow_left_circle_fill</i>
      </a>
    </div>
    <div class="title nav-title display-flex align-items-center">
      <img src="img/logo.png" alt="logo" class="responsive-logo" />
      <div class="title-text ml-10">
        <div class="font-bold text-yellow-300">FOSSETT'S CIRCUS</div>
        <div class="text-blue-200">Customer system</div>
      </div>
    </div>
    <div class="right">
      <a href="#" class="link reload-events text-color-blue" id="reload-icon">
        <i class="icon f7-icons">arrow_2_circlepath</i>
      </a>
    </div>
  </div>
</div>

—

### ✅ Step 2: Load the Navbar Once on Each Page

Ensure every page has:

<div class="page" data-name="home"> <!-- or another page name -->
  <div id="navbar-placeholder"></div>
  <div class="page-content"> ... </div>
</div>

—

### ✅ Step 3: Load the Navbar and Hide/Show the Reload Icon in `index.js` or `f7-init.js`

$(document).on('page:init', function (e) {
  const pageEl = e.target;
  const pageName = $(pageEl).attr('data-name');

  const $navbarPlaceholder = $(pageEl).find('#navbar-placeholder');

  if ($navbarPlaceholder.length) {
    $navbarPlaceholder.load('components/navbar.html', function () {
      // After loading navbar, toggle the reload icon
      const $reloadIcon = $('#reload-icon', pageEl); // scope to the current page

      if (pageName === 'home') {
        $reloadIcon.show();
      } else {
        $reloadIcon.hide();
      }
    });
  }
});

—

### ✅ Result:

– The navbar is reused across all pages.
– The `reload` icon only shows on the `home` page.
– No duplicate HTML.
– Works with jQuery + Framework7 in Cordova.

Let me know if you want to attach a click action to the reload icon to fetch events or trigger something specific.

Leave a Comment

Your email address will not be published. Required fields are marked *