NavMenu / SimpleMenu; SM in GridItem options

src/components/ArticleCard.astro

@@ -1,5 +1,6 @@
 ---
 import Article from './Article.astro';
+import SimpleMenu from '../layouts/SimpleMenu.astro';
 import MenuItem from './MenuItem.astro';
 
 import postRenderer from '../post-renderer.mjs';
@@ -27,7 +28,7 @@ const link = `/blog/${post.slug}`;
         image={image}
         preview={true}
     />
-    <ul>
+    <SimpleMenu jcc="end">
         <MenuItem
             name={/*Comments*/""}
             link={`/blog/comments#${post.slug}`}
@@ -61,23 +62,13 @@ const link = `/blog/${post.slug}`;
             icon="&#xf105;"
             atLeft={false}
         />
-    </ul>
+    </SimpleMenu>
 </div>
 
 <style>
     .card {
         width: 100%;
     }
-
-    ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-
-        display: flex;
-        flex-direction: row;
-        justify-content: end;
-    }
 </style>
 
 <script>

src/components/GridItem.astro

@@ -1,4 +1,5 @@
 ---
+import SimpleMenu from '../layouts/SimpleMenu.astro';
 import Icon from './Icon.astro';
 
 export interface Props {
@@ -47,7 +48,9 @@ const {
         </a>
     </div>
     <div class="gi-options">
-        <slot name="options" />
+        <SimpleMenu jcc="center">
+            <slot name="options" />
+        </SimpleMenu>
     </div>
     <div class="gi-options gi-note">
         <slot name="note" />
@@ -76,18 +79,7 @@ const {
         &:target {
             background: var(--accent-bg);
 
-            .gi-options {
+            .gi-options { display: block }
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-
-                :global(.icon) {
-                    @icon-size: 1.75rem;
-
-                    font-size: @icon-size;
-                    width: @icon-size;
-                }
-            }
 
             .gi-btn-close { display: flex }
             .gi-btn-expand { display: none }

src/components/MenuItem.astro

@@ -5,27 +5,35 @@ export interface Props {
     name: string;
     link: string;
     icon: string;
+    tblank?: boolean;
     atLeft?: boolean;
+    classes?: Array<string>;
+    datajs?: string;
 }
 
-const { name, link, icon, atLeft = true } = Astro.props;
+const {
+    name, link, icon,
+    tblank = false,
+    atLeft = true,
+    classes = [],
+    datajs = "",
+} = Astro.props;
 ---
 
 <li>
     <slot name="js-dataset"></slot>
-    <a href={link}>
+    <a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} data-js={datajs}>
-        {!atLeft ? name : ""}
         <span class="icon-wrapper">
             <Icon code={icon} />
         </span>
-        {atLeft ? name : ""}
+        {name}
     </a>
 </li>
 
-<style lang="less">
+<style lang="less" define:vars={{fxd: atLeft ? "row" : "row-reverse"}}>
     a {
         display: flex;
-        flex-direction: row;
+        flex-direction: var(--fxd);
         align-items: center;
 
         font-size: 1.15rem;

src/components/Profile.astro

@@ -1,6 +1,7 @@
 ---
 import GridItem from './GridItem.astro';
 import Icon from './Icon.astro';
+import MenuItem from './MenuItem.astro';
 
 export interface Props {
     app: string;
@@ -25,12 +26,19 @@ const {
 >
     <Icon code={icon} slot="icon-primary" />
     <Fragment slot="options">
-        <a href="javascript:void(0)" class="profile-copy" data-url={copyName ? name : url}>
+        <MenuItem
-            <Icon code="&#xf0c5;" />
+            name=""
-        </a>
+            link="javascript:void(0)"
-        <a href={url}>
+            icon="&#xf0c5;"
-            <Icon code="&#xf35d;" />
+            classes={["profile-copy"]}
-        </a>
+            datajs={copyName ? name : url}
+        />
+        <MenuItem
+            name="Open"
+            link={url}
+            icon="&#xf360;"
+            tblank
+        />
     </Fragment>
 </GridItem>
 
@@ -38,7 +46,7 @@ const {
     const copy = document.querySelectorAll('.profile-copy')
     const copyClickHandler = (ev: Event) => {
         const elem = ev.currentTarget as HTMLElement
-        const link = elem.dataset.url
+        const link = elem.dataset.js
         if (!link) return
         navigator.clipboard.writeText(link)
     }

src/layouts/BlogLayout.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "./Layout.astro";
-import Menu from "./Menu.astro";
+import NavMenu from "./NavMenu.astro";
 import MenuItem from "../components/MenuItem.astro";
 
 export interface Props {
@@ -14,7 +14,7 @@ const { title, description, article = false } = Astro.props;
 
 <Layout title={"Blog | " + title} description={description}>
     <slot name="metadata" slot="metadata" />
-    <Menu>
+    <NavMenu>
         {
             !article ?
             <MenuItem name="Home" icon="&#xf104;" link="/" />
@@ -24,7 +24,7 @@ const { title, description, article = false } = Astro.props;
         <MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />
         <MenuItem name="Random" icon="&#xf522;" link="/blog/random" />
         <MenuItem name="Search" icon="&#xf002;" link="/blog/search" />
-    </Menu>
+    </NavMenu>
     <main>
         <slot />
     </main>

src/layouts/MainLayout.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "./Layout.astro";
-import Menu from "./Menu.astro";
+import NavMenu from "./NavMenu.astro";
 import MenuItem from "../components/MenuItem.astro";
 
 export interface Props {
@@ -12,12 +12,12 @@ const { page, description } = Astro.props;
 ---
 
 <Layout title={"DarkCat09 | " + page} description={description}>
-    <Menu>
+    <NavMenu>
 		<MenuItem name="Homepage" icon="&#xf015;" link="/" />
 		<MenuItem name="Projects" icon="&#xf121;" link="/projects" />
 		<MenuItem name="Services" icon="&#xf233;" link="/services" />
 		<MenuItem name="Blog" icon="&#xf1ea;" link="/blog" />
-	</Menu>
+	</NavMenu>
     <main>
         <slot />
     </main>

src/layouts/SimpleMenu.astro

@@ -0,0 +1,23 @@
+---
+export interface Props {
+    jcc: "start" | "center" | "end" | "space-around" | "space-between";
+}
+
+const { jcc } = Astro.props;
+---
+
+<ul>
+    <slot />
+</ul>
+
+<style lang="less" define:vars={{jcc: jcc}}>
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: var(--jcc);
+    }
+</style>