changes in svg in the sidebar

Author: Ciphrox

src/assets/icons/home.svg

@@ -8,27 +8,25 @@
     --header-height: 80px;
     --sidebar-width: 16ch;
     --timing: 0.42s;
-    --ease: linear(
-      0 0%,
-      0.0036 9.62%,
-      0.0185 16.66%,
-      0.0489 23.03%,
-      0.0962 28.86%,
-      0.1705 34.93%,
-      0.269 40.66%,
-      0.3867 45.89%,
-      0.5833 52.95%,
-      0.683 57.05%,
-      0.7829 62.14%,
-      0.8621 67.46%,
-      0.8991 70.68%,
-      0.9299 74.03%,
-      0.9545 77.52%,
-      0.9735 81.21%,
-      0.9865 85%,
-      0.9949 89.15%,
-      1 100%
-    );
+    --ease: linear(0 0%,
+        0.0036 9.62%,
+        0.0185 16.66%,
+        0.0489 23.03%,
+        0.0962 28.86%,
+        0.1705 34.93%,
+        0.269 40.66%,
+        0.3867 45.89%,
+        0.5833 52.95%,
+        0.683 57.05%,
+        0.7829 62.14%,
+        0.8621 67.46%,
+        0.8991 70.68%,
+        0.9299 74.03%,
+        0.9545 77.52%,
+        0.9735 81.21%,
+        0.9865 85%,
+        0.9949 89.15%,
+        1 100%);
     --sidebar-collapsed: 4rem;
     --sidebar-expanded: 16ch;
     --icon-size: 1.5rem;
@@ -53,7 +51,6 @@
     color: var(--primary);
     font-weight: 600;
     border-radius: 0.75rem;
-    margin: 0rem 1rem;
   }
 
   [popover] .nav--list__item:hover {
@@ -112,6 +109,10 @@
 
     & .nav--list__item {
       padding: 0.25rem;
+
+      & .text {
+        display: none;
+      }
     }
   }
 
@@ -224,6 +225,18 @@
     transition: opacity 0.2s;
   }
 
+  [popover] .nav--list__item a svg,
+  .menu-button svg {
+    flex-shrink: 0;
+    min-width: var(--icon-size);
+    min-height: var(--icon-size);
+  }
+
+  [popover] .placement-toggle,
+  .placement-toggle {
+    display: none !important;
+  }
+
   @media (max-width: 768px) {
     button.hider {
       height: 48px;
@@ -397,14 +410,18 @@
         opacity: 0;
       }
     }
-  }
 
-  [data-placement="top"] [popovertarget="nav"]:not(.hider) {
-    top: 1rem;
-    right: 1rem;
+    [popover] .placement-toggle,
+    .placement-toggle {
+      display: grid !important;
+    }
+
+    .placement-toggle {
+      display: grid;
+    }
   }
 
-  [data-placement="bottom"] [popovertarget="nav"]:not(.hider) {
+  [popovertarget="nav"]:not(.hider) {
     top: unset;
     bottom: 1rem;
     left: 1rem;
@@ -473,4 +490,4 @@
   [data-debug="false"] .debug-toggle g:first-of-type {
     display: block;
   }
-}
+}

src/assets/icons/placeholder.svg

@@ -1,5 +1,4 @@
 ---
