update menu structure

yuhattor · yuhattor · commit ffa03c2ab970 · 2025-02-10T14:03:38.000+09:00
diff --git a/config/_default/menus.en.yaml b/config/_default/menus.en.yaml
@@ -1,94 +1,92 @@
 main:
-  - name: Learn
-    URL: learn
+  - name: About
+    URL: about
     weight: 1
-    identifier: learn
-  - name: Books
-    parent: learn
-    URL: learn/books
+    identifier: about
+  - name: Who We Are
+    URL: about
+    parent: about
+    weight: 1
+  - name: Board & Governance
+    URL: about/board
+    parent: about
     weight: 2
-  - name: Learning Path
-    parent: learn
-    URL: learn/learning-path
+  - name: Members
+    URL: about/members
+    parent: about
     weight: 3
+  - name: Code of Conduct
+    URL: about/codeofconduct
+    parent: about
+    weight: 4
+  - name: Contact Us
+    URL: about/contact
+    parent: about
+    weight: 5
+  - name: Projects
+    URL: learn/patterns
+    weight: 2
+    identifier: projects
   - name: Patterns
-    parent: learn
     URL: learn/patterns
-    weight: 4
+    parent: projects
+    weight: 1
   - name: Research
-    parent: learn
     URL: learn/research
-    weight: 5
-  - name: Videos
-    parent: learn
-    URL: https://www.youtube.com/@InnerSourceCommons
-    weight: 6
+    parent: projects
+    weight: 2
+  - name: Training
+    URL: learn
+    weight: 3
+    identifier: training
+  - name: Books
+    URL: learn/books
+    parent: training
+    weight: 1
+  - name: Learning Path
+    URL: learn/learning-path
+    parent: training
+    weight: 2
+  - name: Community
+    URL: community
+    weight: 4
+    identifier: community
   - name: Events
     URL: events/community-calls
-    weight: 2
-    identifier: events
+    parent: community
+    weight: 1
   - name: Summit 2024
     URL: events/isc-2024
-    parent: events
-    weight: 4
+    parent: community
+    weight: 2
   - name: Local Gatherings
     URL: https://gatherings.innersourcecommons.org/
-    parent: events
-    weight: 5
+    parent: community
+    weight: 3
   - name: Community Calls
     URL: events/community-calls
-    parent: events
-    weight: 6
-  - name: Past Summits
-    URL: events/past-summits
-    parent: events
-    weight: 7
+    parent: community
+    weight: 4
   - name: Calendar
     URL: calendar
-    weight: 3
-  - name: Community
-    identifier: community
-    URL: community
-    weight: 4
-  - name: Stories
-    URL: stories
+    parent: community
     weight: 5
   - name: Services Directory
     URL: community/services
     parent: community
-    weight: 2
-  - name: About
-    identifier: about
-    URL: about
     weight: 6
+  - name: Blog & News
+    URL: about/announcements
+    weight: 5
+    identifier: news
   - name: Announcements
     URL: about/announcements
-    parent: about
+    parent: news
     weight: 1
-  - name: Board & Governance
-    URL: about/board
-    parent: about
+  - name: Stories
+    URL: stories
+    parent: news
     weight: 2
-  - name: Members
-    URL: about/members
-    parent: about
-    weight: 3
-  - name: Sponsors
-    URL: about/sponsors
-    parent: about
-    weight: 4
-  - name: Code of Conduct
-    URL: about/codeofconduct
-    parent: about
-    weight: 5
-  - name: Contact Us
-    URL: about/contact
-    parent: about
-    weight: 6
-  # - name: Vacancies
-  #   URL: about/vacancies
-  #   parent: about
-  #   weight: 7
 footer_left:
   - name: Learn
     URL: learn
diff --git a/config/_default/params.yaml b/config/_default/params.yaml
@@ -5,6 +5,7 @@ plugins:
     - link: plugins/slick/slick.css
     - link: plugins/youmax/youmax.css
     - link: plugins/bootstrap-select/css/bootstrap-select.min.css
