added progress scrollbar (#549)

* added progress scrollbar * fixed build error
UniKonf · Aug 1, 2023 · 23116cf · 23116cf
1 parent 8da743e
commit 23116cf
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 93 deletions.
diff --git a/git b/git
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -5,55 +5,57 @@ import { FC } from 'react';
 
 const Hero: FC = () => {
   return (
-    <section
-      id="heroSection"
-      className="relative mb-5 flex w-full flex-col items-center  justify-center py-[120px] sm:py-[160px] lg:py-[200px]"
-    >
-      {/* background image and overlay */}
-      <div className="bg">
-        <Image
-          src="/images/homepage/heroSection.jpg"
-          alt="hero-image"
-          layout="fill"
-          className="object-cover"
-          loading="lazy"
-        />
-        <div className="overlay bg-gradient-to-b from-black to-color-purple opacity-60"></div>
-      </div>
-      {/* text */}
-      <div className="layout z-10">
-        <div className="text-center font-normal text-white">
-          <p className="mb-2 text-2xl font-normal sm:text-3xl lg:mb-4 lg:text-4xl">
-            All the online
-          </p>
-          <h1 className="text-3xl font-medium sm:text-5xl lg:text-7xl">
-            CONFERENCES, WORKSHOPS & EVENTS <br />
-          </h1>
-          <p className="mt-2 text-2xl font-normal sm:text-3xl lg:mt-4 lg:text-4xl">
-            at one place.
-          </p>
+    <>
+      <section
+        id="heroSection"
+        className="relative mb-5 flex w-full flex-col items-center  justify-center py-[120px] sm:py-[160px] lg:py-[200px]"
+      >
+        {/* background image and overlay */}
+        <div className="bg">
+          <Image
+            src="/images/homepage/heroSection.jpg"
+            alt="hero-image"
+            layout="fill"
+            className="object-cover"
+            loading="lazy"
+          />
+          <div className="overlay bg-gradient-to-b from-black to-color-purple opacity-60"></div>
         </div>
-        {/* action buttons */}
-        <div className="mt-[2rem] flex flex-wrap justify-center gap-[1rem] md:gap-[4rem]">
-          <ButtonLink
-            href="#upcoming-events"
-            openNewTab={false}
-            className="lg:px-10 lg:text-lg"
-          >
-            Explore Events
-          </ButtonLink>
+        {/* text */}
+        <div className="layout z-10">
+          <div className="text-center font-normal text-white">
+            <p className="mb-2 text-2xl font-normal sm:text-3xl lg:mb-4 lg:text-4xl">
+              All the online
+            </p>
+            <h1 className="text-3xl font-medium sm:text-5xl lg:text-7xl">
+              CONFERENCES, WORKSHOPS & EVENTS <br />
+            </h1>
+            <p className="mt-2 text-2xl font-normal sm:text-3xl lg:mt-4 lg:text-4xl">
+              at one place.
+            </p>
+          </div>
+          {/* action buttons */}
+          <div className="mt-[2rem] flex flex-wrap justify-center gap-[1rem] md:gap-[4rem]">
+            <ButtonLink
+              href="#upcoming-events"
+              openNewTab={false}
+              className="lg:px-10 lg:text-lg"
+            >
+              Explore Events
+            </ButtonLink>
 
-          <ButtonLink
-            href="#newsletter-section"
-            openNewTab={false}
-            variant="outline"
-            className="lg:px-10 lg:text-lg "
-          >
-            Subscribe
-          </ButtonLink>
+            <ButtonLink
+              href="#newsletter-section"
+              openNewTab={false}
+              variant="outline"
+              className="lg:px-10 lg:text-lg "
+            >
+              Subscribe
+            </ButtonLink>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
   );
 };
 

diff --git a/src/components/Search/SearchBar.tsx b/src/components/Search/SearchBar.tsx
@@ -9,6 +9,7 @@ import { FC, useContext } from 'react';
  */
 const SearchBar: FC = () => {
   const { toggleSearchModal } = useContext(SettingsContext);
+
   return (
     <div
       className="flex cursor-pointer select-none gap-2 rounded-2xl border-2 border-transparent bg-primary/60 p-2 text-xl hover:border-base-content md:p-4"

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable simple-import-sort/imports */
 import clsxm from '@/lib/clsxm';
 import { SettingsContext } from '@/lib/context/settings';
-
+import { useEffect } from 'react';
 import { Auth } from '@/components/Auth/Auth';
 import IconLink from '@/components/links/IconLink';
 import NavLink from '@/components/links/NavLink';
@@ -35,57 +35,81 @@ const Menubar: FC<Props> = ({
   closeMenu,
 }) => {
   const { theme } = React.useContext(SettingsContext);
+
+  const progressBarHandler = () => {
+    const totalScroll = document.documentElement.scrollTop;
+    const windowHeight =
+      document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+    const scroll = `${totalScroll / windowHeight}`;
+    const progressBar = document.getElementById('progressBar');
+    progressBar?.classList.add('visible');
+    if (progressBar) {
+      progressBar.style.transform = `scale(${scroll},1)`;
+      progressBar.style.opacity = `${scroll}`;
+    }
+  };
+  useEffect(() => {
+    window.addEventListener('scroll', progressBarHandler);
+  });
   return (
-    <div
-      className={`${
-        theme === 'dark' ? 'bg-zinc-900' : 'bg-neutral-200'
-      } absolute top-0 h-screen w-72 transition-all duration-300 ease-in-out md:hidden ${style}`}
-    >
-      <div className="flex h-full flex-col justify-around">
-        <div className="flex flex-col gap-4 p-4">
-          {navigation.map((option, index) => (
-            <NavLink
-              key={index}
-              className="flex w-full items-center text-3xl"
-              href={option.href}
-              closeMenu={closeMenu} // Pass the closeMenu function as a prop
-            >
-              {option.label}
-            </NavLink>
-          ))}
-          <div className="mt-4 ">
-            <Auth
-              buttonClass={`${theme === 'light' && 'text-black'}`}
-              modal={modal}
-              setModal={setModal}
-              setStyle={setStyle}
-            />
-          </div>
+    <>
+      <div id="progressBarContainer">
+        <div id="progressBar">
+          <h1></h1>
         </div>
-        <div className="p-4">
-          <h1 className="text-3xl">Connect with us</h1>
-          <hr className="mt-2 border-neutral-700"></hr>
-          <div className="mt-4 flex gap-2">
-            <IconLink
-              href="https://github.com/UniKonf/vibey"
-              type="submit"
-              aria-label="Visit us on Github"
-              title="Github (External Link)"
-              className="gap-2 rounded-full "
-              icon={AiOutlineGithub}
-            />
-            <IconLink
-              href="https://twitter.com/vibeydotlive"
-              type="submit"
-              aria-label="Visit us on Twitter"
-              title="Twitter (External Link)"
-              className="gap-2 rounded-full "
-              icon={AiOutlineTwitter}
-            />
+      </div>
+      <div
+        className={`${
+          theme === 'dark' ? 'bg-zinc-900' : 'bg-neutral-200'
+        } absolute top-0 h-screen w-72 transition-all duration-300 ease-in-out md:hidden ${style}`}
+      >
+        <div className="flex h-full flex-col justify-around">
+          <div className="flex flex-col gap-4 p-4">
+            {navigation.map((option, index) => (
+              <NavLink
+                key={index}
+                className="flex w-full items-center text-3xl"
+                href={option.href}
+                closeMenu={closeMenu} // Pass the closeMenu function as a prop
+              >
+                {option.label}
+              </NavLink>
+            ))}
+            <div className="mt-4 ">
+              <Auth
+                buttonClass={`${theme === 'light' && 'text-black'}`}
+                modal={modal}
+                setModal={setModal}
+                setStyle={setStyle}
+              />
+            </div>
+          </div>
+          <div className="p-4">
+            <h1 className="text-3xl">Connect with us</h1>
+            <hr className="mt-2 border-neutral-700"></hr>
+            <div className="mt-4 flex gap-2">
+              <IconLink
+                href="https://github.com/UniKonf/vibey"
+                type="submit"
+                aria-label="Visit us on Github"
+                title="Github (External Link)"
+                className="gap-2 rounded-full "
+                icon={AiOutlineGithub}
+              />
+              <IconLink
+                href="https://twitter.com/vibeydotlive"
+                type="submit"
+                aria-label="Visit us on Twitter"
+                title="Twitter (External Link)"
+                className="gap-2 rounded-full "
+                icon={AiOutlineTwitter}
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -179,3 +179,30 @@ body {
   /* background:linear-gradient(135deg, #4285F4, #EA4335, #FBBC05); */
   background: linear-gradient(13deg, #db3236, #f4c20d, #3cba54, #4885ed);
 }
+/*////////////*/
+#progressBarContainer {
+  position: fixed;
+  z-index: 10;
+  background: #fff;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+#progressBar {
+  background: rgb(255, 94, 131);
+  transform-origin: top leftt;
+  transform: scale(0, 0);
+  opacity: 0;
+}
+
+#progressBar,
+#progressBarContainer {
+  height: 6px;
+}
+@media (max-width: 768px) {
+  #progressBar,
+  #progressBarContainer {
+    height: 3px;
+  }
+}