feat(menu): add large menu with icons

cft-group · Jan 14, 2021 · bbe2008 · bbe2008
1 parent ea64c8d
commit bbe2008
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/src/packages/core/src/menu/menu.css b/src/packages/core/src/menu/menu.css
@@ -9,6 +9,10 @@
   z-index: 8999;
 }
 
+._e_menu_large {
+  padding: var(--S12) var(--S8);
+}
+
 ._e_menu__item {
   display: flex;
   align-items: center;
@@ -21,6 +25,10 @@
 
   &:hover {
     background-color: var(--N50);
+
+    & ._e_menu__item-icon svg {
+      fill: var(--N600);
+    }
   }
 
   &:focus {
@@ -30,4 +38,38 @@
   &:active {
     background-color: var(--N100);
   }
+
+  ._e_menu_large & {
+    height: var(--S48);
+    padding: 0 var(--S12);
+    font: var(--Subhead);
+  }
+}
+
+._e_menu__item-icon {
+  width: var(--S24);
+  height: var(--S24);
+  margin-right: var(--S20);
+
+  & svg {
+    width: var(--S24);
+    height: var(--S24);
+    fill: var(--N200);
+  }
+}
+
+._e_menu__separator {
+  width: calc(100% - 2 * var(--S8));
+  height: 1px;
+  margin: var(--S8) var(--S12);
+  background-color: var(--N100);
+}
+
+._e_menu__text-item {
+  display: flex;
+  align-items: center;
+  height: var(--S48);
+  padding: 0 var(--S12);
+  font: var(--Body2);
+  color: var(--N600);
 }
diff --git a/src/packages/core/src/menu/menu.html b/src/packages/core/src/menu/menu.html
@@ -1,6 +1,33 @@
-<div class="_e_menu">
-  <div class="_e_menu__item">Open</div>
-  <div class="_e_menu__item">Show Metadata</div>
-  <div class="_e_menu__item">Archive</div>
-  <div class="_e_menu__item">Delete</div>
+<div style="display: flex; justify-content: space-around; align-items: flex-start; padding: 40px;">
+
+  <div class="_e_menu">
+    <div class="_e_menu__item">Open</div>
+    <div class="_e_menu__item">Show Metadata</div>
+    <div class="_e_menu__item">Archive</div>
+    <div class="_e_menu__item">Delete</div>
+  </div>
+
+  <div class="_e_menu _e_menu_large">
+    <div class="_e_menu__text-item">John Doe</div>
+    <div class="_e_menu__separator"></div>
+    <div class="_e_menu__item">
+      <div class="_e_menu__item-icon">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM6 15.98C7.29 17.92 9.5 19.2 12 19.2C14.5 19.2 16.71 17.92 18 15.98C17.97 13.99 13.99 12.9 12 12.9C10 12.9 6.03 13.99 6 15.98Z" />
+        </svg>
+      </div>
+      Аккаунт
+    </div>
+    <div class="_e_menu__item">
+      <div class="_e_menu__item-icon">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V16C3 15.45 3.45 15 4 15C4.55 15 5 15.45 5 16V18C5 18.55 5.45 19 6 19H18C18.55 19 19 18.55 19 18V6C19 5.45 18.55 5 18 5H6C5.45 5 5 5.45 5 6V8C5 8.55 4.55 9 4 9C3.45 9 3 8.55 3 8V5C3 3.9 3.89 3 5 3ZM15.79 12.7L12.2 16.29C11.81 16.68 11.18 16.68 10.79 16.29C10.41 15.91 10.4 15.27 10.79 14.88L12.67 13H4C3.45 13 3 12.55 3 12C3 11.45 3.45 11 4 11H12.67L10.79 9.11C10.4 8.72 10.4 8.09 10.79 7.7C10.9768 7.51275 11.2305 7.40751 11.495 7.40751C11.7595 7.40751 12.0132 7.51275 12.2 7.7L15.79 11.29C16.18 11.68 16.18 12.31 15.79 12.7Z" />
+        </svg>
+      </div>
+      Выйти
+    </div>
+    <div class="_e_menu__separator"></div>
+    <div class="_e_menu__item">О системе</div>
+  </div>
+
 </div>