astro-better-nav-bar 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/ThemeSelector.astro +20 -12
  2. package/package.json +1 -1
package/ThemeSelector.astro CHANGED
@@ -2,48 +2,56 @@
2
2
  // standalone theme selector
3
3
  // mobile: single icon button that flips light/dark
4
4
  // desktop: dropdown with Light / Dark / System options
5
+ // icons: FA7 solid/regular (viewBox 0 0 640 640)
5
6
  ---
6
7
  <nav-theme-selector class="nav-theme-selector">
7
8
 
8
9
  <!-- mobile toggle: shows moon when light, sun when dark -->
9
10
  <button type="button" aria-label="Toggle Theme" class="nav-theme-mobile-btn nav-icon-btn">
10
- <svg class="nav-theme-sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true">
11
- <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.166 17.834a.75.75 0 00-1.06 1.06l1.59 1.591a.75.75 0 101.061-1.06l-1.59-1.591zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.166 6.166a.75.75 0 001.06-1.06L5.636 3.515a.75.75 0 10-1.061 1.06l1.59 1.591z" />
11
+ <!-- sun: visible in dark mode (click to go light) -->
12
+ <svg class="nav-theme-sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="20" height="20" aria-hidden="true">
13
+ <path d="M320 32c8.4 0 16.3 4.4 20.6 11.7l55.5 92.6L500.9 110c8.2-2 16.9.4 22.8 6.3s8.3 14.7 6.3 22.8l-26.3 104.7l92.7 55.5c7.2 4.3 11.7 12.2 11.7 20.6s-4.4 16.3-11.7 20.6l-92.7 55.6L530 500.8c2 8.2-.4 16.9-6.3 22.8S509 532 500.9 530l-104.7-26.3l-55.5 92.7c-4.3 7.2-12.2 11.7-20.6 11.7s-16.3-4.4-20.6-11.7l-55.6-92.7L139.2 530c-8.2 2-16.8-.4-22.8-6.3S108 509 110 500.8l26.2-104.7l-92.6-55.5C36.4 336.2 32 328.4 32 320s4.4-16.3 11.7-20.6l92.6-55.5L110 139.1c-2-8.2.3-16.8 6.3-22.8s14.7-8.3 22.9-6.3l104.7 26.2l55.5-92.6l1.8-2.6c4.5-5.7 11.4-9.1 18.8-9.1zm0 144c-79.5 0-144 64.5-144 144s64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144m0 240c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96"/>
12
14
  </svg>
13
- <svg class="nav-theme-moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true">
14
- <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
15
+ <!-- moon: visible in light mode (click to go dark) -->
16
+ <svg class="nav-theme-moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="20" height="20" aria-hidden="true">
17
+ <path d="M320 64C178.6 64 64 178.6 64 320s114.6 256 256 256c68.8 0 131.3-27.2 177.3-71.4c7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9.4-9.8.6-14.8.6c-101.6 0-184-82.4-184-184c0-72.1 41.5-134.6 102.1-164.8c9.1-4.5 14.3-14.3 13.1-24.4s-8.6-18.3-18.5-20.5C358.4 66.2 339.4 64 320 64"/>
15
18
  </svg>
16
19
  </button>
17
20
 
18
- <!-- desktop dropdown: moon icon summary, three options -->
21
+ <!-- desktop dropdown: moon summary, three options -->
19
22
  <details class="nav-theme-details nav-dropdown-root">
20
23
  <summary class="nav-icon-btn nav-theme-details-summary" aria-label="Theme Selector">
24
+ <!-- MoonIcon (24x24 crescent, matches original site) -->
21
25
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true">
22
- <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
26
+ <path fill="none" d="M0 0h24v24H0z"/>
27
+ <path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
23
28
  </svg>
24
29
  </summary>
25
30
  <div class="nav-dropdown-panel nav-theme-panel">
26
31
  <ul class="nav-dropdown-list">
27
32
  <li class="nav-dropdown-item">
28
33
  <button type="button" class="nav-dropdown-link nav-theme-option" data-theme="light">
