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,67 +1,98 @@
 ---
+import SimpleMenu from '../layouts/SimpleMenu.astro';
+import Icon from './Icon.astro';
+
 export interface Props {
+    id: string;
     title: string;
     text: string;
     url: string;
-    elemClass?: Array<String>;
-    btnClass?: Array<string>;
-    dataJs?: string;
+    width?: number;
 }
 
 const {
+    id,
     title, text, url,
-    elemClass = [],
-    btnClass = [],
-    dataJs = "",
+    width = 9,
 } = Astro.props;
 ---
 
-<div class:list={["gi", ...elemClass]}>
-    <a href={url} target="_blank" class="gi-main">
-        <span class="icon-wrapper">
-            <slot name="icon-primary" />
-        </span>
-        <span class="content">
-            <span class="title">
-                <slot name="title">
-                    {title}
-                </slot>
+<div class="gi" id={id}>
+    <div class="gi-row">
+        <div class="gi-main">
+            <span class="icon-wrapper">
+                <slot name="icon-primary" />
             </span>
-            <span class="text">
-                <slot name="text">
-                    {text}
-                </slot>
+            <span class="content">
+                <span class="title">
+                    <slot name="title">
+                        {title}
+                    </slot>
+                </span>
+                <span class="text">
+                    <slot name="text">
+                        {text}
+                    </slot>
+                </span>
             </span>
-        </span>
-    </a>
-    <a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
-        <span class="icon-wrapper">
-            <slot name="icon-btn" />
-        </span>
-    </a>
+        </div>
+        <a href={`#${id}`} class="gi-btn gi-btn-expand">
+            <span class="icon-wrapper">
+                <Icon code="&#xf107;" />
+            </span>
+        </a>
+        <a href="#scroll" class="gi-btn gi-btn-close">
+            <span class="icon-wrapper">
+                <Icon code="&#xf106;" />
+            </span>
+        </a>
+    </div>
+    <div class="gi-options">
+        <SimpleMenu jcc="center">
+            <slot name="options" />
+        </SimpleMenu>
+    </div>
+    <div class="gi-options gi-note">
+        <slot name="note" />
+    </div>
 </div>
 
-<style lang="less">
-    @import "/src/styles/grid_calc.less";
-
+<style lang="less" define:vars={{width: `${width}rem`}}>
     .gi {
         //     vertical horizontal
-        padding: 0.4rem @gi-horiz-padding;
+        padding: 0.4rem 0.6rem;
 
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
 
-        width: @gi-width;
         min-height: 3rem;
         border-radius: var(--bdrs);
 
         &:hover {
             background: var(--accent-bg);
         }
+
+        .gi-options { display: none }
+        .gi-btn-close { display: none }
+        .gi-btn-expand { display: flex }
+
+        &:target {
+            background: var(--accent-bg);
+
+            .gi-options { display: block }
+
+            .gi-btn-close { display: flex }
+            .gi-btn-expand { display: none }
+        }
     }
 
