Merge pull request #138 from Alt-Org/leo/feature/103-update-main-page…

…-to-have-an-intro-component Leo/feature/103 update main page to have an intro component
Alt-Org · Oct 4, 2024 · 861e56b · 861e56b
2 parents 44bbdac + 638eca9
commit 861e56b
Show file tree

Hide file tree

Showing 24 changed files with 203 additions and 58 deletions.
diff --git a/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.module.scss b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.module.scss
@@ -0,0 +1,16 @@
+.intro{
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #111;
+  color: white;
+  text-align: center;
+  font-size: 24px;
+  //background: url('') no-repeat center center;
+  background-size: cover;
+  z-index: 1;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+
+}
diff --git a/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.tsx b/frontend-next-migration/src/app/[lng]/(home)/_intro/Intro.tsx
@@ -0,0 +1,32 @@
+import {forwardRef} from "react";
+import {Button, ButtonTheme} from "@/shared/ui/Button";
+import cls from "./Intro.module.scss";
+
+type Props = {
+    scrollToContent: () => void;
+};
+
+const Intro = forwardRef<HTMLDivElement, Props>((props, ref) => {
+    const { scrollToContent } = props;
+    return (
+        <div ref={ref} className={cls.intro}>
+            <h1>
+                Welcome to our website!
+            </h1>
+            <p>
+                Scroll down to see more
+            </p>
+            <Button
+                onClick={scrollToContent}
+                theme={ButtonTheme.Graffiti}
+                withScalableLink
+            >
+                Scroll Down
+            </Button>
+        </div>
+    );
+});
+
+Intro.displayName = "IntroComponent";
+
+export default Intro;
diff --git a/frontend-next-migration/src/app/[lng]/(home)/_useScrollHandler.ts b/frontend-next-migration/src/app/[lng]/(home)/_useScrollHandler.ts
@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+
+export const _useScrollHandler = (introRef: React.RefObject<HTMLDivElement>) => {
+    const [isScrollbarHidden, setIsScrollbarHidden] = useState(true);
+
+    const updateScrollbarVisibility = () => {
+        const isBelowIntro = window.scrollY > (introRef.current?.clientHeight || window.innerHeight);
+        setIsScrollbarHidden(!isBelowIntro);
+    };
+
+    const disableUserInteraction = () => {
+        document.body.style.pointerEvents = 'none';
+        document.body.style.userSelect = 'none';
+        document.body.style.overflow = 'hidden';
+    };
+
+    const enableUserInteraction = () => {
+        document.body.style.pointerEvents = '';
+        document.body.style.userSelect = '';
+        document.body.style.overflow = '';
+    };
+
+    const scrollToIntroOrContent = (lastScrollY: { value: number }) => {
+        const currentScrollY = window.scrollY;
+        const scrollDirection = currentScrollY > lastScrollY.value ? 'down' : 'up';
+        lastScrollY.value = currentScrollY;
+
+        if (introRef.current) {
+            const introBottom = introRef.current.clientHeight;
+
+            if (scrollDirection === 'up' && window.scrollY <= introBottom) {
+                disableUserInteraction();
+                setTimeout(() => {
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    setTimeout(() => {
+                        enableUserInteraction();
+                    }, 500);
+                }, 100);
+            }
+
+            if (scrollDirection === 'down' && window.scrollY < introBottom) {
+                disableUserInteraction();
+                setTimeout(() => {
+                    window.scrollTo({
+                        top: introBottom + 1,
+                        behavior: 'smooth',
+                    });
+                    setTimeout(() => {
+                        enableUserInteraction();
+                    }, 500);
+                }, 100);
+            }
+        }
+    };
+
+    useEffect(() => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+
+        let lastScrollY = { value: 0 };
+        const handleScroll = () => {
+            updateScrollbarVisibility();
+            scrollToIntroOrContent(lastScrollY);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
+    const scrollToContent = () => {
+        if (introRef.current) {
+            disableUserInteraction();
+            window.scrollTo({
+                top: introRef.current.clientHeight + 1,
+                behavior: 'smooth',
+            });
+            setTimeout(() => {
+                enableUserInteraction();
+            }, 500);
+        }
+    };
+
+    return { isScrollbarHidden, scrollToContent };
+};
diff --git a/frontend-next-migration/src/app/[lng]/(home)/layout.tsx b/frontend-next-migration/src/app/[lng]/(home)/layout.tsx
@@ -1,19 +1,40 @@
-import {ReactNode} from "react";
-import {Navbar} from "@/widgets/Navbar";
-import {Footer} from "@/widgets/Footer";
-import {ScrollTop} from "@/features/ScrollTop";
+'use client'
+import { ReactNode, useRef } from 'react';
+import { Navbar } from '@/widgets/Navbar';
+import { Footer } from '@/widgets/Footer';
+import { ScrollTop } from '@/features/ScrollTop';
+import Intro from './_intro/Intro';
+import { _useScrollHandler } from './_useScrollHandler';
+
 
 type Props = {
     children: ReactNode;
-}
+};
+
+export default function HomeLayout({ children }: Props) {
+    const introRef = useRef<HTMLDivElement>(null);
+    const { isScrollbarHidden, scrollToContent} = _useScrollHandler(introRef);
 
-export default function HomeLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
-            {children}
-            <Footer />
-            <ScrollTop />
+            <Intro scrollToContent={scrollToContent} ref={introRef}/>
+            <>
+                <Navbar />
+                {children}
+                <Footer />
+                <ScrollTop />
+            </>
+            <style jsx global>{`
+                html {
+                    scrollbar-width: ${isScrollbarHidden ? 'none' : 'auto'};
+                }
+                body {
+                    -ms-overflow-style: ${isScrollbarHidden ? 'none' : 'auto'};
+                }
+                body::-webkit-scrollbar {
+                    display: ${isScrollbarHidden ? 'none' : 'block'};
+                }
+            `}</style>
         </>
-    )
-}
+    );
+}
diff --git a/frontend-next-migration/src/app/[lng]/about/layout.tsx b/frontend-next-migration/src/app/[lng]/about/layout.tsx
@@ -9,7 +9,7 @@ type Props = {
 export default function AboutLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar/>
             {children}
             <Footer />
         </>

diff --git a/frontend-next-migration/src/app/[lng]/comics/layout.tsx b/frontend-next-migration/src/app/[lng]/comics/layout.tsx
@@ -10,7 +10,7 @@ type Props = {
 export default function ComicsLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar />
             {children}
             <Footer />
         </>

diff --git a/frontend-next-migration/src/app/[lng]/coming/layout.tsx b/frontend-next-migration/src/app/[lng]/coming/layout.tsx
@@ -11,7 +11,7 @@ type Props = {
 export default function ComingLayout({ children }: Props) {
   return (
     <>
-      <Navbar overlaid />
+      <Navbar/>
       {children}
       <FeedbackSideButton />
       <HorizontalLines />

diff --git a/frontend-next-migration/src/app/[lng]/data-policy/layout.tsx b/frontend-next-migration/src/app/[lng]/data-policy/layout.tsx
@@ -10,7 +10,7 @@ type Props = {
 export default function Layout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar/>
             {children}
             <Footer />
             <ScrollTop />

diff --git a/frontend-next-migration/src/app/[lng]/hero-development/layout.tsx b/frontend-next-migration/src/app/[lng]/hero-development/layout.tsx
@@ -11,7 +11,7 @@ type Props = {
 export default function HeroDevelopmentLayout({ children }: Props) {
   return (
     <>
-      <Navbar overlaid />
+      <Navbar />
       {children}
       <FeedbackSideButton />
       <HorizontalLines />

diff --git a/frontend-next-migration/src/app/[lng]/heroes/layout.tsx b/frontend-next-migration/src/app/[lng]/heroes/layout.tsx
@@ -10,7 +10,7 @@ interface Props {
 export default function Layout({ children}: Props) {
     return (
         <>
-            <Navbar overlaid={true} />
+            <Navbar/>
             {children}
             <HorizontalLines />
             <Footer />

diff --git a/frontend-next-migration/src/app/[lng]/news/layout.tsx b/frontend-next-migration/src/app/[lng]/news/layout.tsx
@@ -11,7 +11,7 @@ type Props = {
 export default function NewsLayout({ children }: Props) {
   return (
     <>
-      <Navbar overlaid />
+      <Navbar/>
       {children}
       <HorizontalLines />
       <Footer />

diff --git a/frontend-next-migration/src/app/[lng]/peli/layout.tsx b/frontend-next-migration/src/app/[lng]/peli/layout.tsx
@@ -9,7 +9,7 @@ type Props = {
 export default function GameLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid/>
+            <Navbar/>
             <div style={{paddingTop: "20px"}}></div>
             {children}
             <Footer/>

diff --git a/frontend-next-migration/src/app/[lng]/picture-galleries/layout.tsx b/frontend-next-migration/src/app/[lng]/picture-galleries/layout.tsx
@@ -9,7 +9,7 @@ type Props = {
 export default function PictureGalleriasLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar />
             {children}
             <Footer />
         </>

diff --git a/frontend-next-migration/src/app/[lng]/privacy/layout.tsx b/frontend-next-migration/src/app/[lng]/privacy/layout.tsx
@@ -9,7 +9,7 @@ type Props = {
 export default function PrivacyLayout({ children }: Props) {
   return (
     <>
-      <Navbar overlaid navBarType={'Privacy'} />
+      <Navbar navBarType={'Privacy'} />
       {children}
       <Footer />
     </>

diff --git a/frontend-next-migration/src/app/[lng]/profile/layout.tsx b/frontend-next-migration/src/app/[lng]/profile/layout.tsx
@@ -9,7 +9,7 @@ type Props = {
 export default function Layout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar />
             {children}
             <Footer />
         </>

diff --git a/frontend-next-migration/src/app/[lng]/team/layout.tsx b/frontend-next-migration/src/app/[lng]/team/layout.tsx
@@ -10,7 +10,7 @@ type Props = {
 export default function TeamLayout({children}: Props) {
     return (
         <>
-            <Navbar overlaid />
+            <Navbar />
             {children}
             <ScrollTop />
         </>

diff --git a/frontend-next-migration/src/preparedPages/CookiesPage/ui/CookiesPage.tsx b/frontend-next-migration/src/preparedPages/CookiesPage/ui/CookiesPage.tsx
@@ -28,7 +28,8 @@ const CookiesPage = (props: Props) => {
 
   return (
     <div className={classNames(cls.pageContainer)}>
-      <Navbar overlaid={true} navBarType={'Cookies'} />
+        {/*//todo mow to layout*/}
+      <Navbar navBarType={'Cookies'} />
 
       <WikiContentWithSidebar sections={sections} />
       <div>

diff --git a/frontend-next-migration/src/preparedPages/GameArtPage/ui/GameArtPage.tsx b/frontend-next-migration/src/preparedPages/GameArtPage/ui/GameArtPage.tsx
@@ -40,7 +40,8 @@ const GameArtPackagePage = (props: Props) => {
 
   return (
     <div className={classNames(cls.pageContainer, combinedModCss)}>
-      <Navbar overlaid={true} navBarType={'GameArt'} />
+      {/*//todo mow to layout*/}
+      <Navbar navBarType={'GameArt'} />
       <WikiContentWithSidebar sections={sections} />
       <div>
         <FeedbackSideButton />

diff --git a/frontend-next-migration/src/widgets/Navbar/ui/NavbarDesktopV2/NavbarDesktopV2.module.scss b/frontend-next-migration/src/widgets/Navbar/ui/NavbarDesktopV2/NavbarDesktopV2.module.scss
@@ -8,14 +8,12 @@
   font-weight: 500;
   top: 0;
   font-size: max(calc(20 * calc(min(750px, 100vw) / 750)), 12px);
-}
-
-.overlayed {
-  position: absolute;
+  margin-top: 5px;
+  position: relative;
 }
 
 .fixed {
-  position: fixed;
+  position: sticky;
 }
 
 .siteNavContentList {

diff --git a/frontend-next-migration/src/widgets/Navbar/ui/NavbarDesktopV2/NavbarDesktopV2.tsx b/frontend-next-migration/src/widgets/Navbar/ui/NavbarDesktopV2/NavbarDesktopV2.tsx
@@ -16,7 +16,6 @@ import { defineNs } from "../../model/defineNs";
 
 
 type NavbarProps = {
-    overlaid?: boolean;
     marginTop?: number;
     className?: string;
     navbarBuild: NavbarBuild
@@ -28,7 +27,6 @@ const NavbarDesktopV2 = (props: NavbarProps) => {
 
     const {
         navbarBuild,
-        overlaid = false,
         marginTop,
         className = '',
         navBarType = "Default"
@@ -52,7 +50,6 @@ const NavbarDesktopV2 = (props: NavbarProps) => {
         : {};
 
     const mods: Record<string, boolean> = {
-        [cls.overlayed]: overlaid && !isFixed,
         [cls.fixed]: isFixed,
     } as Record<string, boolean>;
 

diff --git a/frontend-next-migration/src/widgets/Navbar/ui/NavbarMain/NavbarMain.tsx b/frontend-next-migration/src/widgets/Navbar/ui/NavbarMain/NavbarMain.tsx
@@ -11,14 +11,13 @@ import { getNavbarBuildByTypeAndSize } from '../../model/getNavbarBuildByTypeAnd
 import useSizes from '@/shared/lib/hooks/useSizes';
 
 interface NavbarMainProps {
-  overlaid?: boolean;
   marginTop?: number;
   className?: string;
   navBarType?: NavBarType;
 }
 
 export const NavbarMain = memo((props: NavbarMainProps) => {
-  const { overlaid, marginTop, className, navBarType = 'Default' } = props;
+  const {marginTop, className, navBarType = 'Default' } = props;
   const { isMobileSize, isTabletSize } = useSizes();
   /* The line `const size = isMobileSize || isTabletSize ? 'mobile' : 'desktop';` is determining the
   size of the navbar based on the screen size. */
@@ -29,15 +28,13 @@ export const NavbarMain = memo((props: NavbarMainProps) => {
     <FixedProvider>
       {isMobileSize || isTabletSize ? (
         <NavbarMobileV2
-          overlaid={overlaid}
           marginTop={marginTop}
           className={className}
           navbarBuild={navbarBuild}
           navBarType={navBarType}
         />
       ) : (
         <NavbarDesktopV2
-          overlaid={overlaid}
           marginTop={marginTop}
           className={className}
           navbarBuild={navbarBuild}