-//import Link from "@/components/Link.astro"; // TODO: use Link instead of native a
 import type { LinkProps } from "@/types";
 
 interface Props {
@@ -9,28 +8,80 @@ interface Props {
 const { pages } = Astro.props;
 
 const currentPath = Astro.url.pathname;
----
 
-<style>
-  .iconx {
-    width: 32px;
-    height: 32px;
-  }
-</style>
+const getGradient = (text: string) => {
+  // Generate different colors based on text to ensure consistent but unique gradients
+  const hash = text.split("").reduce((acc, char) => char.charCodeAt(0) + acc, 0);
+  const hue1 = hash % 360;
+  const hue2 = (hue1 + 60) % 360;
+  return `
+    <linearGradient id="gradient-${text}" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color: hsl(${hue1}, 70%, 60%)" />
+      <stop offset="100%" style="stop-color: hsl(${hue2}, 70%, 60%)" />
+    </linearGradient>
+  `;
+};
+
+const DefaultIcon = ({ text }: { text: string }) => {
+  const letter = text.charAt(0).toUpperCase();
+  return `
+    <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10" stroke="url(#gradient-${text})" stroke-width="2" fill="none"></circle>
+      <text
+        x="12"
+        y="12"
+        text-anchor="middle"
+        dominant-baseline="central"
+        fill="url(#gradient-${text})"
+        font-size="11"
+        font-weight="600"
+        font-family="system-ui"
+      >${letter}</text>
+    </svg>
+  `;
+};
+---
 
 <nav class="nav">
+  <svg width="0" height="0" style="position: absolute">
+    <defs>
+      {pages.map((p) => <Fragment set:html={getGradient(p.name ?? p.title)} />)}
+    </defs>
+  </svg>
   <ul class="nav--list">
     {
       pages
         .filter((p) => p.isActive)
-        .map((p) => (
-          <li class={`nav--list__item ${currentPath === p.path ? "active" : ""}`}>
-            <a href={p.path}>
-              <span class="iconx">{p.icon && <p.icon />}</span>
-              <span class="text">{p.name}</span>
-            </a>
-          </li>
-        ))
+        .map((p) => {
+          const gradientUrl = `url(#gradient-${p.name ?? p.title})`;
+          return (
+            <li class={`nav--list__item ${currentPath === p.path ? "active" : ""}`}>
+              <a href={p.path}>
+                <span class="iconx">
+                  {p.icon ? (
+                    <span style={`--icon-gradient: ${gradientUrl}`}>
+                      <p.icon />
+                    </span>
+                  ) : (
+                    <Fragment set:html={DefaultIcon({ text: p.name ?? p.title })} />
+                  )}
+                </span>
+                <span class="text">{p.name}</span>
+              </a>
+            </li>
+          );
+        })
     }
   </ul>
 </nav>
+
+<style>
+  .iconx {
+    width: 32px;
+    height: 32px;
+  }
+
+  .iconx :global(svg path) {
+    fill: var(--icon-gradient);
+  }
+</style>

src/assets/styles/menu.css

@@ -3,7 +3,6 @@ import "@/assets/styles/menu.css";
 import HamIcon from "@/assets/icons/ham.svg";
 import ArrowIcon from "@/assets/icons/arrow.svg";
 import ToggleIcon from "@/assets/icons/toggle.svg";
-//import ArrowLeftIcon from "@/assets/icons/arrow-left.svg";
 
 import Navigation from "@/layouts/Navigation";
 import { NavbarLinks } from "@/utils/constants";

src/layouts/Navigation.astro

@@ -2,6 +2,6 @@ export type LinkProps = {
   title: string;
   name?: string;
   path: string;
+  icon?: any;
   isActive: boolean;
-  icon?: React.FC;
 };

src/layouts/common/Menu.astro

@@ -1,5 +1,4 @@
 import HomeIcon from "@/assets/icons/home.svg";
-import PlaceholderIcon from "@/assets/icons/placeholder.svg";
 import RecordIcon from "@/assets/icons/record.svg";
 import type { LinkProps } from "@/types";
 
@@ -17,28 +16,24 @@ export const NavbarLinks: LinkProps[] = [
     name: "About",
     title: "About",
     path: "/about",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Varnmala",
     title: "Varnmala",
     path: "/varnmala",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Panel",
     title: "Panel",
     path: "/panel",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Reader",
     title: "Reader",
     path: "/reader",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
@@ -52,35 +47,30 @@ export const NavbarLinks: LinkProps[] = [
     name: "English",
     title: "English",
     path: "/english",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Typing",
     title: "Typing",
     path: "/typing",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "India",
     title: "India Map",
     path: "/map",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Letter",
     title: "Letter Pad",
     path: "/letter",
-    icon: PlaceholderIcon,
     isActive: true
   },
   {
     name: "Feedback",
     title: "Feedback Form",
     path: "/feedback",
-    icon: PlaceholderIcon,
     isActive: true
   }
 ];