move nav to top

WJTB-Radio · Apr 15, 2024 · 7209adc · 7209adc
1 parent 22b892d
commit 7209adc
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 35 deletions.
diff --git a/src/app/(pages)/global.module.scss b/src/app/(pages)/global.module.scss
@@ -70,16 +70,20 @@
 	border-bottom-style: none;
 }
 
+.main_content_minimal {
+	background-color: var(--bg-color);
+}
+
 @media (max-width: 1000px) {
 	.main_content {
 		border: none;
-		border-top: var(--accent-color) solid 0.25rem;
 		border-radius: 0;
+		border-top: 0.25rem solid var(--accent-color);
 		padding: 2rem 1rem;
 		margin-top: 0rem;
 	}
 	.main_content_minimal {
-		border-top: var(--accent-color) solid 0.25rem;
+		border-top: 0.25rem solid var(--accent-color);
 	}
 }
 

diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx
@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.scss";
-import Players from "./players/players";
-import Schedule from "./schedule";
-import styles from "./layout.module.scss";
-import Navigation from "./navigation";
-import RememberTheme from "./remember_theme";
-import Script from "next/script";
+import { ReactNode } from "react";
+import Layout from "./layout_client";
 
 export const metadata: Metadata = {
 	title: "WJTB Radio",
@@ -15,7 +11,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
 	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: ReactNode
 }>) {
 	let basePath = "/";
 	if(process.env.NEXT_PUBLIC_BASE_PATH != null) {
@@ -24,14 +20,9 @@ export default function RootLayout({
 	return (
 		<html lang="en">
 			<body>
-				<Script src={basePath+"js/smoothscroll.min.js"} />
-				<RememberTheme />
-				<div className={styles.players}>
-					<Players />
-					<Schedule />
-				</div>
-				<Navigation />
-				{children}
+				<Layout>
+					{children}
+				</Layout>
 			</body>
 		</html>
 	);

diff --git a/src/app/(pages)/layout_client.tsx b/src/app/(pages)/layout_client.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import "./globals.scss";
+import { ReactNode } from "react";
+import { useWidth } from "../utils/use_width";
+import Script from "next/script";
+import RememberTheme from "./remember_theme";
+import Players from "./players/players";
+import Schedule from "./schedule";
+import Navigation from "./navigation";
+import styles from "./layout.module.scss";
+
+export default function Layout({
+	children
+}: Readonly<{
+	children: ReactNode
+}>) {
+	let basePath = "/";
+	if(process.env.NEXT_PUBLIC_BASE_PATH != null) {
+		basePath = process.env.NEXT_PUBLIC_BASE_PATH.endsWith("/")?process.env.NEXT_PUBLIC_BASE_PATH:process.env.NEXT_PUBLIC_BASE_PATH+"/";
+	}
+	let width = useWidth().width;
+	return (
+		<>
+			<Script src={basePath+"js/smoothscroll.min.js"} />
+			<RememberTheme />
+			<div className={styles.players}>
+				<Players />
+				{width < 1000 ? <Navigation /> : undefined}
+				<Schedule />
+			</div>
+			{width >= 1000 ? <Navigation /> : undefined}
+			{children}
+		</>
+	);
+}
diff --git a/src/app/(pages)/navigation.module.scss b/src/app/(pages)/navigation.module.scss
@@ -105,7 +105,7 @@
 	left: 0;
 	border: var(--button-width) solid transparent;
 	border-left-color: var(--text-color);
-	transition: border-left-color 0.15s ease-out, rotate 0.15s ease-out;
+	transition: border-left-color 0.15s ease-out, rotate 0.05s ease-out;
 	rotate: 0deg;
 	--overall-scale: 1.5;
 	scale: calc(1.0 * var(--overall-scale)) calc(0.5 * var(--overall-scale));

diff --git a/src/app/(pages)/navigation.tsx b/src/app/(pages)/navigation.tsx
@@ -5,6 +5,7 @@ import styles from "./navigation.module.scss";
 import { usePathname } from "next/navigation";
 import { Content, Root, Trigger } from "@radix-ui/react-collapsible";
 import { useCallback, useEffect, useState } from "react";
+import { useWidth } from "../utils/use_width";
 
 function NavLink(props: {href: string, currentPath: string, onClick: () => void, children: React.ReactNode}) {
 	return (
@@ -14,21 +15,6 @@ function NavLink(props: {href: string, currentPath: string, onClick: () => void,
 	);
 }
 
-const defaultWidth = 2000;
-// from https://blog.logrocket.com/developing-responsive-layouts-with-react-hooks/
-const useWidth = () => {
-	const [width, setWidth] = useState(defaultWidth);
-
-	useEffect(() => {
-		const handleWindowResize = () => setWidth(window.innerWidth);
-		window.addEventListener("resize", handleWindowResize);
-		handleWindowResize();
-		return () => window.removeEventListener("resize", handleWindowResize);
-	}, []);
-
-	return { width };
-}
-
 const pathNames: {[id: string]: string} = {
 	"/": "Home",
 	"/request/": "Request Us",

diff --git a/src/app/(pages)/schedule.module.scss b/src/app/(pages)/schedule.module.scss
@@ -21,7 +21,6 @@
 		max-height: 20rem;
 		border: unset;
 		border-top: 0.25rem solid var(--accent-color);
-		border-bottom: 0.25rem solid var(--accent-color);
 		font-size: 1.25rem;
 	}
 	.hide_on_mobile {

diff --git a/src/app/(pages)/shows/shows.module.scss b/src/app/(pages)/shows/shows.module.scss
@@ -236,6 +236,5 @@
 	top: var(--time);
 	width: 100%;
 	height: 0;
-	z-index: -1;
 	border-bottom: 0.25rem dotted var(--text-light-color);
 }
diff --git a/src/app/(pages)/themes/themes.module.scss b/src/app/(pages)/themes/themes.module.scss
@@ -1,6 +1,7 @@
 @use "../global.module.scss";
 
 .container {
+	@extend .main_content_minimal;
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 1rem;

diff --git a/src/app/utils/use_width.ts b/src/app/utils/use_width.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export const defaultWidth = 2000;
+
+// from https://blog.logrocket.com/developing-responsive-layouts-with-react-hooks/
+export function useWidth() {
+	const [width, setWidth] = useState(defaultWidth);
+
+	useEffect(() => {
+		const handleWindowResize = () => setWidth(window.innerWidth);
+		window.addEventListener("resize", handleWindowResize);
+		handleWindowResize();
+		return () => window.removeEventListener("resize", handleWindowResize);
+	}, []);
+
+	return { width };
+}