From cde325f30d480c10b511a26ff4ee5215fec59c9a Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Sat, 14 Aug 2021 08:09:45 -0700
Subject: [PATCH] Render the menu as its own component.

---
 src/frigate-card-menu.scss | 24 ++++++++++++++++++++++++
 src/frigate-card.scss      | 25 -------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)
 create mode 100644 src/frigate-card-menu.scss

diff --git a/src/frigate-card-menu.scss b/src/frigate-card-menu.scss
new file mode 100644
index 00000000..cff55d93
--- /dev/null
+++ b/src/frigate-card-menu.scss
@@ -0,0 +1,24 @@
+.frigate-card-menu {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  height: 56px;
+  width: 50px;
+}
+
+.frigate-card-menu-expanded {
+  @extend .frigate-card-menu;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+ha-icon-button.button {
+  position: relative;
+  z-index: 10;
+  color: white;
+  opacity: 0.8;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  padding: 0px;
+  margin: 3px;
+}
\ No newline at end of file
diff --git a/src/frigate-card.scss b/src/frigate-card.scss
index c231d51d..071527a5 100644
--- a/src/frigate-card.scss
+++ b/src/frigate-card.scss
@@ -55,31 +55,6 @@
   border-color: var(--primary-color);
 }
 
-.frigate-card-menubar {
-  position: absolute;
-  top: 0px;
-  z-index: 1;
-  height: 56px;
-  width: 50px;
-}
-
-.frigate-card-menubar-full {
-  @extend .frigate-card-menubar;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
-}
-
-ha-icon-button.button {
-  position: relative;
-  z-index: 10;
-  color: white;
-  opacity: 0.8;
-  background-color: rgba(0, 0, 0, 0.6);
-  border-radius: 50%;
-  padding: 0px;
-  margin: 3px;
-}
-
 .invisible {
   visibility: hidden;
 }