Skip to content

Commit

Permalink
fix navbar for small screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookspam
cookspam committed Sep 7, 2024
1 parent fb7014b commit b17ed25
Showing 1 changed file with 18 additions and 17 deletions.
35 changes: 18 additions & 17 deletions src/components/navbar.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,59 +42,59 @@ pub fn Navbar(cx: Scope) -> Element {
div {
class: "flex w-full",
div {
class: "max-w-[96rem] w-full flex flex-row justify-between mx-auto px-4 sm:px-8 py-6",
class: "max-w-[96rem] w-full flex flex-row justify-between mx-auto px-4 sm:px-8 py-4", // Reduce py for smaller screens
Link {
to: Route::Landing {},
class: "flex flex-row h-10 gap-1",
class: "flex flex-row h-10 gap-1 my-auto",
SpamIcon {
class: "w-6 h-6 my-auto "
class: "w-5 h-5 sm:w-6 sm:h-6 my-auto" // Smaller logo on small screens
}
p {
class: "text-2xl font-semibold my-auto text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white",
class: "text-lg sm:text-2xl font-semibold my-auto text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Smaller text on small screens
"SPAM"
}
}
div {
class: "flex flex-row gap-6 md:gap-8 lg:gap-10",
class: "flex flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 flex-wrap sm:flex-nowrap", // Reduced gap for smaller screens
Link {
class: "transition-colors flex items-center gap-2 px-4 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white",
class: "transition-colors flex flex-col items-center gap-1 sm:gap-2 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding
to: Route::Home {},
span {
class: "text-2xl font-bold sm:text-xl sm:font-bold",
class: "w-5 h-5", // Smaller icon on small screens
"⛏️"
}
span {
class: "text-sm sm:text-base md:text-lg",
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
"Mine"
}
}
Link {
class: "transition-colors flex items-center gap-2 px-4 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white",
class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding
to: Route::Stats {},
StatsIcon {}
span {
class: "text-sm sm:text-base md:text-lg",
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
"Stats"
}
}
Link {
class: "transition-colors flex items-center gap-2 px-4 py-2 rounded-full text-black dark:text-gray-700 hover:text-gray-600 dark:hover:text-white",
class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-black dark:text-gray-700 hover:text-gray-600 dark:hover:text-white", // Reduced padding
to: Route::Apps {},
span {
class: "text-2xl font-bold sm:text-xl sm:font-bold",
class: "w-5 h-5", // Smaller icon on small screens
"📦"
}
span {
class: "text-sm font-semibold sm:text-base md:text-lg",
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
"Apps"
}
}
Link {
class: "transition-colors flex items-center gap-2 px-4 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white",
class: "transition-colors flex flex-col items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding
to: Route::Settings {},
MyPageIcon {}
span {
class: "text-sm sm:text-base md:text-lg",
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
"My Page"
}
}
Expand All @@ -112,11 +112,12 @@ pub fn Navbar(cx: Scope) -> Element {
}
}


#[component]
fn StatsIcon(cx: Scope) -> Element {
render! {
svg {
class: "w-5 h-5 sm:w-6 sm:h-6",
class: "w-5 h-5",
fill: "none",
stroke: "currentColor",
view_box: "0 0 24 24",
Expand All @@ -135,7 +136,7 @@ fn StatsIcon(cx: Scope) -> Element {
fn MyPageIcon(cx: Scope) -> Element {
render! {
span {
class: "w-5 h-5 sm:w-6 sm:h-6",
class: "w-5 h-5 ",
"👤"
}
}
Expand Down

0 comments on commit b17ed25

Please sign in to comment.