diff --git a/components/Header.tsx b/components/Header.tsx
index 9fc742a..137fffe 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,6 +1,7 @@
import { asset } from '$fresh/runtime.ts'
import SearchBox from '../islands/SearchBox.tsx'
import ThemePicker from '../islands/ThemePicker.tsx'
+import MoreBox from '../islands/MoreBox.tsx'
export function Header() {
return (
@@ -63,7 +64,15 @@ export function Header() {
-
+
+
+
+
+
+
+
)
diff --git a/islands/MoreBox.css b/islands/MoreBox.css
new file mode 100644
index 0000000..b04c8cf
--- /dev/null
+++ b/islands/MoreBox.css
@@ -0,0 +1,48 @@
+.islands__more_box__dialog {
+ gap: var(--_gap);
+ color: var(--_font-color);
+ align-items: center;
+}
+
+.islands__more_box__dialog[open] {
+ display: flex;
+ flex-direction: column;
+ padding: var(--_gap);
+ border: var(--_border-size) solid currentColor;
+ background: var(--_background-image) repeat top left / 800px;
+ background-color: var(--_background-color);
+
+ &::backdrop {
+ backdrop-filter: blur(var(--_blur));
+ }
+}
+
+.islands__more_box__button {
+ background: transparent;
+ border: none;
+ outline: none;
+ border: var(--_border-size) solid transparent;
+ color: var(--_font-color);
+
+ &:focus-visible,
+ &:hover {
+ border-color: currentColor;
+ }
+}
+
+@media (width > 800px) {
+ .islands__more_box__dialog {
+ display: flex;
+ padding: 0;
+ border: none;
+ margin: 0;
+ position: static;
+ height: 100%;
+ background-color: transparent;
+ align-self: center;
+ }
+
+ .islands__more_box__button {
+ display: none;
+ }
+}
diff --git a/islands/MoreBox.tsx b/islands/MoreBox.tsx
new file mode 100644
index 0000000..59e8ed0
--- /dev/null
+++ b/islands/MoreBox.tsx
@@ -0,0 +1,28 @@
+import { VNode } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+
+export default function MoreBox({ children }: { children: VNode | VNode[] }) {
+ const dialog = useRef(null)
+
+ useEffect(() => {
+ dialog.current?.addEventListener('click', (event) => {
+ if (event.target === dialog.current) {
+ dialog.current?.close()
+ }
+ })
+ }, [])
+
+ return (
+ <>
+
+
+ >
+ )
+}
diff --git a/islands/ThemePicker.css b/islands/ThemePicker.css
index 9090872..cbf28ee 100644
--- a/islands/ThemePicker.css
+++ b/islands/ThemePicker.css
@@ -26,10 +26,4 @@
font-weight: normal;
line-height: normal;
}
-
- @media (width < 800px) {
- & select {
- width: 0;
- }
- }
}
diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css
index fc449d0..6d67cd1 100644
--- a/src/stylesheets/components.css
+++ b/src/stylesheets/components.css
@@ -10,3 +10,4 @@
@import url('../../components/MemberCard.css');
@import url('../../islands/ThemePicker.css');
@import url('../../islands/SearchBox.css');
+@import url('../../islands/MoreBox.css');