merge dev into main (rupali-codes#136)

* adding react-spinners * fix: fix LinksContainer typo * fix: fixed desgin-inspiration typo * fix: making links clickable for mobile and tablet view * fix: logo overlapping sidebar in mobile and tablet view * chore: fixing color contrast * chore: added new links * fix: color contrast * chore: added new links * chore: adding generators * fix: adding default link in backend subcategories * chore: adding tailblocks and proton * chore: sorting side navbar elements * chore: added steps for adding link/s into the hub * chore: added online code editos links * chore: ui improvements (rupali-codes#129) --------- Co-authored-by: Rohit <48400770+rohitdasu@users.noreply.github.com>
RAKESHKUMARSM · Feb 4, 2023 · e9eb23a · e9eb23a
1 parent a2bea59
commit e9eb23a
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 45 deletions.
diff --git a/components/SideNavbar/SideNavbar.tsx b/components/SideNavbar/SideNavbar.tsx
@@ -1,15 +1,16 @@
-import Link from 'next/link';
-import { createRef, useContext, useEffect } from 'react';
-import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
-import { GlobalContext } from '../../context/GlobalContext';
-import { sidebarData } from '../../database/data';
-import Logo from '../logo';
-import { SideNavbarElement } from './SideNavbarElement';
-import { SubCategories} from '../../types/index'
+import Link from "next/link";
+import { createRef, useContext, useEffect } from "react";
+import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
+import { GlobalContext } from "../../context/GlobalContext";
+import { sidebarData } from "../../database/data";
+import Logo from "../logo";
+import { SideNavbarElement } from "./SideNavbarElement";
+import classNames from "classnames";
+import { useTheme } from "next-themes";
 
 export const SideNavbar = () => {
   const { toggleNav, sidebar, openNav, closeNav } = useContext(GlobalContext);
-
+  const { theme } = useTheme();
   const menuRef = createRef<HTMLDivElement>();
   const menuBtnRef = createRef<HTMLButtonElement>();
 
@@ -27,16 +28,18 @@ export const SideNavbar = () => {
       }
     };
 
-    document.addEventListener('mousedown', handler);
+    document.addEventListener("mousedown", handler);
 
     return () => {
-      document.removeEventListener('mousedown', handler);
+      document.removeEventListener("mousedown", handler);
     };
   });
 
   return (
-    <div className={`lg:w-[290px] fixed top-0 left-0 w-full h-[87px] z-[10] lg:h-full`}>
-      <div className="flex bg-white p-4 justify-between dark:bg-gray-900">
+    <div
+      className={`lg:w-[290px] fixed top-0 left-0 w-full h-[87px] z-[10] lg:h-full`}
+    >
+      <div className="flex bg-gray-100 p-4 justify-between dark:bg-gray-900">
         <Link href={"/"}>
           <Logo className="text-3xl mb-4" />
         </Link>
@@ -49,37 +52,42 @@ export const SideNavbar = () => {
           <AiOutlineMenu
             size={24}
             className={`transition-all left-0 top-[5%] duration-[.5s] absolute ${
-              sidebar ? 'z-[-1] opacity-[0]' : 'opacity-[1] z-[1]'
+              sidebar ? "z-[-1] opacity-[0]" : "opacity-[1] z-[1]"
             }`}
           />
           <AiOutlineClose
             size={24}
             id="hamburger"
             className={`absolute left-0 top-[5%] transition-all duration-[1s] ${
               sidebar
-                ? 'opacity-[1] z-[1]'
-                : 'opacity-[0] rotate-[180deg] z-[-1]'
+                ? "opacity-[1] z-[1]"
+                : "opacity-[0] rotate-[180deg] z-[-1]"
             }`}
           />
         </button>
       </div>
       <div
         ref={menuRef}
-        className={`lg:translate-x-0 lg:w-full w-[75%] p-4 bg-base-300 transition-all whitespace-nowrap ease-in duration-300 overflow-x-hidden h-screen
-         ${
-           sidebar ? 'translate-x-[0%] ' : 'translate-x-[-100%]'
-         }  scrollColor z-[10] dark:bg-gray-900 dark:text-gray-300`}
+        className={classNames(
+          `lg:translate-x-0 lg:w-full w-[75%] p-4 bg-base-200 transition-all whitespace-nowrap ease-in duration-300 overflow-x-hidden h-screen z-[10] dark:bg-gray-900 dark:text-gray-300`,
+          sidebar ? "translate-x-[0%] " : "translate-x-[-100%]",
+          theme === "light" ? "scrollColorLight" : "scrollColorDark"
+        )}
       >
-        <div className=" flex flex-col justify-center gap-8 mb-4">
+        <div className="flex flex-col justify-center gap-8 mb-4">
           {sidebarData.map((item, index) => {
             return (
               <div key={index}>
                 <h2 key={index} className="uppercase mb-3 font-bold text-xl">
                   {item.category}
                 </h2>
-                {item.subcategory.sort((a,b) => (a.name.toUpperCase() < b.name.toUpperCase()) ? -1 : 1).map((list, i) => {
-                  return <SideNavbarElement key={i} {...list} />;
-                })}
+                {item.subcategory
+                  .sort((a, b) =>
+                    a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+                  )
+                  .map((list, i) => {
+                    return <SideNavbarElement key={i} {...list} />;
+                  })}
               </div>
             );
           })}

diff --git a/components/SideNavbar/SideNavbarElement.tsx b/components/SideNavbar/SideNavbarElement.tsx
@@ -1,8 +1,8 @@
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useContext } from 'react';
-import { GlobalContext } from '../../context/GlobalContext';
-import { SubCategories } from '../../types';
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import { GlobalContext } from "../../context/GlobalContext";
+import { SubCategories } from "../../types";
 
 export const SideNavbarElement = ({ name, url }: SubCategories) => {
   const router = useRouter();
@@ -16,7 +16,7 @@ export const SideNavbarElement = ({ name, url }: SubCategories) => {
         router.asPath === url
           ? "bg-gradient-to-r from-violet-900 to-violet-500 transition-all pl-5 text-gray-200"
           : ""
-      } collapse py-3 w-full hover:bg-gradient-to-l from-violet-900 to-violet-500 text-start border-b hover:pl-5 transition-all duration-300 rounded dark:border-gray-600`}
+      } collapse py-3 w-full hover:bg-gradient-to-l hover:text-gray-200 from-violet-900 to-violet-500 text-start border-b hover:pl-5 transition-all duration-300 rounded dark:border-gray-600`}
     >
       <div className="text-md font-medium uppercase">{name}</div>
     </Link>

diff --git a/styles/globals.css b/styles/globals.css
@@ -4,35 +4,60 @@
 
 /* scrollable */
 
-.scrollColor {
-    overflow-y: scroll;
+.scrollColorDark {
+  overflow-y: scroll;
 }
 
-
 /* width */
 
-.scrollColor::-webkit-scrollbar {
-    width: 10px;
+.scrollColorDark::-webkit-scrollbar {
+  width: 8px;
 }
 
-
 /* Track */
 
-.scrollColor::-webkit-scrollbar-track {
-    background: transparent;
+.scrollColorDark::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-
 /* Handle */
 
-.scrollColor::-webkit-scrollbar-thumb {
-    background: #202c46;
-    border-radius: 20px;
+.scrollColorDark::-webkit-scrollbar-thumb {
+  background: #202c46;
+  border-radius: 20px;
 }
 
+/* Handle on hover */
+
+.scrollColorDark::-webkit-scrollbar-thumb:hover {
+  background: #304269;
+}
+
+.scrollColorLight {
+  overflow-y: scroll;
+}
+
+/* width */
+
+.scrollColorLight::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+
+.scrollColorLight::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+
+.scrollColorLight::-webkit-scrollbar-thumb {
+  background: #bbb;
+  border-radius: 20px;
+}
 
 /* Handle on hover */
 
-.scrollColor::-webkit-scrollbar-thumb:hover {
-    background: #304269;
-}
+.scrollColorLight::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
+}