Added "highlight_as_new" to MainMenuItem and added Public Entities me…

…nu item
vulekamali · Dec 14, 2023 · b5754ba · b5754ba
1 parent 68c46c0
commit b5754ba
Show file tree

Hide file tree

Showing 5 changed files with 291 additions and 213 deletions.
diff --git a/assets/js/components/header-and-footer/NavBar/index.html b/assets/js/components/header-and-footer/NavBar/index.html
@@ -46,16 +46,20 @@ <h2 class="u-sReadOnly">Navigate to a section on this site:</h2>
             <span class="NavBar-link{{ activeClass }}{{ subLinkClass }} {% if item.children.all %}dropdown{% endif %}">
             {% endif %}
 
-
             {% if item.name == 'homepage' %}
             <span class="NavBar-iconWrap">
               {% include 'components/Icon/index.html' with type="home" %}
             </span>
             <span class="NavBar-text is-mobileOnly">Home</span>
             {% else %}
-            <span class="NavBar-text">{{ item.label }}</span>
+            <span class="NavBar-text">{{ item.label }}
+              {% if item.highlight_as_new %}
+              <span class="Navbar-Tag-new">New</span>
+              {% endif %}
+            </span>
             {% endif %}
 
+
 
             {% if item.url %}
             </a>

diff --git a/assets/scss/components/header-and-footer/NavBar/styles.scss b/assets/scss/components/header-and-footer/NavBar/styles.scss
@@ -131,6 +131,16 @@ $mobile-break: 900px;
   }
 }
 
+.Navbar-Tag-new {
+  border-radius: 6px;
+  background-color: #76B643;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 16.8px;
+  padding: 2px 4px;
+}
+
 .NavBar-link {
   display: block;
   border-bottom: solid 1px #b9b9b9;
@@ -141,7 +151,7 @@ $mobile-break: 900px;
 
   @media screen and (min-width: $mobile-break) {
     border-radius: 18px 18px 0 0;
-    padding: 6px 10px;
+    padding: 6px 6px;
     fill: #4a4a4a;
     user-select: none;
     font-weight: bold;
@@ -191,7 +201,6 @@ $mobile-break: 900px;
   text-decoration: none;
   color: #4a4a4a;
 
-
   @media screen and (min-width: $mobile-break) {
     display: inline-block;
     font-weight: normal;
@@ -294,7 +303,7 @@ $mobile-break: 900px;
   position: relative;
 
   &::after {
-    content: '';
+    content: "";
     display: block;
     width: 0;
     height: 0;