+    - link: css/custom-menu.css
   js:
     - link: plugins/jQuery/jquery.min.js
     - link: plugins/bootstrap/bootstrap.min.js
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -1,49 +1,90 @@
 {{ "<!-- navigation -->" | safeHTML }}
 <header class="navigation">
-  <div class="container">
-    <!-- navbar -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
-      <a class="navbar-brand"
-        href='{{ if eq .Site.Language.Lang "en" }}{{ site.BaseURL }}{{ else }}{{ site.BaseURL }}{{ .Site.Language.Lang }}{{end}}'>
-        <img width="{{ site.Params.logo_width}}" class="img-fluid" src="{{ site.Params.logo | absURL }}"
-          alt="{{ site.Title }}">
+  <div class="container wrap">
+    <div class="logo">
+      <a href='{{ if eq .Site.Language.Lang "en" }}{{ site.BaseURL }}{{ else }}{{ site.BaseURL }}{{ .Site.Language.Lang }}{{end}}' title="{{ site.Title }}">
+        <img loading="eager" decoding="async" fetchpriority="high" width="{{ site.Params.logo_width}}" class="img-fluid" src="{{ site.Params.logo | absURL }}" alt="{{ site.Title }}">
       </a>
-      <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation">
-        <i class="ti-menu"></i>
-      </button>
-
-      <div class="collapse navbar-collapse text-center" id="navigation">
-        <ul class="navbar-nav mx-auto">
-          {{ range site.Menus.main }}
-          {{ if .HasChildren }}
-          <li class="nav-item dropdown">
-            <a class="nav-link nav-with-toggle" href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}>{{.Name }}</a>
-            <a class="dropdown-toggle" href="#" role="button" data-toggle="dropdown" data-reference="dropdown-toggle"
-              data-display="static"></a>
-            <div class="dropdown-menu">
-              {{ range .Children }}
-              <a class="dropdown-item" href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}>{{ .Name }}</a>
-              {{ end }}
+    </div>
+
+    <nav class="main-menu">
+      <ul class="main-menu__wrapper">
+        {{ range site.Menus.main }}
+        {{ if .HasChildren }}
+        <li class="menu-item-has-children">
+          <a href="#"><span>{{ .Name }}</span></a>
+          <div class="sub-menu">
+            <div class="col-container">
+              <div class="col1">
+                <ul class="menu">
+                  <li class="menu-title">Main</li>
+                  {{ range first 5 .Children }}
+                  <li class="menu-item">
+                    <a href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}>
+                      {{ .Name }}
+                      {{ if .Post }}<span class="menu-description">{{ .Post }}</span>{{ end }}
+                    </a>
+                  </li>
+                  {{ end }}
+                </ul>
+              </div>
+              <div class="col2">
+                <ul class="menu">
+                  <li class="menu-title">Additional Info</li>
+                  {{ range after 5 .Children }}
+                  <li class="menu-item">
+                    <a href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}>
+                      {{ .Name }}
+                      {{ if .Post }}<span class="menu-description">{{ .Post }}</span>{{ end }}
+                    </a>
+                  </li>
+                  {{ end }}
+                </ul>
+              </div>
+              <div class="col3">
+                <ul class="menu">
+                  <li class="menu-title">Featured Articles</li>
+                </ul>
+                <div class="featured-articles">
+                  {{ if eq .Name "About" }}
+                  <div class="article-card">
+                    <img src="/images/featured/about.jpg" alt="About Us">
+                    <h4>Who We Are</h4>
+                    <p>Learn more about InnerSource Commons</p>
+                  </div>
+                  {{ else if eq .Name "Projects" }}
+                  <div class="article-card">
+                    <img src="/images/featured/projects.jpg" alt="Our Projects">
+                    <h4>Latest Projects</h4>
+                    <p>Discover our latest InnerSource initiatives</p>
+                  </div>
+                  {{ end }}
+                </div>
+              </div>
             </div>
