Add dropdown enhancements and new apps card with brand icons (#2249)

core/scss/ui/_dropdowns.scss

@@ -109,6 +109,7 @@
 
 .dropdown-menu-card {
   padding: 0;
+  min-width: 20rem;
 
   > .card {
     margin: 0;

core/scss/ui/_type.scss

@@ -184,6 +184,17 @@ a:hover:has(.icon) {
   text-decoration: none;
 }
 
+.link-hoverable {
+  border-radius: var(--#{$prefix}border-radius);
+  transition: background-color .15s ease-in-out;
+
+  &:hover {
+    text-decoration: none;
+    color: var(--#{$prefix}primary);
+    background: color-transparent(var(--#{$prefix}secondary), .04);
+  }
+}
+
 /**
 Subheader
  */

preview/pages/_data/brands.json

@@ -0,0 +1,74 @@
+[
+  {"image": "amazon.svg", "name": "Amazon" },
+  {"image": "android.svg", "name": "Android" },
+  {"image": "app-store.svg", "name": "Apple App Store" },
+  {"image": "apple-podcast.svg", "name": "Apple Podcast" },
+  {"image": "apple.svg", "name": "Apple" },
+  {"image": "behance.svg", "name": "Behance" },
+  {"image": "discord.svg", "name": "Discord" },
+  {"image": "dribbble.svg", "name": "Dribbble" },
+  {"image": "dropbox.svg", "name": "Dropbox" },
+  {"image": "ever-green.svg", "name": "Ever Green" },
+  {"image": "facebook.svg", "name": "Facebook" },
+  {"image": "figma.svg", "name": "Figma" },
+  {"image": "font-awesome.svg", "name": "Font Awesome" },
+  {"image": "google-ads.svg", "name": "Google Ads" },
+  {"image": "google-adsense.svg", "name": "Google AdSense" },
+  {"image": "google-analytics.svg", "name": "Google Analytics" },
+  {"image": "google-cloud.svg", "name": "Google Cloud" },
+  {"image": "google-drive.svg", "name": "Google Drive" },
+  {"image": "google-fit.svg", "name": "Google Fit" },
+  {"image": "google-home.svg", "name": "Google Home" },
+  {"image": "google-maps.svg", "name": "Google Maps" },
+  {"image": "google-meet.svg", "name": "Google Meet" },
+  {"image": "google-photos.svg", "name": "Google Photos" },
+  {"image": "google-play.svg", "name": "Google Play" },
+  {"image": "google-shopping.svg", "name": "Google Shopping" },
+  {"image": "google-teams.svg", "name": "Google Teams" },
+  {"image": "google.svg", "name": "Google" },
+  {"image": "instagram.svg", "name": "Instagram" },
+  {"image": "klarna.svg", "name": "Klarna" },
+  {"image": "linkedin.svg", "name": "LinkedIn" },
+  {"image": "mailchimp.svg", "name": "Mailchimp" },
+  {"image": "medium.svg", "name": "Medium" },
+  {"image": "messenger.svg", "name": "Messenger" },
+  {"image": "meta.svg", "name": "Meta" },
+  {"image": "monday.svg", "name": "Monday" },
+  {"image": "netflix.svg", "name": "Netflix" },
+  {"image": "notion.svg", "name": "Notion" },
+  {"image": "office-365.svg", "name": "Office 365" },
+  {"image": "opera.svg", "name": "Opera" },
+  {"image": "paypal.svg", "name": "PayPal" },
+  {"image": "petreon.svg", "name": "Patreon" },
+  {"image": "pinterest.svg", "name": "Pinterest" },
+  {"image": "play-store.svg", "name": "Play Store" },
+  {"image": "quora.svg", "name": "Quora" },
+  {"image": "reddit.svg", "name": "Reddit" },
+  {"image": "shopify.svg", "name": "Shopify" },
+  {"image": "skype.svg", "name": "Skype" },
+  {"image": "slack.svg", "name": "Slack" },
+  {"image": "snapchat.svg", "name": "Snapchat" },
+  {"image": "soundcloud.svg", "name": "SoundCloud" },
+  {"image": "spotify.svg", "name": "Spotify" },
+  {"image": "stripe.svg", "name": "Stripe" },
+  {"image": "telegram.svg", "name": "Telegram" },
+  {"image": "tiktok.svg", "name": "TikTok" },
+  {"image": "tinder.svg", "name": "Tinder" },
+  {"image": "trello.svg", "name": "Trello" },
+  {"image": "truth.svg", "name": "Truth" },
+  {"image": "tumblr.svg", "name": "Tumblr" },
+  {"image": "twitch.svg", "name": "Twitch" },
+  {"image": "twitter.svg", "name": "Twitter" },
+  {"image": "vimeo.svg", "name": "Vimeo" },
+  {"image": "vk.svg", "name": "VK" },
+  {"image": "watppad.svg", "name": "Wattpad" },
+  {"image": "webflow.svg", "name": "Webflow" },
+  {"image": "whatsapp.svg", "name": "WhatsApp" },
+  {"image": "wordpress.svg", "name": "WordPress" },
+  {"image": "xing.svg", "name": "Xing" },
+  {"image": "yelp.svg", "name": "Yelp" },
+  {"image": "youtube.svg", "name": "YouTube" },
+  {"image": "zapier.svg", "name": "Zapier" },
+  {"image": "zendesk.svg", "name": "Zendesk" },
+  {"image": "zoom.svg", "name": "Zoom" }
+]

preview/pages/_includes/cards/navbar-apps.html

@@ -0,0 +1,23 @@
+<div class="card">
+	<div class="card-header">
+		<div class="card-title">My Apps</div>
+
+		<div class="card-actions btn-actions">
+			<a href="#" class="btn-action">
+				{% include "ui/icon.html" icon="settings" %}
+			</a>
+		</div>
+	</div>
+	<div class="card-body scroll-y p-2" style="max-height: 50vh">
+		<div class="row g-0">
+			{% for brand in brands %}
+			<div class="col-4">
+				<a href="#" class="d-flex flex-column flex-center text-center text-secondary py-2 px-2 link-hoverable">
+					<img src="{{ page | relative }}/static/brands/{{ brand.image }}" class="w-6 h-6 mx-auto mb-2" width="24" height="24" alt="">
+					<span class="h5">{{ brand.name }}</span>
+				</a>
+			</div>
+			{% endfor %}
+		</div>
+	</div>
+</div>

preview/pages/_includes/cards/navbar-notifications.html

@@ -1,6 +1,7 @@
 <div class="card">
-	<div class="card-header">
-		<h3 class="card-title">Last updates</h3>
+	<div class="card-header d-flex">
+		<h3 class="card-title">Notifications</h3>
+		<div class="btn-close ms-auto" data-bs-dismiss="dropdown"></div>
 	</div>
 	<div class="list-group list-group-flush list-group-hoverable">
 		<div class="list-group-item">
@@ -68,4 +69,10 @@
 			</div>
 		</div>
 	</div>
+	<div class="card-body">
+		<div class="row">
+			<div class="col">{% include "ui/button.html" block text="Archive all" %}</div>
+			<div class="col">{% include "ui/button.html" block text="Mark all as read" %}</div>
+		</div>
+	</div>
 </div>

preview/pages/_includes/layout/navbar-side.html

@@ -25,9 +25,8 @@
 				{% include "ui/icon.html" icon="sun" %}
 			</a>
 		</div>
-
-		<div class="nav-item dropdown d-none d-md-flex me-3">
-			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+		<div class="nav-item dropdown d-none d-md-flex">
+			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
 				{% include "ui/icon.html" icon="bell" %}
 				<span class="badge bg-red"></span>
 			</a>
@@ -35,6 +34,15 @@
 				{% include "cards/navbar-notifications.html" %}
 			</div>
 		</div>
+
+		<div class="nav-item dropdown d-none d-md-flex me-3">
+			<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
+				{% include "ui/icon.html" icon="apps" %}
+			</a>
+			<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+				{% include "cards/navbar-apps.html" %}
+			</div>
+		</div>
 	</div>
 
 	<div class="nav-item dropdown">