feat: implemented signin/signup button toggling

src/main.rs

@@ -1,8 +1,8 @@
 mod topbar;
 
+use topbar::TopBar;
 use yew::prelude::*;
 use yew_router::prelude::*;
-use topbar::TopBar;
 
 #[derive(Clone, Routable, PartialEq)]
 enum Route {

src/topbar.rs

@@ -1,15 +1,18 @@
 use yew::prelude::*;
 
+pub enum Msg {
+    ToggleSignIn,
+    ToggleSignUp,
+}
+
 #[derive(Properties, PartialEq)]
 pub struct TabProps {
     pub text: AttrValue,
-    pub link: AttrValue,
 }
 
 #[function_component]
-pub fn Tab(props: &TabProps) -> Html {
+fn Tab(props: &TabProps) -> Html {
     html! {
-        <li><a href={props.link.clone()}>
         <svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg">
             <g>
                 <path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z"
@@ -19,25 +22,63 @@ pub fn Tab(props: &TabProps) -> Html {
                 </text>
             </g>
         </svg>
-        </a></li>
     }
 }
 
-#[function_component]
+pub struct TopBar {
-pub fn TopBar() -> Html {
+    sign_in: bool,
+    sign_up: bool,
+}
+
+impl Component for TopBar {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            sign_in: false,
+            sign_up: false,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::ToggleSignIn => {
+                self.sign_up = false;
+                self.sign_in = !self.sign_in;
+                true
+            }
+            Msg::ToggleSignUp => {
+                self.sign_in = false;
+                self.sign_up = !self.sign_up;
+                true
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <nav id="topbar">
                 <ul id="tabs-main" class="tabs">
-                <Tab text="Home" link="/" />
+                    <li><a href="/"><Tab text="Home" /></a></li>
-                <Tab text="Services" link="/services" />
+                    <li><a href="/services"><Tab text="Services" /></a></li>
-                <Tab text="Community" link="/community" />
+                    <li><a href="/community"><Tab text="Community" /></a></li>
-                <Tab text="About" link="/about" />
+                    <li><a href="/about"><Tab text="About" /></a></li>
                 </ul>
 
                 <ul id="tabs-account" class="tabs">
-                <Tab text="Sign In" link="/#signin" />
+                    <li><button onclick={ctx.link().callback(|_| Msg::ToggleSignIn)}><Tab text="Sign In" /></button></li>
-                <Tab text="Sign Up" link="/#signup" />
+                    <li><button onclick={ctx.link().callback(|_| Msg::ToggleSignUp)}><Tab text="Sign Up" /></button></li>
                 </ul>
+
+                if self.sign_in {
+                    <h1>{"Sign In"}</h1>
+                }
+
+                if self.sign_up {
+                    <h1>{"Sign Up"}</h1>
+                }
             </nav>
         }
     }
+}

style/home.css

@@ -15,7 +15,7 @@ main {
 }
 
 .content {
-    margin: 12px;
+    padding: 12px;
     height: calc(100% - 48px);
     width: calc(100% - 24px);
 }

style/topbar.css

@@ -1,10 +1,17 @@
 .tabs li {
     display: inline-block;
-    padding-left: 8px;
+    padding-right: 8px;
 }
 
 .tabs li a {
     position: relative;
+    cursor: default;
+}
+
+.tabs li button {
+    position: relative;
+    border: none;
+    background: none;
 }
 
 .tab-svg-path {