make theme menu dense in wide view (#1323)

* make theme menu dense in wide view * make menu as small as necessary
lit · Apr 9, 2024 · f1e7a67 · f1e7a67
1 parent 168c0a5
commit f1e7a67
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html
@@ -64,6 +64,7 @@
             height="30">
           </lazy-svg>
           <ol id="mobile-site-controls">
+            {% set isDesktopNav = false %}
             {% include 'site-nav.html' %}
           </ol>
         </div>

diff --git a/packages/lit-dev-content/site/_includes/header.html b/packages/lit-dev-content/site/_includes/header.html
@@ -11,6 +11,7 @@
     </a>
 
     <ol id="desktopNav">
+      {% set isDesktopNav = true %}
       {% include 'site-nav.html' %}
     </ol>
 

diff --git a/packages/lit-dev-content/site/_includes/site-nav.html b/packages/lit-dev-content/site/_includes/site-nav.html
@@ -32,7 +32,7 @@
 <li>
    <ul class="icons">
       <li class="navItem">
-         <theme-switcher></theme-switcher>
+         <theme-switcher{% if isDesktopNav%} desktop{% endif %}></theme-switcher>
       </li>
       <li class="navItem">
          <a

diff --git a/packages/lit-dev-content/src/components/theme-switcher.ts b/packages/lit-dev-content/src/components/theme-switcher.ts
@@ -247,20 +247,36 @@ export class ThemeSwitcher extends LitElement {
     }
 
     md-menu {
-      min-width: 208px;
+      min-width: 0px;
     }
 
     #button > span {
       display: flex;
     }
 
-    [slot='end'] {
+    [slot='end'],
+    [slot='start'] {
       width: 24px;
       height: 24px;
     }
 
+    :host([desktop]) {
+      --md-menu-item-label-text-size: 0.9em;
+      --md-menu-item-one-line-container-height: 40px;
+      --md-menu-item-top-space: 8px;
+      --md-menu-item-bottom-space: 8px;
+      --md-menu-item-label-text-line-height: 24px;
+    }
+
+    :host([desktop]) [slot='start'],
+    :host([desktop]) [slot='end'] {
+      width: 20px;
+      height: 20px;
+    }
+
     [slot='headline'] {
       font-family: Manrope, sans-serif;
+      text-wrap: nowrap;
     }
   `;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ @@
         </a>
         <ol id="desktopNav">
+          {% set isDesktopNav = true %}
           {% include 'site-nav.html' %}
         </ol>
@@ Expand Down @@