feat: responsive design

ncpa0 · Dec 12, 2023 · e09f7b3 · e09f7b3
1 parent 1055738
commit e09f7b3
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 89 deletions.
diff --git a/src/components/code-sample.css b/src/components/code-sample.css
@@ -6,6 +6,16 @@
   width: 75%;
 }
 
+@media (max-width: 829px) {
+  .code-sample {
+    width: 95%;
+  }
+
+  .code-sample-result {
+    width: 95%;
+  }
+}
+
 .code-sample-result .result-content {
   margin-left: 0.75em;
   margin-right: 0.75em;
@@ -15,4 +25,5 @@
   justify-content: center;
   align-items: center;
   flex: 1;
+  max-width: 100%;
 }
diff --git a/src/components/example.css b/src/components/example.css
@@ -1,15 +1,37 @@
 .example-section {
-  width: calc(85vw - 200px);
+  width: clamp(550px, 65vw, 80vw);
   align-items: center;
   padding-bottom: 2em;
 }
 
+.example-section-content {
+  max-width: 100%;
+}
+
 .example-section p {
   place-self: flex-start;
   margin-left: calc(12.5%);
   max-width: 75%;
 }
 
+@media (max-width: 829px) {
+  .example-section.example-section {
+    width: clamp(350px, 80vw, 95vw);
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+  }
+
+  .example-section.example-section p {
+    margin-left: calc(12.5% - 0.7 * 2.85em);
+    max-width: 95%;
+  }
+
+  .example-section.example-section h5 {
+    max-width: 95%;
+    margin-top: 0.2em;
+  }
+}
+
 .example-section h5 {
   place-self: flex-start;
   margin-left: calc(12.5% - 0.7 * 2.85em);

diff --git a/src/components/example.tsx b/src/components/example.tsx
@@ -54,7 +54,7 @@ export function ExampleSection(
         </h5>
       )}
       {props.description && <p class={Typography.text}>{props.description}</p>}
-      <div class="flexbox extend">{props.children}</div>
+      <div class="flexbox extend example-section-content">{props.children}</div>
     </div>
   );
 }
diff --git a/src/components/navbar-button.client.tsx → src/components/navbar.client.tsx b/src/components/navbar-button.client.tsx → src/components/navbar.client.tsx
@@ -4,6 +4,23 @@ declare global {
   const htmx: typeof HTMX;
 }
 
+let MobileNavbarModal: HTMLDialogElement | null = null;
+
+const initMobileMenu = () => {
+  const dialog = document.querySelector("dialog")!;
+  const btn = document.querySelector(".navbar-mobile-btn")!;
+  btn.addEventListener("click", () => {
+    dialog.showModal();
+  });
+
+  const backdropArea = document.querySelector(".navbar-overlay-backdrop")!;
+  backdropArea.addEventListener("click", () => {
+    dialog.close();
+  });
+
+  MobileNavbarModal = dialog;
+};
+
 class NavbarButton extends HTMLAnchorElement {
   onHistoryPush = (e: Event) => {
     const { path } = (e as CustomEvent<{ path: string }>).detail;
@@ -15,6 +32,8 @@ class NavbarButton extends HTMLAnchorElement {
     } else {
       innerBtn.classList.remove("active");
     }
+
+    MobileNavbarModal?.close();
   };
 
   connectedCallback() {
@@ -27,3 +46,4 @@ class NavbarButton extends HTMLAnchorElement {
 }
 
 window.customElements.define("navbar-button", NavbarButton, { extends: "a" });
+window.addEventListener("load", initMobileMenu);
diff --git a/src/components/navbar.css b/src/components/navbar.css
@@ -4,6 +4,7 @@
   left: 0;
   height: 100vh;
   margin: 0px 0.3em;
+  width: clamp(200px, 20vw, 320px);
 }
 
 .left-navbar > .nav-sidebar {
@@ -19,7 +20,6 @@
 }
 
 .nav-sidebar.nav-sidebar {
-  width: 14em;
   justify-content: flex-start;
 }
 
@@ -37,3 +37,52 @@ a.navbar-link,
 a.navbar-link button {
   cursor: pointer;
 }
+
+@media (max-width: 829px) {
+  .left-navbar.left-navbar {
+    display: none;
+  }
+
+  .left-navbar-mobile.left-navbar-mobile {
+    display: block;
+  }
+
+  .navbar-container {
+    position: sticky;
+    top: 0;
+    left: 0;
+  }
+}
+
+.left-navbar-mobile {
+  display: none;
+  width: 100vw;
+  z-index: 10;
+}
+
+.left-navbar-mobile dialog {
+  border: unset;
+  margin: unset;
+  padding: unset;
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: #2121214f;
+}
+
+.navbar-overlay-backdrop {
+  flex: 1;
+}
+
+/* .left-navbar-mobile dialog .dialog-container {
+  display: flex;
+  flex
+} */
+
+.left-navbar-mobile-overlay {
+  width: 65vw;
+  min-height: 100vh;
+}
+
+.navbar-mobile-btn {
+  margin: 0.3em;
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -30,99 +30,137 @@ const NavbarLink = (props: { href: string; label: string; isActive?: boolean })
   );
 };
 
