diff --git a/css/navbar.css b/css/navbar.css index 799f274..f44b11b 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -1,25 +1,52 @@ body { margin: 0; /* Remove body margins */ } -.navbar-container { + +/* Mobile View */ + +.navbar-background { display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: end; + align-items: center; align-items: stretch; background-color: #252631; padding: 15px; padding-right: 40px; - margin: 0px; + min-height: 44px; } -.navbar { +.navbar-container { display: flex; - flex-direction: row; - justify-content: flex-end; + flex-direction: column; + justify-content: flex-start; + align-items: stretch; flex-grow: 1; } +.navbar-hamburger { + font-size: 20pt; + color: white; + display: flex; + align-items: start; + margin-top: 10px; + max-height: 35px; +} +.navbar-closed{ + display: flex; + flex-direction: column; + justify-content: flex-start; + margin-top: 10px; + display: none; +} +.navbar-open { + display: flex; + flex-direction: column; + justify-content: flex-start; + margin-top: 10px; +} + .navbar-item { color: white; - font-size: 14pt; + font-size: 12pt; padding-left: 20px; padding-right: 20px; padding-top: 10px; @@ -28,7 +55,7 @@ body { } .navbar-item:hover { background-color: #ffffff14; - font-size: 15pt; + font-size: 13pt; font-weight: bold; border-radius: 3px; transition-duration: 0.3s; @@ -36,11 +63,71 @@ body { } .navbar-title { color: white; - font-size: 14pt; + font-size: 15pt; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; font-family: Source Sans Pro; + +} + +/* Desktop view */ + +@media only screen and (min-width: 850px) { + .navbar-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; + } + .navbar { + display: flex; + flex-direction: row; + justify-content: flex-end; + flex-grow: 1; + } + .navbar-closed { + display: flex; + flex-direction: row; + justify-content: flex-end; + flex-grow: 1; + margin-top: 0px; + } + .navbar-open { + display: flex; + flex-direction: row; + justify-content: flex-end; + flex-grow: 1; + margin-top: 0px; + } + .navbar-item { + color: white; + font-size: 14pt; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + font-family: Source Sans Pro; + } + .navbar-item:hover { + background-color: #ffffff14; + font-size: 15pt; + font-weight: bold; + border-radius: 3px; + transition-duration: 0.3s; + cursor: pointer; + } + .navbar-title { + color: white; + font-size: 14pt; + padding-left: 20px; + padding-right: 20px; + padding-top: 10px; + padding-bottom: 10px; + font-family: Source Sans Pro; + } + .navbar-hamburger { + display: none; + } } -/*}*/ \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index ebdfdbb..c545bf5 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,13 +1,14 @@ Yew App - + + - - - \ No newline at end of file diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs index 271aa93..68f832d 100644 --- a/src/components/nav_bar.rs +++ b/src/components/nav_bar.rs @@ -13,26 +13,36 @@ pub fn navigation_bar() -> Html { let cloned_navigator_3 = navigator.clone(); let cloned_navigator_4 = navigator.clone(); + let navbar_toggle = use_state(|| true); + let on_click_hamburger = { + let navbar_toggle = navbar_toggle.clone(); + Callback::from(move |_| navbar_toggle.set(!*navbar_toggle)) + }; html! { -
-
{NAVBAR_TITLE}
-
-
- {NAVBAR_COL_LANDING} -
+
+
+
{NAVBAR_TITLE}
+
+
+ {NAVBAR_COL_LANDING} +
-
- {NAVBAR_COL_PROYECTOS_ACABADOS} -
- -
- {NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION} -
+
+ {NAVBAR_COL_PROYECTOS_ACABADOS} +
+ +
+ {NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION} +
-
- {NAVBAR_COL_CONTACTO} +
+ {NAVBAR_COL_CONTACTO} +
+
+ +
} } \ No newline at end of file diff --git a/src/pages/landing.rs b/src/pages/landing.rs index 5e8154e..d355461 100644 --- a/src/pages/landing.rs +++ b/src/pages/landing.rs @@ -7,10 +7,10 @@ use crate::components::nav_bar::NavigationBar; pub fn landing_page() -> Html { html!{ <> - -
- {"Landing Page"} -
+ +
+ {"Landing Page"} +
} } \ No newline at end of file