-    a.gi-main {
+    .gi-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .gi-main {
         flex-grow: 1;
         height: 100%;
 
@@ -73,17 +104,36 @@ const {
         text-decoration: none;
 
         .icon-wrapper {
-            width: @gi-icon-primary;
-            font-size: @gi-icon-primary;
-            margin-right: @gi-icon-margin;
+            @icon-size: 2.3rem;
+
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-right: 0.4rem;
 
             & > :global(img) {
-                width: @gi-icon-primary;
+                width: @icon-size;
+            }
+        }
+
+        .content {
+            display: flex;
+            flex-direction: column;
+
+            width: var(--width);
+            overflow: hidden;
+
+            .title {
+                font-weight: 600;
+            }
+            
+            .text {
+                font-size: 0.9rem;
+                color: var(--fg-sec);
             }
         }
     }
 
-    a.gi-btn {
+    .gi-btn {
         position: relative;
         font-size: 1.1rem;
 
@@ -92,12 +142,14 @@ const {
         align-items: center;
 
         .icon-wrapper {
-            width: @gi-icon-btn;
-            font-size: @gi-icon-btn;
-            margin-left: @gi-icon-margin;
+            @icon-size: 1.25rem;
+
+            width: @icon-size;
+            font-size: @icon-size;
+            margin-left: 0.4rem;
 
             & > :global(img) {
-                width: @gi-icon-btn;
+                width: @icon-size;
             }
         }
     }
@@ -106,22 +158,7 @@ const {
         display: flex;
         flex-direction: column;
         align-items: center;
-    }
 
-    .content {
-        display: flex;
-        flex-direction: column;
-
-        width: @gi-text-width;
-        overflow: hidden;
-
-        .title {
-            font-weight: 600;
-        }
-        
-        .text {
-            font-size: 0.9rem;
-            color: var(--fg-sec);
-        }
+        user-select: none;
     }
 </style>

src/components/HostedService.astro

@@ -12,23 +12,11 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
 ---
 
 <GridItem
+    id={`s-${name.toLowerCase()}`}
     title={name}
     text={description}
     url={url}
-    elemClass={["gi-service"]}
+    width={14}
 >
     <img src={iconUrl} slot="icon-primary" />
 </GridItem>
-
-<style lang="less" is:global>
-    @import "/src/styles/grid_calc.less";
-
-    // Overwriting default GridItem's width
-    .gi-service {
-        width: @service-width;
-
-        .content {
-            width: @service-text-width;
-        }
-    }
-</style>

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}>
-        {!atLeft ? name : ""}
+    <a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} data-js={datajs}>
         <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;
@@ -8,19 +9,37 @@ export interface Props {
     name: string;
     icon: string;
     copyName?: boolean;
+    note?: string;
 }
 
-const { app, url, name, icon, copyName = false } = Astro.props;
+const {
+    app, url, name, icon,
+    copyName = false,
+    note = "",
+} = Astro.props;
 ---
 
 <GridItem
+    id={`p-${app.toLowerCase()}`}
     title={app} text={name} url={url}
-    elemClass={["gi-profile"]}
-    btnClass={["profile-copy"]}
-    dataJs={copyName ? name : url}
+    width={9.5}
 >
     <Icon code={icon} slot="icon-primary" />
-    <Icon code="&#xf0c5;" slot="icon-btn" />
+    <Fragment slot="options">
+        <MenuItem
+            name=""
+            link="javascript:void(0)"
+            icon="&#xf0c5;"
+            classes={["profile-copy"]}
+            datajs={copyName ? name : url}
+        />
+        <MenuItem
+            name="Open"
+            link={url}
+            icon="&#xf360;"
+            tblank
+        />
+    </Fragment>
 </GridItem>
 
 <script>
@@ -35,15 +54,3 @@ const { app, url, name, icon, copyName = false } = Astro.props;
         elem.addEventListener('click', copyClickHandler)
     }
 </script>
-
-<style lang="less" is:global>
-    @import "/src/styles/grid_calc.less";
-
-    .gi-profile {
-        width: @profile-width;
-
-        .content {
-            width: @profile-text-width;
-        }
-    }
-</style>

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/Layout.astro

@@ -19,6 +19,7 @@ const { title, description } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
+		<div id="scroll"></div>
 		<slot />
 	</body>
 </html>
@@ -44,7 +45,7 @@ const { title, description } = Astro.props;
 		flex-direction: column;
 	}
 
-	main  {
+	main {
 		margin: auto;
 		padding: @main-padding;
 		max-width: @max-width;
@@ -113,3 +114,11 @@ const { title, description } = Astro.props;
 		}
 	}
 </style>
+
+<style>
+	#scroll {
+		position: fixed;
+		display: block;
+		height: 1px;
+	}
+</style>

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/Modal.astro

@@ -9,7 +9,7 @@ const { id } = Astro.props;
 ---
 
 <div class="modal-bg" id={id}>
-    <a href="#" class="modal-bg-close"></a>
+    <a href="#scroll" class="modal-bg-close"></a>
     <div class="modal">
         <div class="controls">
             <a href="#"><Icon code="&#xf00d;" /></a>

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>

src/styles/grid_calc.less

@@ -1,25 +0,0 @@
-@import "/src/styles/max_width.less";
-
-@gi-icon-primary: 2.3rem;
-@gi-icon-btn: 1.8rem;
-
-@gi-text-width: 9.5rem;
-@profile-text-width: 9rem;
-@service-text-width: 14rem;
-
-@gi-icon-margin: 0.4rem;
-@gi-horiz-padding: 0.6rem;
-
-// GridItem width without text
-@gi-width-wo-text: @gi-horiz-padding + @gi-icon-primary + @gi-icon-margin + @gi-icon-margin + @gi-icon-btn + @gi-horiz-padding;
-
-@gi-width: @gi-width-wo-text + @gi-text-width;
-@profile-width: @gi-width-wo-text + @profile-text-width;
-@service-width: @gi-width-wo-text + @service-text-width;
-
-.grid-mixin() {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-}