Creating unique navigation bar elements

I'm currently working on an application and facing an issue with the navigation from the Component to NavbarComponent.

If you'd like to check out the application, you can visit: https://stackblitz.com/github/tsingh38/lastrada

The goal is to have a navigation bar with different links that route to specific Components. Clicking directly on the links works fine, but there are two arrow links that should navigate to the next or previous component, respectively.

I'm encountering two problems:

Problem 1: When clicking the right arrow, it navigates to the correct component, but the left arrow does not. It seems that the router link does not receive the correct value at the time the click event is triggered. The menuBarItemsInitView array contains the currently shown links in the navbar.

Problem 2: I'm having trouble fitting all the elements in the navbar in a visually appealing way. There is a lot of empty space on the right side. I've tried using col-sm-XX to divide the search bar and navigation div equally, but when clicking the right button, it splits into two rows which looks unattractive. Any suggestions on how to achieve a fixed width irrespective of the text length of the menu items?

If you'd like to see a visual representation of the issues, you can view the images here: https://i.sstatic.net/CnUFd.png and https://i.sstatic.net/KGuS5.png

Thank you!

htmlcssangular

Answer №1

Issue 1: In your code, there seems to be a problem with scrolling items. Here is a modified version that allows for left/right scrolling:

export class AppComponent {
  menuBarItemsAll:String[]=['Pizza','Indisch','Salat','Italinisch','Drink','AlkohalfreiGetäanke','Pide','Donör','Something1','Someething2','AlkohalfreiGetäanke','Something3','Someething21','Someething25']
  menuBarItemsInitView:String[];  
  initStartIndex=0;
  initNumberOfItemsToShow=5;
  isLeftClickEnabled=false;
  isRightClickEnabled=false;

  ngOnInit() {
    this.updateItemsInView(this.initStartIndex);
  }
  onLeftClick() {
    this.updateItemsInView(this.initStartIndex-1);
  }
  onRightClick() {
    this.updateItemsInView(this.initStartIndex+1);
  }
  updateItemsInView(indexStart:number){
    const lMin = 0;
    const lMax = this.menuBarItemsAll.length-this.initNumberOfItemsToShow;
    if (indexStart<lMin) indexStart = lMin;
    if (indexStart>lMax) indexStart = lMax;
    this.initStartIndex = indexStart;
    this.isLeftClickEnabled = indexStart > lMin;
    this.isRightClickEnabled = indexStart < lMax;
    this.menuBarItemsInitView = this.menuBarItemsAll.slice(indexStart, indexStart+this.initNumberOfItemsToShow);
  }
}

HTML:

<div>
    <button *ngIf="isLeftClickEnabled" (click)="onLeftClick()">LEFT</button>
    <span *ngFor="let item of menuBarItemsInitView">({{item}})</span>   
    <button *ngIf="isRightClickEnabled" (click)="onRightClick()">RIGHT</button>
</div>

Issue 2: You mentioned finding the current presentation "ugly". I recommend exploring a more user-friendly and responsive design approach using CSS, instead of relying on manual width calculations.

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

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

javascriptcsscanvassvgcanvg

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

htmlreactjsruby-on-railsreact-rails

The collapsible toggle menu fails to collapse on mobile-sized screens

I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cau ...

htmljquerycss

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

My email recipients primarily use Gmail as their email service provider. To address this, I saved the contents of this page as an HTML file named index.html and stored it on my drive for easy sending. However, the issue lies in the fact that the page does ...

htmlemailgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

I am experiencing issues with my button not responding when I click on the top few pixels

I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...

css

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Achieving responsive masonry layout with Bootstrap 4

I'm attempting to implement the bootstrap 4 masonry effect on my website, but I'm facing issues with card responsiveness. The page is very basic without any special effects. While the page works well when resizing the browser window, it doesn&ap ...

javascripthtmlcssresponsive-designbootstrap-4

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

What are the main differences between Fluid Layout and Grid?

It seems like there's some vital information I haven't come across yet. Are fluid layouts and grid layouts interchangeable? I keep hearing about this baseline concept, but I can't quite grasp its purpose. Does it serve as a guide for alignin ...

htmlcssfluid-layoutgrid-layoutbaseline

Unable to manipulate Bootstrap styles in Angular 7 application

Attempting to customize the styling of my breadcrumbs in an Angular App by removing the divider is proving challenging. I've referenced https://getbootstrap.com/docs/4.2/components/breadcrumb/#example, but unfortunately, it's not yielding the des ...

angulartwitter-bootstrapsassangular7

Angular TextInput Components don't seem to function properly when dealing with arrays

I am trying to create a collection of text input components with values stored in an array. However, when using the following code, the values seem to be placed incorrectly in the array and I cannot identify the bug. <table> <tr *ngFor="let opt ...

angulartypescript

When is the right time to develop a new component?

Exploring the strategy behind determining when to create a new component in a web application using angularjs / angular has been on my mind lately. It seems like this concept could apply to all component-based front end frameworks as well. I understand th ...

angularreactjsfunctional-programmingvue.jsweb-component

Angular 4 - Custom global error handler fails to capture Http errors

I have implemented a global event handler in my Angular application: import { ErrorHandler, Injectable, Injector } from '@angular/core'; import { Router } from '@angular/router'; @Injectable() export class GlobalErrorHandler implements ...

angularerror-handlingglobal

How do Box and Grid components differ in Material-UI?

Can you please explain the distinction between Box and Grid in Material-UI? How do I know when to use each one? I'm struggling to understand their differences. ...

cssreactjsmaterial-ui

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

javascripthtmlcss

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right sid ...

htmlcss

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

I have encountered an unusual issue while working on my cafe-shop menu. Despite finding a solution in a standalone HTML file, the menu doesn't function properly when inserted into one of the pages of my WordPress theme - specifically, it only works on ...

htmlcssmobilepositionsticky

Trouble arising when implementing media queries alongside jQuery

When the screen size is 768px, I need to trigger the code below by clicking on the next button. However, an issue arises when trying to revert back to the original style after changing the screen size: $(document).ready(function() { alert(); $ ...

jquerycss

Enhancing nouislider jQuery slider with tick marks

I have integrated the noUIslider plugin () into one of my projects. I am seeking guidance on how to display tick marks below each value on the slider. This is the current initialization code for the slider: $slider.noUiSlider({ 'start': sta ...

javascriptjquerycssjquery-uinouislider

Troubleshooting Error Code 500: Websocket Integration with Apache Server

I am currently working on a NodeJS API that utilizes a WebSocket with socket.io. The API is set to listen on both http://localhost:8080 and ws://localhost:8080. On the server side (NodeJS, using "socket.io" version "2"): // SOCKET_ORIGINS="*" let io = re ...

node.jsangularsocket.ioapache2