Shifting Icon to the Right within the Drawer Navigator Toolbar

While modifying the example code for Material UI's drawer navigator, I decided to enhance it by adding a notification icon and a checkout icon with the Admin Panel typography in the toolbar.

However, I encountered an issue where the checkout icon appeared correctly towards the right end of the toolbar, but the notification icon seemed to be stuck in the middle. How can I resolve this placement discrepancy?

Below is an excerpt from Drawer.tsx:

const drawerWidth = 240;

...

In an attempt to address this problem, I also included additional CSS styling in a separate file named Drawer.css, but unfortunately, it did not have the desired effect.

.panelheaderRight{
    margin-right: 0;
    float: right;
    right: 0;
}

.toolbar-class{
    display:flex;
    justify-content:space-between;
    width: 100%;
}

https://i.sstatic.net/BYL2n.jpg

javascripthtmlcssreactjsmaterial-ui

Answer №1

Include this CSS snippet in the toolbar section

.toolbar-style{
flex-direction: row;
justify-content: space-around;
}

Answer №2

When encountering this issue, the solution is to add an additional wrapper as shown below:

.toolbar-class {
  display: flex;
  align-items:center;
  justify-content: space-between;
  background-color: #ddd;
  padding: 0 1rem;
}

.toolbar-after {
  display: flex;
  align-items: center;
}

.item:not(:last-child) {
  margin-right: 15px;
}
<div class="toolbar-class">
  <div>Admin panel</div>
  <div class="toolbar-after">
    <p class="item">bell</p>
    <p class="item">exit</p>
  </div>
</div>

If you prefer not to include an extra wrapper, you can achieve the desired layout using css grid:

.toolbar-class {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  background-color: #ddd;
  padding: 0 1rem;
}

.item:not(:last-child) {
  margin-right: 15px;
}
<div class="toolbar-class">
  <div>Admin panel</div>
    <p class="item">bell</p>
    <p class="item">exit</p>
</div>

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

Error: karma cannot locate the templateUrl for Angular component

I'm encountering some issues while running tests on angular directives with karma. The problem arises when the directive comes from a templateUrl and is not being translated properly. Here's my karma.conf.js configuration: 'use strict&apos ...

javascriptangularjsangularjs-directivekarma-runnerng-html2js

Using v-model with an input file is not supported

Is there a solution for not being able to use v-model in an input tag with type="file"? Here is an example of the HTML code causing this issue: <input v-model="imageReference" type="file" name="file"/> ...

javascripthtmlvue.js

What steps can I take to avoid Vue.js overriding jQuery bindings within components?

After incorporating vue.js into an existing project and attaching the vue instance to the body tag with an ID of "app," everything seemed to be running smoothly. jQuery and Vue.js were cooperating well together. However, as soon as I started creating compo ...

javascriptjqueryvue.js

Swapping out a character on a webpage using jQuery

Can someone help me remove the colon from this code snippet on my webpage? <h1><b>Headline:</b> something</h1> I'm looking for a simple solution using jQuery, as I am a beginner in JavaScript. Please include the complete code ...

javascriptjqueryhtml

What is preventing me from using memoization in the getServerSideProps of NextJS?

I'm currently using React along with NextJS to showcase a variety of products on a specific category page. While I am able to successfully fetch the products utilizing getServerSideProps, I am not fond of how it continuously requests the product cata ...

javascriptreactjsnext.js

Leverage the retrieved JSON data from the database within an HTML template using the Play

