From e532ef29a6e57582a098f99efad071d1e6bf5a71 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 23 Nov 2020 14:02:01 +0200
Subject: [PATCH] desktop nav: positioning shortcuts block
---
.../hy-desktop-menu-links.scss | 4 +-
.../hy-desktop-menu-links.tsx | 50 ++++++++++---------
2 files changed, 28 insertions(+), 26 deletions(-)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index a11d6997..6c4f9cae 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -114,6 +114,7 @@
}
&__desktop-menu {
+ display: flex;
position: relative;
// first level link inside panel
@@ -238,6 +239,7 @@
// Shortcuts
.shortcuts-panel {
list-style: none;
+ margin-left: 48px;
&__title {
@include font-size(18px, 22px);
@@ -267,8 +269,6 @@
text-decoration: none;
.icon {
- position: absolute;
- right: 0;
svg {
padding: 4px;
}
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 2e489aa6..e61b7ea5 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -107,30 +107,32 @@ export class HyDesktopMenuLinks {
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}>
<div class="hy-desktop-menu-panel__desktop-menu">
- <a
- aria-current={label}
- href={url}
- class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
- menu-link-id={id}
- >
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={40} />
- </span>
- <span class="label">{label}</span>
- {description && <span class="description">{description}</span>}
- </a>
- <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
- {items.map(({label, url}) => (
- <li>
- <a href={url}>
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-caret-right'} size={12} />
- </span>
- <span class="label">{label}</span>
- </a>
- </li>
- ))}
- </ul>
+ <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
+ <a
+ aria-current={label}
+ href={url}
+ class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
+ menu-link-id={id}
+ >
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
+ </span>
+ <span class="label">{label}</span>
+ {description && <span class="description">{description}</span>}
+ </a>
+ <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
+ {items.map(({label, url}) => (
+ <li>
+ <a href={url}>
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="label">{label}</span>
+ </a>
+ </li>
+ ))}
+ </ul>
+ </div>
{shortcuts.length > 0 && (
<ul class="shortcuts-panel">
<h2 class="shortcuts-panel__title">{'Shortcuts'}</h2>
--
GitLab