Disable navigation bar icon for a specific page

I'm looking to disable the menu icon specifically on the menu page (normal page, not modal), but keep it active on all other pages. Using Meteor, React, and React-Router for my project. The diagram below illustrates the basic structure.

Currently, I am dynamically changing the title text inside .header-center>span using a ReactiveVar, which works fine per page.

I'm searching for a clean solution to hide/turn off the content of .header-left>img only on one specific page and revert back when navigating away from that page. Unsure whether to handle this in CSS or JS. Open to any suggestions.

https://i.sstatic.net/PwYT5.png

javascriptcssreactjsmeteorreact-router

Answer №1

To determine when to toggle it on and off, you can utilize this.props.location.pathname in the following manner:

<div className="header-left">
    {this.props.location.pathname === 'home' ? <img className="sidebar-icon" /> : null}
</div>

This snippet of code will only display the icon on the /home page, hence requiring adjustments to align with your preferences. In scenarios where multiple checks and pages are involved, implementing a manageable function/method could provide more effective results.

Answer №2

Elevate the style of your menu by adding a custom class, such as 

class="menu menu-hidden-icon ..etc.."
. You can then conceal your icon using the following CSS code:

.menu-hidden-icon .sidebar-icon {
    display: none;
}

Answer №3

To discover the URL path and use the hide() function in JQuery, follow these steps:

let currentPath = window.location.pathname;
if(currentPath === '/menu'){
  $(".header-left").hide();
}

Answer №4

After considering all options, I ultimately decided to go with the solution provided by @Lucas Reppe Welander as it allowed the icon to be restored upon navigating away. A big thank you to everyone who contributed. The simple change I made was inverting the logic like so: 

{this.props.router.location.pathname === "/grid" 
   ? null 
   : <img className="menu-icon" onClick={()=> this.onMenu()} src={"../icons/hamburger.svg"} /> }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When trying to access data within objects using JSON iteration, it may lead to encountering an issue of reading a

Attempting to retrieve specific data from a JSON file obtained from a website has proven challenging. While iterating through the collection of objects, undefined values are constantly encountered. Unfortunately, if the JSON is poorly structured, modificat ...

javascriptjson

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

My Experience Dealing with an Issue on the Star Wars App

Hey there, good morning! I'm currently working on a project involving React. The data I am trying to retrieve is located at this link: . My aim is to display the movie data on my MovieDetail page. So far, I have successfully displayed string charact ...

javascriptreactjsfetch

Customize the background color in VueJS based on user roles

I am currently working on a vuejs project with different user levels. In the "user" level (and public area), there is a background image, while in the "admin" level, a plain white background is displayed. I have read that using style tags in the template ...

javascriptvue.js

What is the best way to send my webform data to a web API controller as a model class using JQuery AJAX?

This is the AJAX code I have written to pass two values to my API: function submitData() { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ type: 'POST', ...

javascriptc#jqueryajaxasp.net-web-api

Zooming does not activate the onZoom event

I have created a line chart using react-chartjs-2 and incorporated the chartjs-plugin-zoom plugin. My goal is to have the zoom level displayed in the console whenever the chart is zoomed in or out. However, it seems that the onZoom function is not being tr ...

javascriptreactjschart.jsreact-chartjs-2chartjs-plugin-zoom

Issue with Bootstrap 3 Modal: Missing Title and Input Labels

I'm currently working on customizing a bootstrap template for my friend's church website. My goal is to create a simple web presence for them, and I am in the process of setting up a contact form. I want this form to appear as a modal where users ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using Jquery and Ajax to Process JSON Data

Currently experimenting with the API. This API generates random user data in JSON format, but I'm facing difficulties in parsing the response. Every time I try, I end up receiving undefined objects. Below is the code snippet that I am using: <sc ...

javascriptjqueryajaxjson

Ensuring consistent column height in HTML Tables

Hey there, I'm just starting out with CSS and I have a question about table design. I have three separate tables below and I want to ensure that all the columns in each table are of equal height. Is there an easy way to achieve this? Any suggestions o ...

htmlcss

Switching Google chart series on and off by selecting the legend

I'm currently working on an area chart with 6 different series. My goal is to allow users to click on the legend and toggle the visibility of a particular series. After discovering this helpful example, I attempted to incorporate it into my code belo ...

javascriptjquerygoogle-apigoogle-visualization

For optimal functionality, ensure that only one row is expanded at a time when using the React-

Working with React DataTable react-data-table-component, I have implemented an expandable table feature by setting expandableRows to true and providing expandableRowsComponent. The default behavior allows all rows to be expanded simultaneously, but I want ...

reactjsdatatablereact-table

Dividing a container into sections using percentages with margins? Ensure the total adds up to

Looking to create a grid with div/section in percentage format, while maintaining consistent margins throughout. See an example here: I have code that works with margin set to 1px, but I want to adjust it to use a margin of 1em or around 10px. How can I a ...

htmlcss

XMLHttpRequest is unable to load due to a technical issue

Seeking help to resolve an issue we've encountered. Despite trying various solutions, we keep encountering the Access-Control-Allow-Origin error when attempting to access keen. Error message: Failed to load resource: the server responded with a statu ...

javascriptheaderkeen-io

Calculating the total sum of values from keys, post applying the filterBy method

HTML: <div id="app"> <h1>{{title}}</h1> <form id="search"> Filter <input name="query" v-model="filterQuery"> </form> <table> <tr v-for="client in clients | filterBy filterQuery"> <td ...

javascriptvue.js

Discover the path with the power of JavaScript

Imagine I am including a JavaScript file in this manner: <script type="text/javascript" src="http://foo.com/script.js?id=120#foo"></script> Would it be possible to access the GET or hash parameters passed through this? Currently, I achieve t ...

javascriptjquery

Is it possible to combine useEffect with asynchronous functions?

Here is the code snippet in question: useFocusEffect( useCallback(async () => { const user = JSON.parse(await AsyncStorage.getItem("user")); if (user.uid) { const dbRef = ref(dbDatabase, "/activity/" + user.uid); ...

javascriptreactjsreact-native

ReactJS Components failing to load on initial site visit, only appearing after refreshing for the second time

var img; var dateFormat = require('dateformat'); var count; let arrayIMG = [] var storage = firebase.storage(); var storeRef = storage.ref('images/') const config = { ... }; if (!firebase.apps. ...

javascriptreactjsfirebasefirebase-realtime-databasechart.js

Accessing data from a live database in a randomized sequence

When retrieving items from a database, there is often a common code pattern that looks like this: const [dataRcdArray, setDataRcdArray] = useState<never[]>([]); ..... snapshot.forEach((child:IteratedDataSnapshot) => { setDataRcdArray(arr ...

javascriptreactjsnext.jsfirebase-realtime-database

Is there a way to simultaneously modify several data variables within a Chart.js label?

I'm currently working on dynamically updating a line chart with two data entry points using the variable name "data." Take a look at the code snippet below: var lion = new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", ...

javascriptchart.js

Multiple images overlapping each other in a dynamic parallax effect

Despite my fear of receiving down votes, I have been unsuccessful in finding the answer to my question so I will proceed with asking it. I am attempting to replicate a parallax effect similar to the one showcased on this website, particularly the image of ...

jqueryhtmlcss