modify: 共通ヘッダーのグローバルナビゲーションの調整

・遷移先の URL を `{{ siteUrl }}` に変更
・リクエストされた最初のセグメントにあわせ、アクティブなセクションに `.sel` を付加するための分岐処理を追加

templates/_partials/header.html

@@ -7,6 +7,9 @@
 {# ------------------------------------------
 変数など
 --------------------------------------------- #}
+{# リクエストされた最初のセグメントをセット #}
+{% set firstSegment = craft.app.request.segments | first %}
+
 
 {# ------------------------------------------
 出力
@@ -20,7 +23,7 @@
         <a href="https://www.facebook.com/" data-icon="facebook" title="Happy Lager on Facebook"></a>
       </div><!-- /#social -->
       <div id="search">
-        <form action="./search/results.html" class="search-form">
+        <form action="{{ siteUrl }}search/results.html" class="search-form">
           <input type="search" name="q" placeholder="Search">
         </form>
       </div><!-- /#search -->
@@ -30,32 +33,32 @@
 <header id="header">
   <div class="flex">
     <div class="g1-flex4 g2-flex6 g3-flex12">
-      <h1><a href="./"><img src="/assets/images/happylager.svg" width="300" height="125" alt="Happy Lager - Enjoying Every Bit - Since 2006"></a></h1>
+      <h1><a href="{{ siteUrl }}"><img src="/assets/images/happylager.svg" width="300" height="125" alt="Happy Lager - Enjoying Every Bit - Since 2006"></a></h1>
       <nav>
         <ul>
           <li>
-            <a href="./about/" >
+            <a href="{{ siteUrl }}about/"{% if firstSegment == 'about' %} class="sel"{% endif %}>
               <strong>The Brewery</strong>
               <span>-</span>
               <em>About Us</em>
             </a>
           </li>
           <li>
-            <a href="./services/" >
+            <a href="{{ siteUrl }}services/"{% if firstSegment == 'services' %} class="sel"{% endif %}>
               <strong>How It’s Made</strong>
               <span>-</span>
               <em>Services</em>
             </a>
           </li>
           <li>
-            <a href="./work/" >
+            <a href="{{ siteUrl }}work/"{% if firstSegment == 'work' %} class="sel"{% endif %}>
               <strong>What’s On Tap</strong>
               <span>-</span>
               <em>Our Work</em>
             </a>
           </li>
           <li>
-            <a href="./news/" >
+            <a href="{{ siteUrl }}news/"{% if firstSegment == 'news' %} class="sel"{% endif %}>
               <strong>Brew News</strong>
               <span>-</span>
               <em>The Latest</em>
@@ -65,4 +68,4 @@ <h1><a href="./"><img src="/assets/images/happylager.svg" width="300" height="12
       </nav>
     </div>
   </div><!-- /.flex -->
-</header><!-- /#header -->
+</header><!-- /#header -->