navbar mobile menu added

uncomputable · Nov 12, 2024 · 2c4ee57 · 2c4ee57
1 parent e8565f0
commit 2c4ee57
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 17 deletions.
diff --git a/src/assets/images/hamburger.svg b/src/assets/images/hamburger.svg
diff --git a/src/assets/images/hamburger_close.svg b/src/assets/images/hamburger_close.svg
diff --git a/src/assets/style/components/navbar.scss b/src/assets/style/components/navbar.scss
@@ -54,7 +54,6 @@
         }
     }
 
-
     .dropdown {
         .dropdown-content {
             display: none; // Hide dropdown by default
@@ -96,17 +95,60 @@
         }
     }
 
-    .beta-tag{
-        color: #ea9606;
+    .hamburger{
+        display: none;
         position: absolute;
-        right:40px;
-        top: 20px;
+        top: 12px;
+        right: 10px;
+        width: 34px;
+
+        @media screen and (max-width: 1000px) {
+            display: inline-block;
+        }
     }
-}
 
-.tab-content{
-    padding: 10px;
-    background: #1d2127;
-    margin-bottom: 20px;
-    min-height: 470px;
+    .hamburger-close{
+        display: none;
+        position: absolute;
+        top: 12px;
+        right: 10px;
+        width: 34px;
+
+        @media screen and (max-width: 1000px) {
+            display: inline-block;
+        }
+    }
+
+    .mobile-hidden{
+        .beta-tag{
+            color: #ea9606;
+            position: absolute;
+            right:40px;
+            top: 20px;
+        }
+
+        @media screen and (max-width: 1000px) {
+
+            display: none;
+            flex-direction: column;
+            position: absolute;
+            top: 55px;
+            right: 10px;
+            z-index: 2;
+            background: #0d0e10;
+
+            &.open{
+                display: flex;
+            }
+
+            button{
+                width: 100%;
+            }
+
+            .beta-tag{
+                display: none;
+            }
+        }
+    }
 }
+
diff --git a/src/assets/style/components/tab_content.scss b/src/assets/style/components/tab_content.scss
@@ -1,4 +1,11 @@
 
+.tab-content{
+    padding: 10px;
+    background: #1d2127;
+    margin-bottom: 20px;
+    min-height: 470px;
+}
+
 // witness tab
 .witness-table{
     position: relative;
@@ -90,4 +97,5 @@
     a {
         color: #ea9606;
     }
-}
+}
+
diff --git a/src/components/program_window/mod.rs b/src/components/program_window/mod.rs
@@ -7,7 +7,8 @@ mod share_button;
 mod tools_dropdown;
 mod transaction_button;
 
-use leptos::{component, view, IntoView};
+use leptos::create_signal;
+use leptos::{component, view, IntoView, SignalGet, SignalSet};
 
 use self::address_button::AddressButton;
 use self::examples_dropdown::ExamplesDropdown;
@@ -22,15 +23,28 @@ pub use self::program_tab::{Program, Runtime};
 
 #[component]
 pub fn ProgramWindow() -> impl IntoView {
+    let (mobile_open, set_mobile_open) = create_signal(false);
+
     view! {
         <Toolbar>
             <RunButton />
             <ExamplesDropdown />
-            <AddressButton />
-            <TransactionButton />
+
+            <div class="mobile-hidden"  class:open = move || mobile_open.get() >
+                <AddressButton />
+                <TransactionButton />
+                <ShareButton />
+                <div class="beta-tag">beta</div>
+            </div>
+
             <HelpButton />
-            <ShareButton />
-            <div class="beta-tag">beta</div>
+
+            {move || if !mobile_open.get() {
+                view! { <img class="hamburger" src="/images/hamburger.svg" on:click=move |_| set_mobile_open.set(true) /> }
+            } else {
+                view! { <img class="hamburger-close" src="/images/hamburger_close.svg" on:click=move |_| set_mobile_open.set(false) /> }
+            }}
+
         </Toolbar>
         <ProgramTab />
     }