Add navbar logo

decidim · Jul 29, 2020 · bc6abcc · bc6abcc
1 parent 2702e8c
commit bc6abcc
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 31 deletions.
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -275,3 +275,43 @@ html.is-clipped--nav {
   content: " (latest)";
 }
 */
+
+/* Decidim navbar logo */
+
+.navbar-item__brand-wrapper {
+  /* align-items: baseline !important; */
+  /* margin-top: 0.25rem; */
+  text-transform: lowercase;
+  font-weight: 600;
+  display: flex;
+  flex-grow: 1;
+}
+
+.navbar-item__brand-wrapper a:hover {
+  opacity: 0.85;
+}
+
+.navbar-item__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 0.75rem;
+  padding-right: 0.25rem;
+  border-right: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.navbar-item__logo {
+  width: 2rem;
+  margin-right: 0.3rem;
+  flex-shrink: 0;
+  display: block;
+}
+
+.navbar-item__name {
+  display: flex;
+  align-items: center;
+  padding-top: 0.65rem;
+  padding-left: 0.5rem;
+  color: var(--color-navbar-text);
+  font-size: 1.15rem;
+}
diff --git a/src/img/decidim/decidim-logo-topbar.svg b/src/img/decidim/decidim-logo-topbar.svg
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
@@ -1,7 +1,13 @@
 <header class="header">
   <nav class="navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}">{{site.title}}</a>
+      <div class="navbar-item__brand-wrapper">
+        <a class="navbar-item__brand" href="http://decidim.org">
+          <img class="navbar-item__logo" src="{{{uiRootPath}}}/img/decidim/decidim-logo-topbar.svg" alt="Decidim">
+        </a>
+        <a class="navbar-item" href="{{{or site.url (or siteRootUrl siteRootPath)}}}">{{site.title}}</a>
+      </div>
+
       <button class="navbar-burger" data-target="topbar-nav">
         <span></span>
         <span></span>
@@ -10,36 +16,8 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        <a class="navbar-item" href="#">Home</a>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Products</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Product A</a>
-            <a class="navbar-item" href="#">Product B</a>
-            <a class="navbar-item" href="#">Product C</a>
-          </div>
-        </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Services</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Service A</a>
-            <a class="navbar-item" href="#">Service B</a>
-            <a class="navbar-item" href="#">Service C</a>
-          </div>
-        </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Resources</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Resource A</a>
-            <a class="navbar-item" href="#">Resource B</a>
-            <a class="navbar-item" href="#">Resource C</a>
-          </div>
-        </div>
-        <div class="navbar-item">
-          <span class="control">
-            <a class="button is-primary" href="#">Download</a>
-          </span>
-        </div>
+        <a class="navbar-item" href="https://decidim.org">decidim.org</a>
+        <a class="navbar-item" href="https://docs.decidim.org">Docs Home</a>
       </div>
     </div>
   </nav>