29
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true">
30
- <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.166 17.834a.75.75 0 00-1.06 1.06l1.59 1.591a.75.75 0 101.061-1.06l-1.59-1.591zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.166 6.166a.75.75 0 001.06-1.06L5.636 3.515a.75.75 0 10-1.061 1.06l1.59 1.591z" />
34
+ <!-- FA7 regular sun -->
35
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
36
+ <path d="M320 32c8 0 15.4 4 19.9 10.6l58.8 87.4l103.4-20.2c7.8-1.5 15.9.9 21.6 6.6s8.1 13.8 6.6 21.6L510 241.3l87.4 58.8C604 304.5 608 312 608 320s-4 15.4-10.6 19.9L510 398.7L530.2 502c1.5 7.8-.9 15.9-6.6 21.6s-13.8 8.1-21.6 6.6L398.7 510l-58.8 87.4C335.4 604 328 608 320 608s-15.4-4-19.9-10.6L241.3 510l-103.4 20.2c-7.8 1.5-15.9-.9-21.6-6.6s-8.1-13.8-6.6-21.6L130 398.7l-87.4-58.8C36 335.4 32 328 32 320s4-15.4 10.6-19.9l87.4-58.8l-20.2-103.4c-1.5-7.8.9-15.9 6.6-21.6s13.8-8.1 21.6-6.6l103.3 20.2l58.8-87.4l1.8-2.3C306.4 35 313 32 320 32m-47.8 138c-5.4 8-15 12-24.5 10.2l-84-16.4l16.4 84c1.8 9.5-2.2 19.1-10.2 24.5L99 320l71 47.8c8 5.4 12 15 10.2 24.5l-16.4 84l84-16.4l3.5-.4c8.3-.4 16.3 3.6 21 10.6l47.8 71l47.8-71l2.2-2.8c5.6-6.1 14-9 22.3-7.3l84 16.4l-16.4-84c-1.8-9.5 2.2-19.1 10.2-24.5l71-47.8l-71-47.8c-8-5.4-12-15-10.2-24.5l16.4-84l-84 16.4c-9.5 1.8-19.1-2.2-24.5-10.2l-47.8-71l-47.8 71zM320 440c-66.3 0-120-53.7-120-120s53.7-120 120-120s120 53.7 120 120s-53.7 120-120 120m0-192c-39.8 0-72 32.2-72 72s32.2 72 72 72s72-32.2 72-72s-32.2-72-72-72"/>
31
37
  </svg>
32
38
  Light
33
39
  </button>
34
40
  </li>
35
41
  <li class="nav-dropdown-item">
36
42
  <button type="button" class="nav-dropdown-link nav-theme-option" data-theme="dark">
37
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true">
38
- <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
43
+ <!-- FA7 regular moon -->
44
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
45
+ <path d="M303.3 112.7C196.2 121.2 112 210.8 112 320c0 114.9 93.1 208 208 208c33.3 0 64.7-7.8 92.6-21.7C309.2 482.9 232 390.5 232 280c0-65.8 27.4-125.1 71.3-167.3M64 320C64 178.6 178.6 64 320 64c19.4 0 38.4 2.2 56.7 6.3c9.9 2.2 17.3 10.5 18.5 20.5s-4 19.8-13.1 24.4C321.5 145.4 280 207.9 280 280c0 101.6 82.4 184 184 184c5 0 9.9-.2 14.8-.6c10.1-.8 19.6 4.8 23.8 14.1s2 20.1-5.3 27.1C451.3 548.8 388.8 576 320 576C178.6 576 64 461.4 64 320"/>
39
46
  </svg>
40
47
  Dark
41
48
  </button>
42
49
  </li>
43
50
  <li class="nav-dropdown-item">
44
51
  <button type="button" class="nav-dropdown-link nav-theme-option" data-theme="system">
45
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18" aria-hidden="true">
46
- <path fill-rule="evenodd" d="M2.25 5.25a3 3 0 013-3h13.5a3 3 0 013 3V15a3 3 0 01-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 01-.53 1.28h-9a.75.75 0 01-.53-1.28l.621-.622a2.25 2.25 0 00.659-1.59V18h-3a3 3 0 01-3-3V5.25zm1.5 0v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5z" clip-rule="evenodd" />
52
+ <!-- FA7 solid computer -->
53
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor" width="18" height="18" aria-hidden="true">
54
+ <path d="M380.8 96c-8.1 14.1-12.8 30.5-12.8 48v16H96v224h272v64H96c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64zM368 496c0 17.5 4.7 33.9 12.8 48H152c-13.3 0-24-10.7-24-24s10.7-24 24-24zm96-400h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48h-96c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48m24 64c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24zm56 144c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32"/>
47
55
  </svg>
48
56
  System
49
57
  </button>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "astro-better-nav-bar",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Configurable sticky navigation bar component for Astro with dropdowns, theme selector, search, and CTA slots",
5
5
  "type": "module",
6
6
  "exports": {