Add user drop-down to top-nav

i-dot-ai · Sep 11, 2024 · b098c72 · b098c72
1 parent aacae3e
commit b098c72
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 63 deletions.
diff --git a/django_app/frontend/package.json b/django_app/frontend/package.json
@@ -41,7 +41,7 @@
   "author": "",
   "dependencies": {
     "govuk-frontend": "^5.2.0",
-    "i.ai-design-system": "^0.4.3",
+    "i.ai-design-system": "^0.4.5",
     "posthog-js": "^1.143.0"
   },
   "devDependencies": {

diff --git a/django_app/frontend/src/styles.scss b/django_app/frontend/src/styles.scss
@@ -127,37 +127,3 @@ upload-button {
 @import "./chat-styles.scss";
 
 @import "./profile-overlay-styles.scss";
-
-/* To be moved into Design System */
-.iai-top-nav__link-item:has(.iai-top-nav__link--user):hover {
-  border-bottom: 0;
-}
-.iai-top-nav__link--user {
-  align-items: center;
-  background-color: var(--iai-product-colour);
-  border: 1px solid black;
-  border-radius: 100%;
-  color: white;
-  display: flex;
-  height: 2rem;
-  justify-content: center;
-  padding: 0.25rem;
-  width: 2rem;
-}
-.iai-top-nav__link--user:hover {
-  border-color: white;
-  top: -1.125rem;
-}
-@media (min-width: 1020px) {
-  .iai-top-nav__link-item {
-    border: 1px solid black;
-  }
-  .iai-top-nav__link-item:has(.iai-top-nav__link--user) {
-    position: relative;
-    width: 2rem;
-  }
-  .iai-top-nav__link--user {
-    position: absolute;
-    top: -1.125rem;
-  }
-}
diff --git a/django_app/redbox_app/templates/base.html b/django_app/redbox_app/templates/base.html
@@ -48,24 +48,31 @@
 
 
   {% if request.user.is_authenticated %}
-    {% set menu_items = [
-      {"text": "Documents", "href": url('documents')},
-      {"text": "Chats", "href": url('chats')},
-      {"text": "Sign out", "href": url('signed-out')},
-      {"text": "My details", "href": url('demographics'), "user_button": request.user.get_initials() }
-    ] %}
+    {{ iaiTopNav(
+      product_name = "Redbox",
+      menu_items = [
+        {"text": "Documents", "href": url('documents')},
+        {"text": "Chats", "href": url('chats')}
+      ],
+      user_items = {
+          "initials": request.user.get_initials(),
+          "menu_items": [
+              {"text": "My details", "href": url('demographics')},
+              {"text": "Sign out", "href": url('signed-out')}
+          ]
+      },
+      phase = "Beta"
+    ) }}
   {% else %}
-    {% set menu_items = [
-      {"text": "Sign in", "href": "sign-in"}
-    ] %}
+    {{ iaiTopNav(
+      product_name = "Redbox",
+      menu_items = [
+        {"text": "Sign in", "href": url('sign-in')}
+      ],
+      phase = "Beta"
+    ) }}
   {% endif %}
 
-  {{ iaiTopNav(
-    product_name = "Redbox",
-    menu_items = menu_items,
-    phase = "Beta"
-  ) }}
-
 
   <main class="govuk-main-wrapper" id="main-content" role="main">
     {% block content %}

diff --git a/django_app/redbox_app/templates/macros/iai-top-nav.html b/django_app/redbox_app/templates/macros/iai-top-nav.html
@@ -1,4 +1,4 @@
-{% macro iaiTopNav(product_name, menu_items, phase, home_path="/") %}
+{% macro iaiTopNav(product_name, menu_items, user_items, phase, home_path="/") %}
 
 <header class="iai-top-nav">
     <div class="iai-top-nav__container govuk-width-container">
@@ -20,20 +20,24 @@
             <nav aria-label="Menu" class="iai-top-nav__nav govuk-width-container">
                 <ul id="navigation" class="iai-top-nav__nav-list">
                     {% for menu_item in menu_items %}
-                        {% if menu_item.user_button %}
-                            <li class="iai-top-nav__link-item">
-                                <a class="iai-top-nav__link iai-top-nav__link--user" href="{{ menu_item.href }}">
-                                    {{ menu_item.user_button }}
-                                    <span class="govuk-visually-hidden">{{ menu_item.text }}</span>
-                                </a>
-                            </li>
-                        {% else %}
-                            <li class="iai-top-nav__link-item {% if menu_item.active %}iai-top-nav__link-item--active{% endif %}">
-                                <a class="iai-top-nav__link" href="{{ menu_item.href }}" {% if menu_item.active %}aria-current="page"{% endif %}>{{ menu_item.text }}</a>
-                            </li>
-                        {% endif %}
+                        <li class="iai-top-nav__link-item {% if menu_item.active %}iai-top-nav__link-item--active{% endif %}">
+                            <a class="iai-top-nav__link" href="{{ menu_item.href }}" {% if menu_item.active %}aria-current="page"{% endif %}>{{ menu_item.text }}</a>
+                        </li>
                     {% endfor %}
                 </ul>
+                {% if user_items %}
+                    <button class="iai-top-nav__link iai-top-nav__link--user" aria-expanded="false">
+                        {{ user_items.initials }}
+                        <span class="govuk-visually-hidden">user</span>
+                    </button>
+                    <ul class="iai-top-nav__user-drop-down">
+                        {% for menu_item in user_items.menu_items %}
+                            <li class="iai-top-nav__link-item iai-top-nav__user-link-item">
+                                <a class="iai-top-nav__link iai-top-nav__user-link" href="{{ menu_item.href }}" {% if menu_item.active %}aria-current="page"{% endif %}>{{ menu_item.text }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
             </nav>
         </mobile-drop-down>
     </div>

diff --git a/tests/pages.py b/tests/pages.py
@@ -99,6 +99,7 @@ def navigate_to_chats(self) -> "ChatsPage":
         return ChatsPage(self.page)
 
     def navigate_my_details(self) -> "MyDetailsPage":
+        self.page.locator(".iai-top-nav__link--user").click()
         self.page.get_by_role("link", name="My details", exact=True).click()
         return MyDetailsPage(self.page)