Merge pull request #230 from Souvik34/truth-redefined-again

Scroll bar added
kossiitkgp · Jan 12, 2024 · 8b97d22 · 8b97d22
2 parents 8224cc1 + bb45785
commit 8b97d22
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -31,6 +31,7 @@ function BrandLogo() {
   );
 }
 
+
 function getNavbarLinkClasses(isMobile: boolean, isActive: boolean = false) {
   return (
     (isMobile
@@ -107,7 +108,6 @@ function LoginButton({ isMobile }: { isMobile: boolean }) {
 
 function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
   useEffect(() => {
     setMobileMenuOpen(false);
   }, [location.pathname]);
@@ -119,9 +119,8 @@ function Navbar() {
   return (
     <div className="fixed inset-x-0 z-[210] w-full">
       <nav
-        className={`flex shadow-md mt-4 items-center justify-between max-w-7xl gap-4 mx-auto border border-[#FFFFFF]/[0.16] px-4 py-2 rounded-lg w-[95%] inset-x-0 backdrop-blur-md z-50 ${
-          mobileMenuOpen ? "hidden" : ""
-        }`}
+        className={`flex shadow-md mt-4 items-center justify-between max-w-7xl gap-4 mx-auto border border-[#FFFFFF]/[0.16] px-4 py-2 rounded-lg w-[95%] inset-x-0 backdrop-blur-md z-50 ${mobileMenuOpen ? "hidden" : ""
+          }`}
       >
         <BrandLogo />
         <div className="lg:hidden ml-auto -mr-5">
@@ -135,9 +134,8 @@ function Navbar() {
 
         <div className={`${mobileMenuOpen ? "hidden" : null}`}>
           <ul
-            className={`lg:flex lg:items-center lg:w-auto lg:space-x-6 ${
-              mobileMenuOpen ? "block" : "hidden"
-            }`}
+            className={`lg:flex lg:items-center lg:w-auto lg:space-x-6 ${mobileMenuOpen ? "block" : "hidden"
+              }`}
           >
             {LinksList(false)}
 
@@ -182,3 +180,4 @@ function MobileNavbar({ toggleMobileMenu }: { toggleMobileMenu: () => void }) {
 }
 
 export default Navbar;
+
diff --git a/src/main.css b/src/main.css
@@ -9,8 +9,29 @@
   color: #c1c1c1;
   font-family: "Ubuntu", sans-serif;
   font-weight: 500;
+  scrollbar-width: 5px;
+  scrollbar-color: #008aff #0000;
+  background-color: transparent;
 }
 
 body {
   background: url("./assets/stars.png"), #0a0a19;
 }
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 5px;
+  background: transparent;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+  border-radius: 5px;
+  background: none;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: linear-gradient(to top, #008aff, #00ffe7);
+  border-radius: 10px;
+
+}