Expand export menu

assets/scss/default_theme/components/_upper_menu.scss

@@ -10,6 +10,8 @@ div.upper_menu {
 	height: $menu-height;
 	padding-left: 1vw;
 
+	visibility: inherit;
+
 	div.dropdown {
 		margin-right: 2px;
 
@@ -31,7 +33,8 @@ div.upper_menu {
 		* {
 			visibility: hidden;
 		}
-		*:first-child {
+
+		& > *:first-child {
 			outline: 1px solid $color-dark;
 			visibility: visible;
 		}
@@ -47,4 +50,39 @@ div.upper_menu {
 			}
 		}
 	}
+
+	div.dropdown-sub {
+		position: relative;
+		height: $menu-height;
+
+		* {
+			visibility: hidden;
+		}
+
+		div {
+			display: none;
+			visibility: hidden;
+		}
+
+		& > *:first-child {
+			visibility: inherit;
+		}
+
+		&:hover {
+			visibility: visible;
+
+			div {
+				position: absolute;
+				left: 100%;
+				top: 0;
+				visibility: hidden;
+
+				display: flex;
+				flex-direction: column;
+
+				width: max-content;
+			}
+		}
+
+	}
 }

src/components/main_window.rs

@@ -69,7 +69,7 @@ pub fn MainWindow() -> Html {
         })
     };
 
-    let save_button_callback = {
+    let export_csv_button_callback = {
         let main_state = main_state.clone();
         Callback::from(move |_| {
             if main_state.transfers.len() == 0 {
@@ -101,7 +101,13 @@ pub fn MainWindow() -> Html {
             <div class="dropdown">
                 <button>{"File"}</button>
                 <button onclick={new_button_callback}>{"New"}</button>
-                <button onclick={save_button_callback}>{"Export"}</button>
+                <div class="dropdown-sub">
+                    <button>{"Export"}</button>
+                    <div>
+                        <button onclick={export_csv_button_callback}>{"Export as CSV"}</button>
+                        <button>{"Export as ???"}</button>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="main_container">