seperated help updated header

Author: Ciphrox

src/assets/styles/dialog.css

@@ -1,8 +1,52 @@
 /* following :root block added by css color collector at 10/17/2024, 9:01:47 PM */
 :root {
-	--dialog__bg--1: rgb(0 0 0 / 0%);
-	--dialog__bg--2: rgb(0 0 0 / 25%);
+  --dialog__bg--1: rgb(0 0 0 / 0%);
+  --dialog__bg--2: rgb(0 0 0 / 25%);
 }
+
+.help-dialog {
+  padding: 1.5rem;
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  width: 90%;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.dialog-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+}
+
+.dialog-header button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-header button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.dialog-content {
+  line-height: 1.5;
+}
+
 dialog[open] {
   opacity: 1;
   transform: scaleY(1);

src/assets/styles/footer.css

@@ -6,7 +6,7 @@
 }
 
 .footer__nav {
-  @apply flex flex-col items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500;
+  @apply flex flex-col md:flex-row items-center justify-center gap-3 text-gray-700 underline underline-offset-2 dark:text-gray-500;
 }
 
 .footer__nav--item {

src/assets/styles/header.css

@@ -1,6 +1,11 @@
 @import url(./globals.css);
 
 .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
   background-color: var(--background);
   border-bottom: 1px solid var(--border);
   height: var(--header-h);

src/assets/styles/menu.css

@@ -210,7 +210,6 @@
       border-radius: 12px 12px 0 0;
       outline: 1px solid color-mix(in hsl, canvas, canvasText 25%);
       translate: 0 100%;
-      position: sticky;
     }
 
     [data-placement="bottom"] [popover] {

src/components/Help.astro

@@ -0,0 +1,33 @@
+---
+import "@/assets/styles/dialog.css";
+
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props;
+---
+<div id="hint" class="hint">❓</div>
+<dialog id="info" class="help-dialog">
+  <div class="dialog-header">
+    <h2>{title}</h2>
+    <button autofocus aria-label="Close dialog">×</button>
+  </div>
+  <div class="dialog-content">
+    <p>{description}</p>
+  </div>
+</dialog>
+
+
+<script>
+  const hint = document.querySelector("#hint");
+  const infoDialog = document.querySelector("dialog");
+  const btn = document.querySelector("dialog > div > button");
+  hint?.addEventListener("click", () => {
+    infoDialog?.showModal();
+  });
+  btn?.addEventListener("click", () => {
+    infoDialog?.close();
+  });
+</script>

src/layouts/common/Header.astro

@@ -24,6 +24,7 @@ const { title, hasBack = true } = Astro.props;
     <slot name="right" />
   </div>
 </header>
+<div class="header-spacer"></div>
 
 <style>
   .back {
@@ -43,4 +44,8 @@ const { title, hasBack = true } = Astro.props;
   :global(.action-group a) {
     white-space: nowrap;
   }
+
+  .header-spacer {
+    height: var(--header-h);
+  }
 </style>

src/pages/about.astro

@@ -1,44 +1,26 @@
 ---
 import "@/assets/styles/about.css";
-import "@/assets/styles/dialog.css";
+import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
 ---
 
 <BaseLayout meta={{ title: "About us" }}>
   <Fragment slot="header-right">
-    <div id="hint" class="hint">❓</div>
+    <Help 
+      title="Hide & Seek Game"
+      description="Press any alphabet key from keyboard and that letter will appears and when you press again then it will disappears. See some hover and active effects while hovering over each card."
+    />
   </Fragment>
-  
+
   <main class="about-main">
     <div class="container__about">
-      <h1>Hello There</h1>
       <section class="moto">
         <p>This is my initial version to make interactive games for kids</p>
         <p>
           Inspiration behind these games are to take kids away from smartphone and close to keyboard which will help in
           their future building also.
         </p>
       </section>
-      <dialog id="info">
-        <button autofocus>Close</button>
-        <p>Hide & Seek.</p>
-        <p>
-          Press any alphabet key from keyboard and that letter will appears and when you press again then it will
-          disappears. see some hover and active effect while hover over each card
-        </p>
-      </dialog>
     </div>
   </main>
 </BaseLayout>
-
-<script>
-  const hint = document.querySelector("#hint");
-  const infoDialog = document.querySelector("dialog");
-  const btn = document.querySelector("dialog > button");
-  hint?.addEventListener("click", () => {
-    infoDialog?.showModal();
-  });
-  btn?.addEventListener("click", () => {
-    infoDialog?.close();
-  });
-</script>

src/pages/panel.astro

@@ -20,17 +20,13 @@ import BaseLayout from "@/layouts/Base";
 </style>
 
 <BaseLayout meta={{ title: "Panel" }}>
-  <Fragment slot="header-right">
-    <div id="hint" class="hint">❓</div>
-  </Fragment>
-
-  <div class="tv panel-main">
+  <article class="tv panel-main">
     <section class="scene">
       <letter-panel>
         <div class="panel" id="panel"></div>
       </letter-panel>
     </section>
-  </div>
+  </article>
 </BaseLayout>
 <script>
   enum ArrowKeys {

src/pages/sample.astro

@@ -1,5 +1,6 @@
 ---
 import "@/assets/styles/page.css";
+import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
 ---
 
@@ -12,6 +13,10 @@ import BaseLayout from "@/layouts/Base";
     <button>Right 1</button>
     <button>Right 2</button>
     <button>Right 3</button>
+    <Help
+      title="Sample Page"
+      description="This is a sample page to demonstrate the layout and features available in the project."
+    />
   </Fragment>
 
   <main class="container__page">

src/pages/varnmala.astro

@@ -5,10 +5,6 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common";
 ---
 
 <BaseLayout meta={{ title: "Alphabets" }}>
-  <Fragment slot="header-right">
-    <div id="hint" class="hint">❓</div>
-  </Fragment>
-
   <main class="varnmala-main">
     <Alphabet list={varnmala_english} title="English" />
     <Alphabet list={varnmala_hindi} title="Hindi" />