Please let me know where have I done wrong in this exercise. Thanks.
Here are the codes for your info:
App.tsx
===
CODE
import React from "react";
import "./App.css";
function App() {
return(
<div className="App">
<nav className="navigation">Nav</nav>
<div className="sidebar">Sidebar</div>
<div className="leftmenu">Left Menu</div>
<main className="content">Main</main>
<div className="rightmenu">Right Menu</div>
</div>
);
}
export default App;
App.css
===
CODE
:root {
--min-screen-height: 1000px;
}
.App {
margin: 0 auto;
max-width: 1200px;
display: grid;
grid-template-columns: 0.7fr 0.9fr 1.5fr 0.9fr;
grid-template-rows: 2.75rem 3fr;
grid-template-areas: "nav nav nav nav" "sidebar leftmenu content rightmenu";
gap: 0.75rem 0.4rem;
}
.navigation {
grid-area: nav;
}
.sidebar {
min-height: var(--min-screen-height);
grid-area: sidebar;
background-color: aliceblue;
}
.leftmenu {
grid-area: leftmenu;
background-color: skyblue;
}
.content {
min-height: var(--min-screen-height);
grid-area: content;
background-color: blanchedalmond;
}
.rightmenu {
grid-area: rightmenu;
background-color: coral;
}
@media screen and (orientation: portrait) and (max-width: 768px) {
.App {
grid-template-columns: 1fr;
grid-template-areas: "nav" "content";
}
}
src/components/RightMenu.tsx
===
CODE
import React from "react";
import { useWindowDimensions } from "../hooks/useWindowDimensions";
const RightMenu = () => {
const { width } = useWindowDimensions();
if (width <= 768) {
return null;
}
return <div className="rightmenu">RightMenu</div>;
};
export default RightMenu;
src/hooks/useWindowsDimensions.ts
===
CODE
import { useState, useEffect } from "react";
export interface WindowDimension {
height: number;
width: number;
}
export const useWindowDimensions = (): WindowDimension => {
const [dimension, setDimension] = useState<WindowDimension>({
height: 0,
width: 0,
});
const handleResize = () => {
setDimension({
height: window.innerHeight,
width: window.innerWidth,
});
};
useEffect(() => {
window.addEventListener("resize", handleResize);
handleResize();
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return dimension;
};