I want a MenuBar with no hamburger button appearing while in responsive mode. I'm using CSS module to style my components. How can I completely remove hamburger menu button using CSS module? I can't find a way to access its specific HTML tag <a class="p-menubar-button" ...> and do Display: None.
MenuBar declaration in NavBar.js -
import { Menubar } from 'primereact/menubar'
import styles from './NavBar.module.css'
const NavBar = () => {
return (
<Menubar start={start} end={end} className={styles.menubar} />
)
}
CSS in NavBar.module.css -
.menubar {
// I don't know how to access .p-menubar-button here
}
MenuBar component in plain HTML -
<div class="p-menubar p-component NavBar_menubar__ZntdZ">
<div class="p-menubar-start">...</div>
<a class="p-menubar-button" ...>...</a>
<div class="p-menubar-end">...</div>
</div>
Turns out, it is easy to solve using CSS's child selector and attribute selector. I didn't know those selectors work with CSS module.
Here is the solution in NavBar.module.css -
.menubar > a[class="p-menubar-button"] {
display: none !important;
}
Related
i have a sidebar that will disappear on a width of 992px and below using the following media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
while mobile nav icon also appear through the following code:
<nav class="mobileNav">
<div class="navLink" href="#">
<div></div>
<div></div>
<div></div>
</div>
</nav>
#media only screen and (max-width: 992px) {
.mobileNav {
display: flex;
}
}
now when i click on this nav , sidebar should appear and disappear, so i made the following state :
const [showSidebar, setShowSidebar] = useState(true);
and modified the following code :
{showSidebar ? (
<div className="sideBar">
<SidebarComponent />
</div>
) : null}
and added onClick function to modify the state :
<nav class="mobileNav" onClick={() => setState(!state)>
...
</nav>
when user clicks on nav element, it indeed changes the state, but sidebar will not appear because of the css media query :
#media only screen and (max-width: 992px) {
.sideBar {
display: none;
}
}
so how can i make the state override the media query, or how to solve it in a better way ?
You should aim to use either CSS OR JS for your solution rather than both.
So you can have the sidebar always in the DOM but use CSS to hide/move it off screen and then all the control is in the CSS.
Or you can hide and reveal the sidebar/nav in JS based on screen/window width but this will require you create an event listener so that every time the user adjusts the windows size you check again if you should hide or reveal the sidebar/nav.
Also instead of using your media query on ".sidebar" add an additional class such as "sidebar--active" or similar and then use JS to add/remove the classname as needed and the css to hide or reveal it.
I've seen a few questions similar to this on SO but none that quite matched my needs. I'm using React and Material-UI to make a dashboard. I'm using Material-UI's mini variant drawer as a sidebar, with links that should display routes when clicked. The sidebar can be opened by clicking a button, which updates a state variable and adjusts the CSS className of the sidebar. This causes the sidebar/drawer to "slide" open.
If I click a link on the sidebar, I can easily display a desired route. However, I can't get the route to also "slide" to the side when the sidebar/drawer opens. It will probably be easier to understand by looking at the code, so I've included a link to a codesandbox below:
https://codesandbox.io/s/appbar-with-react-router-bkogj?file=/src/App.js
I basically copy and pasted everything from the Material-UI website (using v4 I believe), then added the route myself. Would appreciate any feedback on how to solve this issue.
For this I think the MiniDrawer component needs to render the content since it necessarily is aware of the space the appbar and drawer components occupy.
MiniDrawer
Take and render a children prop.
export default function MiniDrawer({ children }) {
...
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
...
>
...
</AppBar>
<Drawer
...
>
...
</Drawer>
<main className={classes.content}>{children}</main>
</div>
);
}
App
Render the Outlet as a child component.
export default function App() {
return (
<div className="App">
<AppBar>
<Outlet />
</AppBar>
</div>
);
}
RejectTable
Remove the excess margin so it fills the content area the parent component allows.
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
height: "100%",
// marginLeft: "4em" // <-- remove
}
}));
I'm actually a beginner in react so I just want to ask if I can use useReducer and useContext for themes like (dark mode & light mode), and redux for all other data state.
The useContext hook is the React hook equivalent of the Context. ... It takes a React context object as the argument and returns the current value from the context. useReducer is an alternative version of useState for more complex state changes.
Let's see how to implement it in React by using hooks and browser's localStorage.
We will use here facebook's react-boilerplate.
Clone it first by using the command npx create-react-app dark-mode, after cloning, change the root directory to dark-mode by using cd dark-mode and to run the application npm start, use this create-react-app for more details.
Let's add some darkness 😃
Create CSS Files
// light-theme.css
html[data-theme="light"] {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
}
// dark-theme.css
html[data-theme="dark"] {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
}
As of now, I have added only two color variables, later you can add as many color variables for your project.
Don't hardcode color in any css files or in any inline styling, use only defined color variables.
// App.css
.App-header {
background-color:var(--background-color);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color:var(--color);
}
I have used those color variables in App.css file.
Create DarkMode folder, add index.js and index.css files.
/ DarkMode/index.js
const DarkModeToggle = () => {
const [isDark, setIsDark] = useState(localStorage.getItem("theme") === "dark" ? true : false);
useEffect(() => {
document
.getElementsByTagName("HTML")[0]
.setAttribute("data-theme", localStorage.getItem("theme"));
},[]);
Using useState hook to store the current user theme preference, get the current user preference from localStorage.
Suppose you are running the application for first time, you won't get the user theme preference in browser's localStorage, in that case false get set to the isDark hook and applied light theme to the application.
I have used browser's localStorage to set the choosen user theme preference and update it while theme toggling.
Set HTML data-theme attribute accordingly with current user theme preference.
Note: The data-* attribute is used to store custom data private to the page or application. The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.
/ handles user theme preference change
const toggleThemeChange = () => {
if (isDark === false) {
localStorage.setItem("theme", "dark");
document
.getElementsByTagName("HTML")[0]
.setAttribute("data-theme", localStorage.getItem("theme"));
setIsDark(true);
} else {
localStorage.setItem("theme", "light");
document
.getElementsByTagName("HTML")[0]
.setAttribute("data-theme", localStorage.getItem("theme"));
setIsDark(false);
}
}
This method will get triggered when we toggle the theme from light to dark or vice-versa. It will update the state isDark based on current theme choosen and simultaneously update the data-theme attribute. data-theme attribute helps application to determine which color schemes need to applied either dark html[data-theme="dark"] or light html[data-theme="light"].
// templete for theme toggle button
return (
<label className="switch">
<input
type="checkbox"
defaultChecked={isDark}
onChange={() => toggleThemeChange()}
/>
<span className="slider round" />
</label>
)
returning the html toggle element for switching the theme.
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
<DarkModeToggle />
</a>
</header>
</div>
);
}
Add this DarkModeToggle component wherever you want to place it.
I am using TypeScript in React. I would like to create custom alerts and add to them images. I used
this method:
private alert() {
alert("This is an Alert Dialog");
}
Do you have any idea how to customize it?
Thans in advance for tips.
What you may want to look for is a modal box,
as you could style that so display alerts.
This page can help you get started:
https://www.w3schools.com/howto/howto_css_modals.asp
Or look into bootstrap which simplifies modals a lot:
https://getbootstrap.com/docs/4.0/components/modal/
The alert box is a system object, and not subject to CSS. You might want to use a third party library for that or add your own alert popup. Either way you can't style the default alert box.
You need to use modals. Here it is a sample:
import React from "react";
export const Modal = ({modalContent, style}) => {
return (
<div className="modal" style={style}>
{modalContent}
</div>
);
};
And usage is like this:
import { Modal } from '../Shared/Modal';
....
{this.state.Modal && <Modal style={{ animation: "fadeIn 1s, scaleUp 1s" }}
modalContent={
<div className="Add-BillRange">
<h1> MODAL </h1>
</div>
}
/>}
this.state.Modal controls if the modal should be showed or not.
I have an issue with Kendos tooltips on Goole Chrome. I need to add tooltip on button which have an icon, but when i hover on the icon the tooltip won't appear. When i hover somewhere between the icon it works, but I need tooltip on whole button. I meeting this problem only on Chrome, on IE or Firefox its works fine.. I trying something like this:
import React from 'react';
import ReactDOM from 'react-dom';
import { Tooltip } from '#progress/kendo-react-tooltip';
import { Button } from "#progress/kendo-react-buttons";
class App extends React.Component {
render() {
let tooltip = null;
return (
<div>
<div
onMouseOver={event => tooltip && tooltip.handleMouseOver(event)}
onMouseLeave={event => tooltip && tooltip.handleMouseLeave(event)}
>
<Button
className="k-button"
title="Tooltip message"
icon="paste"></Button>
<Tooltip ref={(el) => tooltip = el} anchorElement="target" position="right" />
</div>
</div>
);
}
}
ReactDOM.render(
<App />, document.querySelector('my-app'));
I also tried use html "button" instead of Kendo "Button", but with the same result.
This occurs because the icon is placed inside a span element which does not have a title. By default in Chrome, if an element does not have a title, but its parent does, the browser will show the tooltip. This will come to the KendoReact Tooltip as well:
enter link description here
А current option is to set a title to the icon as well:
componentDidMount() {
document.getElementsByClassName('k-i-paste')[0].setAttribute('title', "Tooltip message")
}
Not sure your purpose for the ref etc...
But this has worked for me, without the ref
anchorElement="target"
Of course, the onClick and the {siteName} are not included but you could use that as an example. Hope it helps
A bit late to this one, but I'd thought I'd answer as I've got another way. Seeing as the button handles the click event, the pointer-events can be taken off of the span, and then the tooltip displays no matter where you hover on the button.
I added this to my App.scss file.
.k-button > .k-icon {
pointer-events: none;
}