+const NavbarAllLinks = (props: { activePage?: string }) => {
+  return (
+    <>
+      <NavbarLink
+        label="Input"
+        isActive={props.activePage === "input"}
+        href="/example-page/input.html"
+      />
+      <NavbarLink
+        label="Selector"
+        isActive={props.activePage === "selector"}
+        href="/example-page/selector.html"
+      />
+      <NavbarLink
+        label="Slider"
+        isActive={props.activePage === "slider"}
+        href="/example-page/slider.html"
+      />
+      <NavbarLink
+        label="Switch"
+        isActive={props.activePage === "switch"}
+        href="/example-page/switch.html"
+      />
+      <span class={NavSidebar.separator}></span>
+      <NavbarLink
+        label="Box"
+        isActive={props.activePage === "box"}
+        href="/example-page/box.html"
+      />
+      <NavbarLink
+        label="Button"
+        isActive={props.activePage === "button"}
+        href="/example-page/button.html"
+      />
+      <NavbarLink
+        label="Card"
+        isActive={props.activePage === "card"}
+        href="/example-page/card.html"
+      />
+      <NavbarLink
+        label="Checkbox"
+        isActive={props.activePage === "checkbox"}
+        href="/example-page/checkbox.html"
+      />
+      <NavbarLink
+        label="Frame"
+        isActive={props.activePage === "frame"}
+        href="/example-page/frame.html"
+      />
+      <NavbarLink
+        label="Linked"
+        isActive={props.activePage === "linked"}
+        href="/example-page/linked.html"
+      />
+      <NavbarLink
+        label="List"
+        isActive={props.activePage === "list"}
+        href="/example-page/list.html"
+      />
+      <NavbarLink
+        label="Message"
+        isActive={props.activePage === "message"}
+        href="/example-page/message.html"
+      />
+      <NavbarLink
+        label="Nav Sidebar"
+        isActive={props.activePage === "nav-sidebar"}
+        href="/example-page/nav-sidebar.html"
+      />
+      <NavbarLink
+        label="Separator"
+        isActive={props.activePage === "separator"}
+        href="/example-page/separator.html"
+      />
+      <NavbarLink
+        label="Typography"
+        isActive={props.activePage === "typography"}
+        href="/example-page/typography.html"
+      />
+    </>
+  );
+};
+
+const LeftNavbarDesktop = (props: { activePage?: string }) => {
+  return (
+    <div class="flexbox left-navbar column">
+      <ThemeSwitcher />
+      <FontSizeSelector />
+      <span class="separator"></span>
+      <div class={cls(NavSidebar.navSidebar, "flexbox column")}>
+        <NavbarAllLinks activePage={props.activePage} />
+      </div>
+    </div>
+  );
+};
+
+const LeftNavbarMobile = (props: { activePage?: string }) => {
+  return (
+    <div class="left-navbar-mobile column">
+      <button class="btn square navbar-mobile-btn">
+        M
+      </button>
+      <dialog>
+        <div class="dialog-container flexbox">
+          <div class="left-navbar-mobile-overlay box bg-level-2 column">
+            <ThemeSwitcher />
+            <FontSizeSelector />
+            <span class="separator"></span>
+            <div class={cls(NavSidebar.navSidebar, "flexbox", "column")}>
+              <NavbarAllLinks activePage={props.activePage} />
+            </div>
+          </div>
+          <div class="navbar-overlay-backdrop"></div>
+        </div>
+      </dialog>
+    </div>
+  );
+};
+
 export const Navbar = (props: { activePage?: string }) => {
   return (
     <div class={cls(Box.box, "bg-level-2")}>
       <Style
         dirname={__dirname}
         path="./navbar.css"
       />
-      <div class="flexbox left-navbar column">
-        <ThemeSwitcher />
-        <FontSizeSelector />
-        <span class="separator"></span>
-        <div class={cls(NavSidebar.navSidebar, "flexbox column")}>
-          <NavbarLink
-            label="Input"
-            isActive={props.activePage === "input"}
-            href="/example-page/input.html"
-          />
-          <NavbarLink
-            label="Selector"
-            isActive={props.activePage === "selector"}
-            href="/example-page/selector.html"
-          />
-          <NavbarLink
-            label="Slider"
-            isActive={props.activePage === "slider"}
-            href="/example-page/slider.html"
-          />
-          <NavbarLink
-            label="Switch"
-            isActive={props.activePage === "switch"}
-            href="/example-page/switch.html"
-          />
-          <span class={NavSidebar.separator}></span>
-          <NavbarLink
-            label="Box"
-            isActive={props.activePage === "box"}
-            href="/example-page/box.html"
-          />
-          <NavbarLink
-            label="Button"
-            isActive={props.activePage === "button"}
-            href="/example-page/button.html"
-          />
-          <NavbarLink
-            label="Card"
-            isActive={props.activePage === "card"}
-            href="/example-page/card.html"
-          />
-          <NavbarLink
-            label="Checkbox"
-            isActive={props.activePage === "checkbox"}
-            href="/example-page/checkbox.html"
-          />
-          <NavbarLink
-            label="Frame"
-            isActive={props.activePage === "frame"}
-            href="/example-page/frame.html"
-          />
-          <NavbarLink
-            label="Linked"
-            isActive={props.activePage === "linked"}
-            href="/example-page/linked.html"
-          />
-          <NavbarLink
-            label="List"
-            isActive={props.activePage === "list"}
-            href="/example-page/list.html"
-          />
-          <NavbarLink
-            label="Message"
-            isActive={props.activePage === "message"}
-            href="/example-page/message.html"
-          />
-          <NavbarLink
-            label="Nav Sidebar"
-            isActive={props.activePage === "nav-sidebar"}
-            href="/example-page/nav-sidebar.html"
-          />
-          <NavbarLink
-            label="Separator"
-            isActive={props.activePage === "separator"}
-            href="/example-page/separator.html"
-          />
-          <NavbarLink
-            label="Typography"
-            isActive={props.activePage === "typography"}
-            href="/example-page/typography.html"
-          />
-        </div>
-      </div>
+      <LeftNavbarDesktop activePage={props.activePage} />
+      <LeftNavbarMobile activePage={props.activePage} />
       <Script
         dirname={__dirname}
-        path="./navbar-button.client.tsx"
+        path="./navbar.client.tsx"
       />
     </div>
   );