Added icons and better layoutr

astro.config.ts

@@ -1,4 +1,5 @@
 import node from "@astrojs/node";
+import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
@@ -10,6 +11,13 @@ export default defineConfig({
   adapter: node({
     mode: "standalone",
   }),
+  integrations: [
+    icon({
+      include: {
+        "material-symbols": ["*"], // Loads entire Material Design Icon set
+      },
+    }),
+  ],
   server: {
     port: import.meta.env.ASTRO_PORT,
     host: import.meta.env.ASTRO_HOST,

package.json

@@ -14,11 +14,13 @@
     "@astrojs/node": "^6.0.0",
     "accept-language": "^3.0.18",
     "astro": "^3.0.3",
+    "astro-icon": "next",
     "hono": "^3.5.7",
     "node-cache": "^5.1.2",
     "sanitize.css": "^13.0.0"
   },
   "devDependencies": {
+    "@iconify-json/material-symbols": "^1.1.57",
     "bun-types": "^0.8.1"
   }
 }

src/env.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {

src/global.ts

@@ -1,3 +1,4 @@
 import "sanitize.css";
 import "src/styles/global.css";
+import "src/styles/reset.css";
 

src/layouts/AppLayout.astro

@@ -1,4 +1,6 @@
 ---
+import { Icon } from "astro-icon/components";
+
 interface Props {
   title: string;
 }
@@ -18,34 +20,70 @@ const { title } = Astro.props;
     <div id="main-panel">
       <slot name="mainPanel">Main Panel</slot>
     </div>
+    <div id="backdrop"></div>
     <div id="sub-panel">
       <slot name="subPanel">Sub Panel</slot>
     </div>
     <div id="menu-panel">Menu Panel</div>
     <div id="navbar">
-      <button id="open-menu">Open menu</button>
+      <button id="open-menu">
-      <button id="open-sub">Open sub</button>
+        <Icon class="when-off" name="material-symbols:menu" width={24} height={24} />
+        <Icon class="when-on" name="material-symbols:close" width={24} height={24} />
+      </button>
+      {title}
+      <button id="open-sub">
+        <Icon class="when-off" name="material-symbols:tune" width={24} height={24} />
+        <Icon class="when-on" name="material-symbols:close" width={24} height={24} />
+      </button>
     </div>
   </body>
 </html>
 
 <script>
-  const subPanel = document.getElementById("sub-panel");
+  const subPanel = document.querySelector("#sub-panel")!;
-  const menuPanel = document.getElementById("menu-panel");
+  const menuPanel = document.querySelector("#menu-panel")!;
-  const openMenuButton = document.getElementById("open-menu");
+  const openMenuButton = document.querySelector("#open-menu")!;
-  const subMenuButton = document.getElementById("open-sub");
+  const subMenuButton = document.querySelector("#open-sub")!;
+  const backdrop = document.querySelector("#backdrop")!;
 
-  openMenuButton?.addEventListener("click", () => {
+  openMenuButton.addEventListener("click", () => {
-    menuPanel?.classList.toggle("opened");
+    menuPanel.classList.toggle("opened");
+    openMenuButton.classList.toggle("on");
+    subPanel.classList.remove("opened");
+    subMenuButton.classList.remove("on");
+
+    if (menuPanel.classList.contains("opened")) {
+      backdrop.classList.add("on");
+    } else {
+      backdrop.classList.remove("on");
+    }
   });
 
-  subMenuButton?.addEventListener("click", () => {
+  subMenuButton.addEventListener("click", () => {
-    subPanel?.classList.toggle("opened");
+    subPanel.classList.toggle("opened");
+    subMenuButton.classList.toggle("on");
+    menuPanel.classList.remove("opened");
+    openMenuButton.classList.remove("on");
+
+    if (subPanel.classList.contains("opened")) {
+      backdrop.classList.add("on");
+    } else {
+      backdrop.classList.remove("on");
+    }
+  });
+
+  backdrop.addEventListener("click", () => {
+    backdrop.classList.remove("on");
+    subPanel.classList.remove("opened");
+    subMenuButton.classList.remove("on");
+    menuPanel.classList.remove("opened");
+    openMenuButton.classList.remove("on");
   });
 </script>
 
 <style>
   body {
+    --border-style: 1px solid rgb(var(--theme-color-dark) / 0.5);
     display: grid;
     background-color: rgb(var(--theme-color-light));
     color: rgb(var(--theme-color-black));
@@ -54,9 +92,13 @@ const { title } = Astro.props;
     overflow: hidden;
 
     & > div {
-      border: 1px solid rgb(var(--theme-color-dark));
       background-color: rgb(var(--theme-color-light));
     }
+
+    & > #sub-panel,
+    & > #menu-panel {
+      border-right: var(--border-style);
+    }
   }
 
   @media (max-width: 60rem) {
@@ -64,10 +106,15 @@ const { title } = Astro.props;
       grid-template-areas: "main" "navbar";
       grid-template-rows: 1fr 5rem;
 
-      & > #menu-panel {
+      & > #menu-panel,
+      & > #sub-panel {
         grid-area: main;
-        transform: translateX(-100%);
         transition: transform 0.3s;
+        width: min(30rem, 90%);
+      }
+
+      & > #menu-panel {
+        transform: translateX(-100%);
       }
 
       & > #menu-panel.opened {
@@ -75,9 +122,10 @@ const { title } = Astro.props;
       }
 
       & > #sub-panel {
-        grid-area: main;
+        justify-self: right;
+        border-right: unset;
+        border-left: var(--border-style);
         transform: translateX(100%);
-        transition: transform 0.3s;
       }
 
       & > #sub-panel.opened {
@@ -88,8 +136,43 @@ const { title } = Astro.props;
         grid-area: main;
       }
 
+      & > #backdrop {
+        background-color: rgb(var(--theme-color-shade));
+        opacity: 0%;
+        transition: opacity 0.3s;
+        grid-area: main;
+      }
+
+      & > #backdrop:not(.on) {
+        touch-action: none;
+        pointer-events: none;
+      }
+
+      & > #backdrop.on {
+        opacity: 60%;
+        cursor: pointer;
+      }
+
       & > #navbar {
         grid-area: navbar;