-          </li>
-          {{ else }}
-          <li class="nav-item">
-            <a class="nav-link" href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}>{{ .Name }}</a>
-          </li>
-          {{ end }}
-          {{ end }}
-        </ul>
-        <a href="{{ "slack" | absURL }}" class="btn btn-sm slack-invite-btn btn-primary ml-2" target="_blank"><i
-            class="ti-comments pr-2"></i>{{ T "join_slack" }}</a>
+          </div>
+        </li>
+        {{ else }}
+        <li class="menu-item">
+          <a href="{{ .URL | absURL }}" {{ with .Pre }} target="{{ . }}" {{ end }}><span>{{ .Name }}</span></a>
+        </li>
+        {{ end }}
+        {{ end }}
+      </ul>
+
+      <div class="header-cta">
+        <a href="{{ "slack" | absURL }}" class="btn btn-primary" target="_blank">
+          <i class="ti-comments pr-2"></i>{{ T "join_slack" }}
+        </a>
         {{ if in .CurrentSection.Permalink "/learn/learning-path"}}
-        <select id="langpicker" class="selectpicker" data-style="btn-light btn-sm ml-3" data-width="fit">
+        <select id="langpicker" class="selectpicker" data-style="btn-light" data-width="fit">
           <option>{{ .Site.Language.LanguageName }}</option>
           {{ range .Translations }}
           <option value="{{ .Permalink }}">{{ .Language.LanguageName }}</option>
           {{ end }}
         </select>
         {{ else }}
-        <select id="langpicker" class="selectpicker" data-style="btn-light btn-sm ml-3" data-width="fit">
+        <select id="langpicker" class="selectpicker" data-style="btn-light" data-width="fit">
           <option>{{ .Site.Language.LanguageName }}</option>
           {{ range where .Translations ".Language.Lang" "in" "en ja fr pt-br"}}
           <option value="{{ .Permalink }}">{{ .Language.LanguageName }}</option>
@@ -52,8 +93,61 @@
         {{ end }}
       </div>
     </nav>
+
+    <button class="hamburger" type="button" aria-label="Toggle Menu">
+      <span class="hamburger-box">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
   </div>
 </header>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const hamburger = document.querySelector('.hamburger');
+  const menu = document.querySelector('.main-menu__wrapper');
+  const subMenuParents = document.querySelectorAll('.menu-item-has-children > a');
+  const isMobile = window.innerWidth <= 992;
+
+  // ハンバーガーメニューの開閉
+  hamburger.addEventListener('click', function() {
+    this.classList.toggle('is-active');
+    menu.classList.toggle('is-active');
+  });
+
+  // モバイル時のサブメニュー制御
+  if (isMobile) {
+    subMenuParents.forEach(item => {
+      item.addEventListener('click', function(e) {
+        e.preventDefault();
+        const parent = this.parentElement;
+        const subMenu = this.nextElementSibling;
+        
+        // 他のメニューを閉じる
+        subMenuParents.forEach(otherItem => {
+          if (otherItem !== this) {
+            otherItem.parentElement.classList.remove('is-active');
+            otherItem.nextElementSibling.classList.remove('is-active');
+          }
+        });
+
+        // 現在のメニューをトグル
+        parent.classList.toggle('is-active');
+        subMenu.classList.toggle('is-active');
+      });
+    });
+  }
+
+  // ウィンドウリサイズ時の処理
+  window.addEventListener('resize', function() {
+    const isNowMobile = window.innerWidth <= 992;
+    if (isNowMobile !== isMobile) {
+      location.reload();
+    }
+  });
+});
+</script>
+
 {{ "<!-- /navigation -->" | safeHTML }}
 
 <!-- <section class="notice bg-primary text-light">
diff --git a/static/css/custom-menu.css b/static/css/custom-menu.css