Currently, I am facing a challenge with implementing a login feature in my project. I am struggling to figure out how to showcase the JSON string that is returned on the webpage. Below is a snippet of my code: Security.java: public Person webLogin(Perso ...

javascriptjavahtmljsonplayframework

Discovering nested routes in Ember.js through search functionality

I am currently working on implementing a search functionality within a nested route that shares a model. Below is an example of my code: The "Products" and "Search" functionalities return a JSON response. Router Market.Router.map -> @resource &a ...

javascriptsearchember.jsnested-routes

Tips for transferring information from Django to React without relying on a database

Currently, I am in the process of developing a dashboard application using Django and React. The data for the user is being pulled from the Dynamics CRM API. To accomplish this, I have implemented a Python function that retrieves all necessary informatio ...

javascriptpythonreactjsdjangoweb

Adding a fresh item into an element within an array using Javascript

Hello everyone! I've been thinking about how to insert a new element into an existing element in an array. I need to handle collisions in hash maps by inserting the new element at the same index where a previous element was stored. Thanks for your he ...

javascriptarrayshashmap

Tips for preventing duplicate triggering of a broadcast event from app.js in AngularJS

Within the app.js file, I am utilizing a callback function that broadcasts on the $rootScope to trigger a method in the second controller. function onSuccess(state) { if (state != true) { } else { $rootScope.$broadcast(&a ...

javascriptandroidjqueryangularjs

Send the id from the controller to the script following a Post request

In continuation from the previous question Original question I am currently facing an issue with passing an Id to a link (e.g. http://localhost:1914/en/Events/Index/22). I was advised to pass it via JSON results, but I am unable to retrieve it back in my ...

javascriptjqueryajaxasp.net-mvc

What is the correct method for orchestrating API requests during deployment with create-react-app and an ExpressJS backend?

I have encountered a problem while trying to deploy my react application to the server. After deployment, when the app attempts to make API calls to the same server, an error occurs: Cross-Origin Request Blocked: The Same Origin Policy disallows reading ...

node.jsreactjsexpresscreate-react-apppackage.json

Enabling Autoplay for HTML Videos on Safari iOS 14.2

Recently, I've observed that my autoplay videos are not functioning on iPhone iOS 14.2. Surprisingly, everything was working fine prior to this version. Is there anyone familiar with a solution or workaround for this issue? Perhaps there's a met ...

htmliosvideosafari

Tips for creating asynchronous Redux actions in a genuine application

Summary: I am looking for an example of an asynchronous redux-thunk action that demonstrates how to make an async call (e.g. fetch) and trigger a state update. Additionally, I want to understand how to chain multiple such actions together, like checking if ...

reactjsreduxredux-thunk

Utilizing a constant variable and the setTimeout function to initiate an animated menu display

I'm currently utilizing jQuery to enhance my dropdown menu functionality by toggling the active class defined in my CSS. However, I've encountered a difficulty in adjusting the timeout for one of the elements. Below is some pseudo code to clarify ...

htmljquerycss

Navigate to Angular Link using Scope Data

I have the user's GPS location, which is not fixed. From the frontend, I need to open it as a Google Maps link. <a href="#" ng-click='window.open("https://www.google.com/maps/place/{{data.usergps}}", "_system", "location=yes"); return false;& ...

javascriptangularjs

Issue arising from background change upon component focus

My component needs to change its background color when focused, but for some reason it's not working. The hover effect works fine, but the focus doesn't. Can anyone assist me with this issue? import { CardContainer } from './styles' in ...

javascripthtmlcssreactjsstyled-components

After consolidating buffer geometries, adjusting the transparency/opacity of the shapes is not an option for me

I've been working on a model with multiple boxes and trying to optimize draw calls by using buffer geometry merger. However, I'm facing an issue where I can't change the opacity of geometries after merging. Here are the things I've tri ...

javascriptthree.jsaframebuffer-geometry

How can Angular 2 and Firebase be used to search for an email match within all Firebase authentication accounts?

Is there a method to verify the existence of an email within Firebase auth for all registered accounts when users sign up? Can AngularFireAuth be utilized in an Angular 2 service for this purpose? My authentication system is established, but now I am work ...

javascriptangularfirebasefirebase-authentication

Using an Image to Directly Link to Your Own Video Hosting Site

I'm encountering an issue where clicking on an image link to a hosted video results in the browser prompting to download the video instead of playing it directly. I've tried adjusting between absolute and relative paths in my code, but it hasn&ap ...

htmlvideomp4