add dropdown to savehtml btn

src/components/Footer.jsx

@@ -4,6 +4,7 @@ import { I18n } from '@lingui/react';
 import { ProBadge } from './ProBadge';
 import { HStack } from './Stack';
 import { useEffect, useState } from 'preact/hooks';
+import { DropdownMenu } from './Dropdown';
 
 const JS13K = props => {
 	const [daysLeft, setDaysLeft] = useState(0);
@@ -201,16 +202,36 @@ export const Footer = props => {
 					) : null}
 
 					<div class="footer__right">
-						<button
-							onClick={props.saveHtmlBtnClickHandler}
-							id="saveHtmlBtn"
-							class="mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode"
-							aria-label={i18n._(t`Save as HTML file`)}
-						>
-							<svg viewBox="0 0 24 24">
-								<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
-							</svg>
-						</button>
+						<DropdownMenu
+							triggerText="More"
+							menuItems={[
+								{
+									label: 'Download HTML',
+									onClick: () => {
+										props.saveHtmlBtnClickHandler();
+									}
+								},
+								{
+									label: 'Download HTML (assets inlined)',
+									onClick: () => {
+										props.saveHtmlBtnClickHandler(true);
+									}
+								}
+							]}
+							position="top"
+							btnProps={{
+								id: 'saveHtmlBtn',
+								className:
+									'mode-btn  hint--rounded  hint--top-left hide-on-mobile hide-in-file-mode',
+								ariaLabel: i18n._(t`Save as HTML file`)
+							}}
+							btnContent={
+								<svg viewBox="0 0 24 24">
+									<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
+								</svg>
+							}
+						/>
+
 						<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
 							<symbol id="codepen-logo" viewBox="0 0 120 120">
 								<path

src/components/app.jsx

@@ -1245,8 +1245,8 @@ export default class App extends Component {
 		trackEvent('ui', 'openInCodepen');
 		e.preventDefault();
 	}
-	saveHtmlBtnClickHandler(e) {
-		saveAsHtml(this.state.currentItem);
+	saveHtmlBtnClickHandler(inlineAssets) {
+		saveAsHtml(this.state.currentItem, { inlineAssets });
 		trackEvent('ui', 'saveHtmlClick');
 		e.preventDefault();
 	}

src/style.css

@@ -1099,6 +1099,7 @@ body:not(.light-version) .modal {
 	bottom: calc(100% + 0.2rem);
 	transition: 0.25s ease;
 }
+.popup,
 .modal__content {
 	--opaque: 68%;
 	background: var(--color-popup);
@@ -2422,6 +2423,51 @@ while the theme CSS file is loading */
 	} */
 }
 
+/* DROPDOWN */
+.dropdown {
+	position: relative;
+	display: inline-block;
+}
+
+.dropdown-menu {
+	position: absolute;
+	left: 0;
+	--opaque: 68%;
+	background: var(--color-popup);
+	width: max-content;
+	list-style: none;
+	padding: 0.5rem;
+	margin: 0;
+	z-index: 1000;
+}
+
+.dropdown-menu-top {
+	bottom: 100%;
+	margin-bottom: 8px;
+}
+
+.dropdown-menu-bottom {
+	top: 100%;
+	margin-top: 8px;
+}
+
+.dropdown-item {
+	padding: 0.5rem 1rem;
+	width: 100%;
+	text-align: left;
+	background: none;
+	border: none;
+	border-radius: 0.3rem;
+	cursor: pointer;
+	color: white;
+	font-size: 1rem;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+	background-color: #f0f0f033;
+}
+
 @media screen and (max-width: 600px) {
 	body {
 		font-size: 70%;

src/utils.js

@@ -447,7 +447,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 	return contents;
 }
 
-export function saveAsHtml(item) {
+export function saveAsHtml(item, { inlineAssets }) {
 	var htmlPromise = computeHtml(item.html, item.htmlMode);
 	var cssPromise = computeCss(item.css, item.cssMode);
 	var jsPromise = computeJs(item.js, item.jsMode, false);
@@ -456,9 +456,9 @@ export function saveAsHtml(item) {
 			css = result[1].code,
 			js = result[2].code;
 
-		var fileContent = await inlineAssetsInHtml(
-			getCompleteHtml(html, css, js, item, true)
-		);
+		var fileContent = inlineAssets
+			? await inlineAssetsInHtml(getCompleteHtml(html, css, js, item, true))
+			: getCompleteHtml(html, css, js, item, true);
 
 		var d = new Date();
 		var fileName = [