feat: ✨ adding sticky section (#163)

Author: morethanmin

site.config.js

@@ -20,7 +20,7 @@ const CONFIG = {
   blog: {
     title: "morethan-log",
     description: "welcome to morethan-log!",
-    theme: "light", // ['light', 'dark', 'auto']
+    theme: "auto", // ['light', 'dark', 'auto']
   },
 
   // CONFIG configration (required)

src/components/Layout/Header/NavBar.tsx

@@ -1,14 +1,14 @@
-import Link from 'next/link'
+import Link from "next/link"
 
 const NavBar: React.FC = () => {
-  const links = [{ id: 1, name: 'About', to: '/about' }]
+  const links = [{ id: 1, name: "About", to: "/about" }]
   return (
     <div className="flex-shrink-0">
       <ul className="flex flex-row">
         {links.map((link) => (
           <li
             key={link.id}
-            className="block ml-4 text-black dark:text-gray-50 nav"
+            className="block ml-4 text-black text-gray-500 dark:text-white nav"
           >
             <Link href={link.to}>
               <a>{link.name}</a>

src/components/Layout/Header/index.tsx

@@ -1,5 +1,3 @@
-import { useRef } from "react"
-import CONFIG from "site.config"
 import NavBar from "./NavBar"
 import Logo from "./Logo"
 import ThemeToggle from "./ThemeToggle"
@@ -9,20 +7,18 @@ type Props = {
 }
 
 const Header: React.FC<Props> = ({ fullWidth }) => {
-  const navRef = useRef(null)
-
   return (
-    <div
-      className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-6 py-8 bg-opacity-60 max-w-6xl px-4 ${
-        fullWidth && "px-4 md:px-24"
-      }`}
-      id="sticky-nav"
-      ref={navRef}
-    >
-      <Logo />
-      <div className={`flex gap-3 items-center`}>
-        <ThemeToggle />
-        <NavBar />
+    <div className="shadow-sm transition sticky bg-white dark:bg-zinc-700 mb-2 md:mb-6 border-b-[1px] z-[40] border-gray-100 dark:border-gray-800 top-0">
+      <div
+        className={`m-auto px-4 h-12 w-full max-w-6xl flex justify-between items-center ${
+          fullWidth && "md:px-24"
+        }`}
+      >
+        <Logo />
+        <div className={`flex gap-3 items-center `}>
+          <ThemeToggle />
+          <NavBar />
+        </div>
       </div>
     </div>
   )

src/containers/Feed/components/cards/ProfileCard.tsx

@@ -10,7 +10,7 @@ const ProfileCard: React.FC<Props> = ({ className }) => {
   return (
     <div className={className}>
       <div className="p-1 mb-3 dark:text-white">💻 Profile</div>
-      <div className="w-full md:p-4 lg:p-4 rounded-2xl bg-white dark:bg-zinc-700 mb-9">
+      <div className="rounded-2xl bg-white dark:bg-zinc-700 w-full md:p-4 lg:p-4 mb-9">
         <div className="relative w-full after:content-[''] after:block after:pb-[100%]">
           <Image src={CONFIG.profile.image} layout="fill" alt="" />
         </div>

src/containers/Feed/components/lists/TagList.tsx

@@ -1,6 +1,6 @@
-import { TTags } from '@customTypes/index'
-import { useRouter } from 'next/router'
-import React from 'react'
+import { TTags } from "@customTypes/index"
+import { useRouter } from "next/router"
+import React from "react"
 
 type Props = {
   className?: string
@@ -35,11 +35,11 @@ const TagList: React.FC<Props> = ({ className, data }) => {
   return (
     <div className={className}>
       <div className="hidden lg:block p-1 mb-3 dark:text-white">🏷️ Tags</div>
-      <ul className="cursor-pointer gap-1 flex mobile-x-scroll lg:block mb-6">
+      <ul className="gap-1 flex mobile-x-scroll lg:block mb-6">
         {Object.keys(data).map((key) => (
           <li
             key={key}
-            className={`text-sm p-1 px-4 my-1 flex-shrink-0 rounded-xl text-gray-500 dark:text-white hover:bg-gray-200 dark:hover:bg-zinc-800 ${
+            className={`cursor-pointer text-sm p-1 px-4 my-1 flex-shrink-0 rounded-xl text-gray-500 dark:text-white hover:bg-gray-200 dark:hover:bg-zinc-800 ${
               key === currentTag &&
               "text-black bg-white dark:bg-zinc-700 hover:bg-white dark:hover:bg-zinc-700"
             }`}

src/containers/Feed/index.tsx

@@ -17,9 +17,21 @@ type Props = {
 const Feed: React.FC<Props> = ({ categories, tags, posts }) => {
   const [q, setQ] = useState("")
 
+  //   .box {
+  //     -ms-overflow-style: none;
+  //     scrollbar-width: none;
+  // }
+  // .box::-webkit-scrollbar {
+  //     display: none;
+  // }
   return (
     <div className="block md:grid grid-cols-12 gap-6">
-      <div className="hidden lg:block col-span-2">
+      <div
+        className="common-no-scroll-bar sticky top-[73px] hidden lg:block col-span-2 overflow-scroll"
+        style={{
+          height: "calc(100vh - 73px)",
+        }}
+      >
         {/* <Lists.CategoryList data={categories} /> */}
         <Lists.TagList data={tags} />
       </div>
@@ -31,7 +43,12 @@ const Feed: React.FC<Props> = ({ categories, tags, posts }) => {
         <Lists.PostList q={q} posts={posts} />
         <Footer className="block lg:hidden flex justify-center pb-8" />
       </div>
-      <div className="hidden lg:block lg:col-span-3">
+      <div
+        className="common-no-scroll-bar sticky top-[73px] hidden lg:block lg:col-span-3 overflow-scroll"
+        style={{
+          height: "calc(100vh - 73px)",
+        }}
+      >
         <Cards.ProfileCard />
         <Cards.ServiceCard />
         <Cards.ContactCard />

src/styles/globals.css

@@ -25,6 +25,14 @@ body::-webkit-scrollbar-thumb {
   background: rgba(45, 170, 219, 0.3);
 }
 
+.common-no-scroll-bar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.common-no-scroll-bar::-webkit-scrollbar {
+  display: none;
+}
+
 .wrapper {
   min-height: 100vh;
   display: flex;
@@ -34,34 +42,13 @@ body::-webkit-scrollbar-thumb {
   flex-direction: column;
 }
 
-.sticky-nav {
-  position: sticky;
-  z-index: 40;
-  top: -1px;
-  backdrop-filter: blur(5px);
-  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
-  border-bottom-color: transparent;
-}
-
-.remove-sticky {
-  position: unset;
-}
-
-.sticky-nav-full {
-  @apply border-b border-opacity-50 border-gray-200 dark:border-gray-600 dark:border-opacity-50;
-}
-
 .header-name {
   /* display: none; */
   opacity: 1;
   /* opacity: 0; */
   overflow: hidden;
 }
 
-.sticky-nav-full .nav {
-  @apply text-gray-600 dark:text-gray-300;
-}
-
 nav {
   flex-wrap: wrap;
   line-height: 1.5em;