Updated navbar to use latest design.

.gitignore

@@ -5,3 +5,4 @@ terraform/.terraform/environment
 terraform/*.tfstate.backup
 terraform/*.tfstate
 *~
+.DS_Store

client/src/views/footer.js

@@ -9,7 +9,7 @@ export default ({ t, page }) =>
     <div className="container">
       <div className="footer_container_content">
         <div className="language">
-          <form method="get">
+          <form className="footer-form" method="get">
             { !process.browser && Object.entries(page.query).map(([k, v]) =>
               k != 'lang' && <input type="hidden" name={k} value={v} />
             ) }

client/src/views/layout.js

@@ -7,7 +7,7 @@ export default (body, opt) =>
   <div className="explorer-container">
     <div className="content-wrap">
       { navbar(opt) }
-      {subnav(opt.t, opt.isTouch, opt.activeTab)}
+      {subnav(opt.t, opt.isTouch, opt.activeTab, opt.theme, opt.page)}
       { body }
     </div>
     { footer(opt) }

client/src/views/navbar-menu.js

@@ -10,15 +10,5 @@ const staticRoot = process.env.STATIC_ROOT || ''
 export default ({ t, theme, page }) =>
 
 <div className="main-nav-container">
-  <ul className="main-nav">
-    { items && Object.entries(items).map(([ name, url ]) =>
-        <li id={name.replace(/ /g, '')} className={`nav-item ${name == active ? 'active' : ''}`}>
-          <a className="nav-link font-h4" href={url} rel="external">
-            <span><img className="menu-logo" alt="" src={`${staticRoot}img/icons/${name.replace(/ /g, '')}-menu-logo.svg`} /></span>
-            <span>{t(name)}</span>
-          </a>
-        </li>
-    ) }
-  </ul>
-    { process.env.NAVBAR_HTML ? navToggle(t, theme, page) : "" }
-  </div>
+  { process.env.NAVBAR_HTML ? navToggle(t, theme, page) : "" }
+</div>

client/src/views/network-selection.js

@@ -0,0 +1,57 @@
+import Snabbdom from "snabbdom-pragma";
+import navToggle from "./nav-toggle";
+
+const items = process.env.MENU_ITEMS && JSON.parse(process.env.MENU_ITEMS),
+  active = process.env.MENU_ACTIVE;
+
+const staticRoot = process.env.STATIC_ROOT || "";
+
+export default ({ t, theme, page }) => (
+  <div className="main-nav-container">
+    {items && (
+      <ul className="main-nav">
+        <li id={active.replace(/ /g, "")} className={`nav-item active`}>
+          <a className="nav-link font-h4" href={items[active]} rel="external">
+            <span>
+              <img
+                className="menu-logo"
+                alt=""
+                src={`${staticRoot}img/icons/${active.replace(/ /g, "")}-menu-logo.svg`}
+              />
+            </span>
+            <span>{t(active)}</span>
+            <img className="network-angle-down" src={`${staticRoot}img/icons/angle-down.svg`} />
+          </a>
+
+          <div className="network-hover-menu-container">
+            <div className="network-hover-menu">
+              {items &&
+                Object.entries(items).map(([name, url]) => {
+                  return (
+                    <a
+                      id={name.replace(/ /g, "")}
+                      href={url}
+                      className={`network-hover-menu-option-container ${name.replace(/ /g, "").toLowerCase()} ${name === active ? "active" : ""}`}
+                    >
+                      <div
+                        id={name.replace(/ /g, "")}
+                        className={`network-hover-menu-option`}
+                      >
+                        <span>
+                          <img
+                            className="menu-logo"
+                            src={`${staticRoot}img/icons/${name.replace(/ /g, "")}-menu-logo.svg`}
+                          />
+                        </span>
+                        {t(name)}
+                      </div>
+                    </a>
+                  );
+                })}
+            </div>
+          </div>
+        </li>
+      </ul>
+    )}
+  </div>
+);

client/src/views/pushtx.js

@@ -5,7 +5,7 @@ export default ({ t, ...S }) => layout(
   <div>
     <div className="block-page">
       <div className="container">
-        <form data-do="pushtx" method="post" action="tx/push">
+        <form className="push-tx-form" data-do="pushtx" method="post" action="tx/push">
           <div className="form-group">
             <label className="col-form-label col-form-label-lg" for="rawtx"><h1>{t`Broadcast raw transaction (hex)`}</h1></label>
             <textarea className="form-control" id="rawtx" name="tx" rows="5"></textarea>

client/src/views/search.js

@@ -6,6 +6,7 @@ const hasCam = process.browser && navigator.mediaDevices && navigator.mediaDevic
 export default ({ t, klass, autofocus }) =>
   <form className="search" action={process.browser?undefined:"search"}>
     <div className={`search-bar${klass?` ${klass}` : ''}`}>
+      <img src={`${staticRoot}img/icons/magnifying-glass.svg`}/>
       <input
         className="form-control search-bar-input"
         type="search"
@@ -17,6 +18,5 @@ export default ({ t, klass, autofocus }) =>
         autocomplete="off"
       />
       { hasCam ? <a className="qrcode-link" href="scan-qr"><img src={`${staticRoot}img/icons/qrcode.svg`}/></a>: "" }
-      <button className="search-bar-submit" type="image"></button>
     </div>
   </form>

client/src/views/sub-navbar.js

@@ -1,9 +1,12 @@
 import Snabbdom from 'snabbdom-pragma'
 import search from './search'
+import menu from './navbar-menu'
+import networkSelection from './network-selection'
 
-export default ( t, isTouch, activeTab) =>
+export default ( t, isTouch, activeTab, theme, page) =>
   <div className="sub-navbar">
     <div className="container sub-nav-container">
+      { networkSelection({t, theme, page}) }
       <div className="sub-nav font-h5">
         <a href="." class={{ active: activeTab == 'dashBoard' }}>Dashboard</a>
         <a href="blocks/recent" class={{ active: activeTab == 'recentBlocks' }}>Blocks</a>

dev-server.js

@@ -34,10 +34,11 @@ const custom_assets = (process.env.CUSTOM_ASSETS||'').split(/ +/).filter(Boolean
 const p = fn => (req, res, next) => fn(req, res).catch(next)
 
 app.get('/', (req, res) => res.render(rpath('client/index.pug')))
+app.get(process.env.BASE_HREF + 'app.js', browserify(rpath('client/src/run-browser.js')))
 app.get('/app.js', browserify(rpath('client/src/run-browser.js')))
 
 // Merges the main stylesheet from www/style.css with the custom css files
-app.get('/style.css', p(async (req, res) =>
+app.get(process.env.BASE_HREF + 'style.css', p(async (req, res) =>
   res.type('css').send(await prepCss())))
 
 const prepCss = async _ =>
@@ -58,13 +59,13 @@ custom_assets.forEach(pattern => {
         , stat = fs.statSync(path)
 
     stat.isDirectory()
-      ? app.use('/'+name, express.static(path))
-      : app.get('/'+name, (req, res) => res.sendFile(path))
+      ? app.use(process.env.BASE_HREF + name, express.static(path))
+      : app.get(process.env.BASE_HREF + name, (req, res) => res.sendFile(path))
   })
 })
 
 // And finally the default fallback assets from www/
-app.use('/', express.static(rpath('www')))
+app.use(`${process.env.BASE_HREF}`, express.static(rpath('www')))
 
 app.use((req, res) => res.render(rpath('client/index.pug')))
 

flavors/bitcoin-mainnet/config.env

@@ -5,3 +5,4 @@ export HOME_TITLE='Bitcoin Explorer'
 export NATIVE_ASSET_LABEL=BTC
 export NATIVE_ASSET_NAME=Bitcoin
 export MENU_ACTIVE='Bitcoin'
+export BASE_HREF=${BASE_HREF:-'/'}

flavors/bitcoin-testnet/extras.css

@@ -1,20 +1,8 @@
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-#Bitcoin, #Liquid{
-    display: none;
-}
-
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -31,10 +19,6 @@
     display: none;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }

flavors/bitcoin-testnet4/extras.css

@@ -1,20 +1,8 @@
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-#Bitcoin, #Liquid{
-    display: none;
-}
-
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -31,10 +19,6 @@
     display: none;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }

flavors/blockstream/config.env

@@ -1,5 +1,5 @@
 export SITE_DESC='Blockstream Explorer is an open source block explorer providing detailed blockchain data across Bitcoin, Testnet, and Liquid. Supports Tor and tracking-free.'
-export SITE_FOOTER='© 2025 Blockstream Corporation Inc. All rights reserved.'
+export SITE_FOOTER='© 2026 Blockstream Corporation Inc. All rights reserved.'
 export HEAD_HTML=\
 '<meta property="og:image" content="https://blockstream.info/img/social-sharing.png">'\
 '<meta name="twitter:image" content="https://blockstream.info/img/social-sharing.png">'\

flavors/liquid-mainnet/extras.css

@@ -1,9 +1,16 @@
 
-.sub-nav .active{
-  border-bottom: solid 2px #46beae;
+.sub-nav .active:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #46beae;
+    height: 3px;
+    border-radius: 10px;
 }
 
-.details-btn > div { 
+.details-btn > div {
     color: #46beae;
     border: 1px solid #46beae;
     background: none;
@@ -15,8 +22,4 @@
 
 .navbar {
     background-image: linear-gradient(-90deg, rgba(13, 141, 119, 1) 0%, rgba(17, 103, 97, 1) 16%, rgba(25, 68, 74, 1) 35%, rgba(29, 42, 48, 1) 57%, rgba(14, 16, 17, 1) 100%);
-}
-
-.main-nav li.active a{
-  border: 1px solid #46beae;
 }

flavors/liquid-testnet/extras.css

@@ -1,21 +1,8 @@
-
-#BitcoinTestnet, #LiquidTestnet{
-    display: block;
-}
-
-#Bitcoin, #Liquid{
-    display: none;
+.sub-nav .active:after {
+  background: #8C8C8C;
 }
 
-.main-nav li.active a{
-    border: 1px solid rgba(168, 184, 201, 1);
-}
-
-.sub-nav .active {
-    border-bottom: solid 2px rgba(168, 184, 201, 1);
-}
-
-.details-btn > div { 
+.details-btn > div {
     color: rgba(168, 184, 201, 1);
     border: 1px solid rgba(168, 184, 201, 1);
 }
@@ -36,10 +23,6 @@
     display: flex;
 }
 
-.main-nav li a{
-    color: #78838e;
-}
-
 .nav-link:hover{
     color: white !important;
 }