add: responsive topbar

lif31up · Jul 16, 2024 · 01f232d · 01f232d
1 parent d523d8d
commit 01f232d
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 18 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <TopBar data={{ title: "some title", desc: "some desc" }} />
+        <TopBar height={138} constraint={8} />
         <>{children}</>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 export default function Home() {
   return (
     <main>
-
+      <div style={{ height: "200vh" }} />
     </main>
   );
 }
diff --git a/component/common/HorizGallery.tsx b/component/common/HorizGallery.tsx
@@ -0,0 +1,10 @@
+import DefaultProps from "@/utils/DefaultProps";
+
+export default HorizGallery;
+
+function HorizGallery({children, styl}: DefaultProps<never>) {
+
+	return <section style={}>
+		{children}
+	</section>
+} // HroizGallery
diff --git a/component/feature/featureComps.tsx b/component/feature/featureComps.tsx
@@ -25,6 +25,7 @@ export function EffectComp({
   // pre-rendering area
   const index: string = prop0.toString();
 
+  if (!data) return <></>;
   const tailname: TailProperties = {
     box: "w-16 h-16",
     bg_border: "bg-white",

diff --git a/component/layout/TopBar.tsx b/component/layout/TopBar.tsx
@@ -1,23 +1,50 @@
+"use client";
+
 import DefaultProps from "@/utils/DefaultProps";
 import TailProperties, { TailClassName } from "@/styles/TailProperties";
+import { CSSProperties, useEffect } from "react";
 
-const TopBarData = {
-  title: "next template",
-  desc: "desc of layout",
-};
-export default function TopBar({
-  data,
-  className,
-}: DefaultProps<typeof TopBarData>) {
-  const { title, desc }: typeof TopBarData = data;
+interface TopBarProps extends DefaultProps<never> {
+  height: number;
+  constraint: number;
+} // TopBarProps
+export default function TopBar({ height, constraint, className }: TopBarProps) {
+  useEffect((): void => {
+    const topbar: HTMLElement | null = document.getElementById(topbarId);
+    if (topbar) {
+      topbar.style.height = `${height}px`;
+      topbar.style.transition = "height 0.75s ease-in-out";
+      window.addEventListener("scroll", (): void => {
+        if (window.scrollY > 0)
+          topbar.style.height = `${height - constraint}px`;
+        else topbar.style.height = `${height}px`;
+      }); // window
+    } // if
+  }, []);
 
+  const topbarId: string = "top-bar";
   const tailname: TailProperties = {
-    box: "w-full h-16",
-    bg_border: "bg-blue text-white",
+    box: "w-full  px-4",
+    bg_border: "bg-black text-slate-500",
+    layout: "grid",
+    etc: "fixed top-0 left-0",
+    anime_transit: "transition-height",
+  };
+  const layer: CSSProperties = {
+    width: "100%",
+    height: `${height}px`,
   };
   return (
-    <section className={`${TailClassName(tailname)} ${className}`}>
-      {title + " - " + desc}
+    <section
+      className={`${TailClassName(tailname)} ${className}`}
+      title="top-bar"
+      id={topbarId}
+    >
+      <div style={layer}>
+        <div></div>
+      </div>
+      <div style={layer}></div>
+      <div style={layer}></div>
     </section>
   );
 }
diff --git a/styles/TailProperties.ts b/styles/TailProperties.ts
@@ -10,6 +10,14 @@ export default interface TailProperties {
   etc?: string;
 }
 
-export function TailClassName(tailwindProperties: TailProperties) {
-  return `${tailwindProperties.position} ${tailwindProperties.bg_border} ${tailwindProperties.box} ${tailwindProperties.layout} ${tailwindProperties.typo} ${tailwindProperties.anime_transit} ${tailwindProperties.transform} ${tailwindProperties.interact}`;
+export function TailClassName(properties: TailProperties): string {
+  return `${properties.position ?? properties.position} ${
+    properties.bg_border ?? properties.bg_border
+  } ${properties.box ?? properties.box} ${
+    properties.layout ?? properties.layout
+  } ${properties.typo ?? properties.typo} ${
+    properties.anime_transit ?? properties.anime_transit
+  } ${properties.transform ?? properties.transform} ${
+    properties.interact ?? properties.interact
+  } ${properties.etc ?? properties.etc}`;
 }
diff --git a/utils/DefaultProps.ts b/utils/DefaultProps.ts
@@ -3,6 +3,6 @@ export default interface DefaultProps<T> {
   id?: string;
   title?: string;
   children?: any;
-  data: T;
+  data?: T;
   onClick?: (parm: any) => any;
 }