chore(sidebar): use pseudo as gradient borders on items

rikhall1515 · May 15, 2024 · 09866ec · 09866ec
1 parent 7679873
commit 09866ec
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/components/header/sidebar/nav/index.tsx b/components/header/sidebar/nav/index.tsx
@@ -1,5 +1,7 @@
 import { FaBoxArchive, FaFileLines, FaPassport } from "react-icons/fa6";
 
+import { cn } from "@/lib/utils";
+
 import Privacy from "./privacy";
 import { SidebarItem } from "./sidebarItem";
 export default function Nav() {
@@ -8,23 +10,47 @@ export default function Nav() {
       <nav aria-label="In-page jump links" className="flex h-auto w-full flex-col font-bold">
         {/* <LoginDashboard /> */}
         <ul className="w-full">
-          <li className="w-full border-t-2 border-border">
+          <li
+            className={cn(
+              "relative w-full",
+              // "after:absolute after:bottom-[-0.125rem] after:h-[0.125rem] after:w-full",
+              // "after:bg-gradient-to-r after:from-border after:to-background after:to-50%",
+              "before:absolute before:top-[-0.125rem] before:h-[0.125rem] before:w-full",
+              "before:bg-gradient-to-r before:from-border before:to-background before:to-50%"
+            )}
+          >
             <SidebarItem href="/archive">
               <div className="ml-[2.125rem] w-6 fill-[inherit] stroke-[inherit]">
                 <FaBoxArchive className="h-6 w-6" />
               </div>
               <span>Archive</span>
             </SidebarItem>
           </li>
-          <li className="w-full border-t-2 border-border">
+          <li
+            className={cn(
+              "relative w-full",
+              "after:absolute after:bottom-[-0.125rem] after:h-[0.125rem] after:w-full",
+              "after:bg-gradient-to-r after:from-border after:to-background after:to-50%",
+              "before:absolute before:top-[-0.125rem] before:h-[0.125rem] before:w-full",
+              "before:bg-gradient-to-r before:from-border before:to-background before:to-50%"
+            )}
+          >
             <SidebarItem href="/terms">
               <div className="ml-[2.125rem] w-6 fill-[inherit] stroke-[inherit]">
                 <FaFileLines className="h-6 w-6" />
               </div>
               <span>Terms of Service</span>
             </SidebarItem>
           </li>
-          <li className="w-full border-y-2 border-border">
+          <li
+            className={cn(
+              "relative w-full",
+              "after:absolute after:bottom-[-0.125rem] after:h-[0.125rem] after:w-full",
+              "after:bg-gradient-to-r after:from-border after:to-background after:to-50%"
+              // "before:absolute before:top-[-0.125rem] before:h-[0.125rem] before:w-full",
+              // "before:bg-gradient-to-r before:from-border before:to-background before:to-50%"
+            )}
+          >
             <Privacy>
               <div className="ml-[2.125rem] w-6">
                 <FaPassport className="h-6 w-6" />

diff --git a/components/header/sidebar/nav/sidebarItem.tsx b/components/header/sidebar/nav/sidebarItem.tsx
@@ -22,8 +22,10 @@ export const SidebarItem = memo(function SidebarItem({
         className={cn(
           "group/sidebarItem relative h-[3.75rem] w-full transition-all",
           "flex items-center gap-3",
-          pathname === href ? "bg-primary text-primary-foreground" : "",
-          "hover:bg-primary"
+          pathname === href
+            ? "bg-gradient-to-r from-primary to-background to-80% text-primary-foreground"
+            : "",
+          "hover:bg-gradient-to-r hover:from-primary hover:via-primary hover:via-40% hover:to-background hover:to-60% hover:text-primary-foreground"
         )}
         tabIndex={isExpanded ? 0 : -1}
         onClick={toggle}

diff --git a/components/header/sidebar/topbar/index.tsx b/components/header/sidebar/topbar/index.tsx
@@ -10,7 +10,7 @@ export default function TopBar() {
           "relative box-border flex items-center justify-between",
           "mb-12 h-[4.5rem] w-full",
           "after:absolute after:bottom-[-0.125rem] after:h-[0.125rem] after:w-full",
-          "via-50% after:bg-gradient-to-r after:from-background after:via-primary after:to-background"
+          "after:bg-gradient-to-r after:from-primary after:to-background after:to-50%"
         )}
       >
         <SearchButton />

diff --git a/styles/components.css b/styles/components.css
@@ -179,7 +179,3 @@ header.scrolled {
 span.special {
   @apply bg-gradient-to-b from-foreground/40 to-foreground bg-clip-text text-transparent;
 }
-
-.sidebarMenu {
-  transform: translateX(calc(80 / (1+exp(-(--sidebar-menu-end-x - --sidebar-menu-start-x - 160)))));
-}