+        display: grid;
+        grid-template-columns: 5rem 1fr 5rem;
+        place-items: center;
+        border-top: var(--border-style);
+
+        & > button:not(.on) > .when-on,
+        & > button.on > .when-off {
+          display: none;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 20rem) {
+    body {
+      & > #menu-panel,
+      & > #sub-panel {
+        width: 100%;
       }
     }
   }
@@ -111,7 +194,8 @@ const { title } = Astro.props;
         grid-area: main;
       }
 
-      & > #navbar {
+      & > #navbar,
+      & > #backdrop {
         display: none;
       }
     }

src/pages/[locale]/astro.astro

@@ -1,12 +1,10 @@
 ---
 import "src/global.ts";
 import AppLayout from "src/layouts/AppLayout.astro";
-
-const { locale } = Astro.params;
 ---
 
 <AppLayout title="Welcome to Astro.">
-  <main slot="subPanel">
+  <main slot="mainPanel">
-    <h1>Hello {locale}</h1>
+    <h1>Hello from Astro</h1>
   </main>
 </AppLayout>

src/pages/[locale]/news.astro

@@ -1,12 +0,0 @@
----
-import "src/global.ts";
-import AppLayout from "src/layouts/AppLayout.astro";
-
-const { locale } = Astro.params;
----
-
-<AppLayout title="Welcome to Astro.">
-  <main slot="subPanel">
-    <h1>Hello {locale}</h1>
-  </main>
-</AppLayout>

src/styles/reset.css

@@ -0,0 +1,8 @@
+:where(button) {
+  background-color: inherit;
+  color: inherit;
+  border: initial;
+  padding: initial;
+  margin: initial;
+  cursor: pointer;
+}