From 0effe6df40eb176170606b9ab914ca4e2fad7108 Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Wed, 3 Jan 2024 16:38:07 -0800
Subject: [PATCH] Added helpful comments
---
src/pages/_app.tsx | 11 ++++++++++-
1 file changed, 10 insertions(+), 1 deletion(-)
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 370bcb0b..4eedc5a5 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import Head from 'next/head';
import { AppProps } from 'next/app';
import Link from 'next/link';
import { useRouter } from 'next/router';
-import { useRef, useEffect} from 'react';
+import { useRef, useEffect } from 'react';
import './styles.css';
import styles from './MainLayout.module.css';
@@ -27,11 +27,16 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
useEffect(() => {
const resizeListener = () => {
+ // Whenever the window expands to greater than 768 pixels,
+ // set the panelContents to their maximum height.
if (window.innerWidth > 768) {
prevWindowWidth.current = window.innerWidth;
panelContentsRef.current.style.maxHeight =
panelContentsRef.current.scrollHeight + 'px';
}
+ // Else when the window resizes to less than 768 pixels
+ // and we haven't already gone under 768 pixels on the previous resize,
+ // then set the height of panelContents to 0.
if (window.innerWidth <= 768 && prevWindowWidth.current > 768) {
panelContentsRef.current.style.maxHeight = '0px';
}
@@ -43,6 +48,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
};
}, []);
+ // Style .panelContents when clicking the expand icon.
const stylePanelOnExpand = () => {
if (panelContentsRef.current) {
if (panelContentsRef.current.style.maxHeight === '0px') {
@@ -58,7 +64,10 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
}
};
+ //Style .panelContents when clicking on a link.
const stylePanelOnLink = () => {
+ // Only hide the panelContents when our window size is less than 768 pixels.
+ // Otherwise maintain the current layout of panelContents.
if (window.innerWidth <= 768) {
panelContentsRef.current.style.maxHeight = '0px';
panelContentsRef.current.style.overflow = 'hidden';