Add new header layour

uktrade · Jul 24, 2024 · 4e4234c · 4e4234c
1 parent fb21b98
commit 4e4234c
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 58 deletions.
diff --git a/src/core/templates/includes/header_new.html b/src/core/templates/includes/header_new.html
@@ -2,64 +2,58 @@
 {% load render_bundle webpack_static from webpack_loader %}
 {% load site_alert %}
 
-<header class="dwds dwds-header"
-        role="banner"
-        data-module="govuk-header">
-    <!-- logo -->
-    <div class="govuk-header__logo govuk-header__logo--ws gov-grid-column-one-third">
-        <a href="/" class="govuk-header__link govuk-header__link--homepage">
-            <span class="govuk-header__logotype govuk-header__logotype--ws">
-                <img aria-hidden="true"
-                        src="{% webpack_static 'dbt-logo.png' %}"
-                        srcset="{% webpack_static 'dbt-logo@2x.png' %} 2x"
-                        alt="Department for Business & Trade logo" />
-                <span class="govuk-visually-hidden">Department for Business & Trade</span>
-            </span>
-        </a>
-    </div>
-
-    <!-- top row -->
-    <div class="">
-        <!-- app name -->
-        <div class="govuk-header__content gov-grid-column-two-thirds">
-            <a href="/"
-               class="govuk-header__link govuk-header__link--ws govuk-header__service-name govuk-header__service-name--ws">
-                {% if FEATURE_FLAGS.new_homepage %}
-                    DBT Intranet
-                {% else %}
-                    Digital Workspace
+<div class="dwds-header-container">
+    <div class="dwds dwds-container">
+        <header class="dwds-header" role="banner" data-module="govuk-header">
+            <!-- logo -->
+            <div class="dwds-header-logo govuk-header__logo govuk-header__logo--ws">
+                <a href="/" class="govuk-header__link govuk-header__link--homepage">
+                    <span class="govuk-header__logotype govuk-header__logotype--ws">
+                        <img aria-hidden="true"
+                                src="{% webpack_static 'dbt-logo.png' %}"
+                                srcset="{% webpack_static 'dbt-logo@2x.png' %} 2x"
+                                alt="Department for Business & Trade logo" />
+                        <span class="govuk-visually-hidden">Department for Business & Trade</span>
+                    </span>
+                </a>
+            </div>
+
+            <!-- top row -->
+            <div class="dwds-header-top">
+                <!-- app name -->
+                <div class="dwds-header-app-name">
+                    <a href="/" class="">
+                        DBT Intranet
+                    </a>
+                </div>
+                <!-- profile -->
+                {% include 'includes/profile_panel.html' %}
+                <!-- mobile menu -->
+                <button type="button"
+                        class="govuk-header__menu-button govuk-header__menu-button--ws govuk-js-header-toggle"
+                        aria-controls="navigation"
+                        aria-label="Show or hide Top Level Navigation"
+                        hidden>Menu</button>
+            </div>
+
+            <!-- bottom row -->
+            <div class="dwds-header-bottom">
+                {% if USER_IS_AUTHENTICATED %}
+                    <!-- nav links -->
+                    <nav aria-label="Top Level Navigation" class="dwds-header-nav-links">
+                        {% main_menu max_levels=1 template="menus/main_menu.html" apply_active_classes=True %}
+                    </nav>
+                    <!-- search panel -->
+                    <div class="dwds-header-search">
+                        {% if not search_url %}
+                            {% url 'search:all' as search_url %}
+                        {% endif %}
+                        {% include 'search/partials/search_form.html' with placeholder="Search pages and people" search_url=search_url %}
+                    </div>
                 {% endif %}
-            </a>
-        </div>
-        <!-- profile -->
-        {% include 'includes/profile_panel.html' %}
-        <!-- mobile menu -->
-        <button type="button"
-                class="govuk-header__menu-button govuk-header__menu-button--ws govuk-js-header-toggle"
-                aria-controls="navigation"
-                aria-label="Show or hide Top Level Navigation"
-                hidden>Menu</button>
-    </div>
-
-    <!-- bottom row -->
-    <div class="">
-        {% if USER_IS_AUTHENTICATED %}
-            <!-- nav links -->
-            <nav aria-label="Top Level Navigation" class="govuk-header__navigation">
-                {% main_menu max_levels=1 template="menus/main_menu.html" apply_active_classes=True %}
-            </nav>
-            <!-- search toggle -->
-            <button>Search</button>
-        {% endif %}
-    </div>
-
-    <!-- search panel -->
-    <div class="site-search">
-        {% if not search_url %}
-            {% url 'search:all' as search_url %}
-        {% endif %}
-        {% include 'search/partials/search_form.html' with placeholder="Search pages and people" search_url=search_url %}
+            </div>
+        </header>
     </div>
-</header>
+</div>
 
 <!-- FIXME: removed site alert banner -->
diff --git a/src/dw_design_system/dwds/styles/header.scss b/src/dw_design_system/dwds/styles/header.scss
@@ -1,5 +1,44 @@
 // FIXME: Where should these styles live in the new design system?
 
+.dwds-header-container {
+    border-bottom: 4px solid var(--dbt-red);
+}
+
 .dwds-header {
-
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content;
+    grid-template-areas:
+        "logo top"
+        "logo bottom";
+    align-items: center;
+    gap: var(--s-4);
+    padding: var(--s-4) 0;
+
+    &-logo {
+        grid-area: logo;
+        margin-right: 1rem;
+    }
+
+    &-top {
+        grid-area: top;
+
+        display: flex;
+        align-items: center;
+    }
+
+    &-bottom {
+        grid-area: bottom;
+
+        display: flex;
+        align-items: center;
+    }
+
+    &-app-name {
+        flex-grow: 1;
+    }
+
+    &-nav-links {
+        flex-grow: 1;
+    }
 }
diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
@@ -3,6 +3,7 @@
   --dbt-blue: #00285F;
   --dbt-light-blue: #0063BE;
   --dbt-light-blue-rgb: 0, 99, 190;
+  --dbt-red: #cf102d;
 
   // Colour
   --color-heading: var(--dbt-blue);

diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
@@ -6,6 +6,7 @@
 @forward "styles/animations";
 // @forward "styles/base";  // Use once we migrate everything to the new approach
 @forward "styles/temporary-base"; // Remove this once we switch to the above base.scss
+@forward "styles/header.scss";
 
 // Components
 @forward "components/one_up_card";