Added social icons to top nav menu

Signed-off-by: Steve Scargall <37674041+sscargal@users.noreply.github.com>

Author: sscargal

hugo.toml

@@ -75,6 +75,21 @@ tags = 'tags'
     url = 'http://docs.memmachine.ai'
     weight = 70
 
+  # Social media links for the top nav
+  [[menus.social]]
+    name = "Discord"
+    url = "https://discord.gg/usydANvKqD"
+    weight = 10
+    [menus.social.params]
+      icon = "discord"
+
+  [[menus.social]]
+    name = "GitHub"
+    url = "https://github.com/MemMachine/MemMachine"
+    weight = 20
+    [menus.social.params]
+      icon = "github"
+
   # Footer Product menu
   [[menus.footerProduct]]
     name = 'Examples'

themes/memmachine/assets/css/styles.css

@@ -1950,4 +1950,22 @@ footer p {
 
 .social-icon {
   margin-top: 20px;
+}
+
+/* ======================================
+ * Header Social Icons
+/* ====================================== */
+.header-social-icons {
+  display: flex;
+  align-items: center;
+  gap: 15px; /* Adjust spacing as needed */
+}
+
+.header-social-icons a {
+  color: var(--light-300);
+  font-size: 20px; /* Adjust size as needed */
+}
+
+.header-social-icons a:hover {
+  color: var(--lavender);
 }

themes/memmachine/layouts/_partials/header.html

@@ -1,6 +1,3 @@
-<!--=======================================================
-                          HEADER
-=======================================================-->
 <div class="desktop-header">
   <div class="container-fluid">
     <div class="row align-items-center">
@@ -10,15 +7,16 @@
       <div class="col-md-8">
         {{- partial "menu.html" (dict "menuID" "main" "page" .) -}}
       </div>
-      <div class="col-md-2 text-end">
+      <div class="col-md-2 text-end d-flex align-items-center justify-content-end">
+        {{- partial "social-icons.html" . -}}
         <!--
-        <div class="search-icon">
+        <div class="search-icon ms-2">
           <a href="#" id="toggleSearch">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_60_3824)"><path d="M9.5 19C4.262 19 0 14.738 0 9.5C0 4.262 4.262 0 9.5 0C14.738 0 19 4.262 19 9.5C19 14.738 14.738 19 9.5 19ZM9.5 1.5C5.089 1.5 1.5 5.089 1.5 9.5C1.5 13.911 5.089 17.5 9.5 17.5C13.911 17.5 17.5 13.911 17.5 9.5C17.5 5.089 13.911 1.5 9.5 1.5Z" fill="#B3B3D0" /><path d="M23.25 24C23.1515 24.0003 23.0539 23.9809 22.9629 23.9432C22.8719 23.9054 22.7894 23.8499 22.72 23.78L15.16 16.22C15.0903 16.1503 15.0351 16.0676 14.9974 15.9766C14.9597 15.8856 14.9402 15.788 14.9402 15.6895C14.9402 15.591 14.9597 15.4934 14.9974 15.4024C15.0351 15.3114 15.0903 15.2287 15.16 15.159C15.2297 15.0893 15.3124 15.0341 15.4034 14.9964C15.4944 14.9587 15.592 14.9393 15.6905 14.9393C15.789 14.9393 15.8866 14.9587 15.9776 14.9964C16.0686 15.0341 16.1513 15.0893 16.221 15.159L23.781 22.719C23.8861 22.8239 23.9578 22.9577 23.9868 23.1033C24.0159 23.249 24.001 23.4 23.9442 23.5372C23.8873 23.6744 23.7909 23.7916 23.6674 23.874C23.5438 23.9564 23.3985 24.0003 23.25 24Z" fill="#B3B3D0" /></g><defs><clipPath id="clip0_60_3824"><rect width="24" height="24" fill="white" /></clipPath></defs></svg>
           </a>
         </div>
         
-        <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary">Get Started</a>
+        <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary ms-2">Get Started</a>
         -->
       </div>
     </div>
@@ -35,12 +33,12 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/></svg>
     </strong>
     {{- partial "menu.html" (dict "menuID" "main" "page" .) -}}
+    {{- partial "social-icons.html" . -}}
+    <!--
     <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary">Get Started</a>
+    -->
     <div class="">
-      <!--
-      <input class="mobile-search" type="text" placeholder="Search..." />
-      -->
-    </div>
+      </div>
   </div>
 </div>
 

themes/memmachine/layouts/_partials/social-icons.html

@@ -0,0 +1,11 @@
+<div class="header-social-icons d-flex">
+  {{ with site.Menus.social }}
+    {{- range . }}
+      <a class="me-2" href="{{ .URL }}" target="_blank" rel="noopener" aria-label="{{ .Name }}">
+        {{- with .Params.icon }}
+        <i class="fab fa-{{ . }}" aria-hidden="true"></i>
+        {{- end }}
+      </a>
+    {{- end }}
+  {{- end }}
+</div>