MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Update mobile menu

Browse source
This commit is contained in:
Korbs 2024-08-10 20:09:11 -04:00
parent 82cba56565
commit c1c203ce02
2 changed files with 25 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
source/src/components/global/MobileNav.astro
View file

@ -1,10 +1,13 @@
--- ---
import { GraphUp, HomeSimple, InfoCircle, ViewGrid } from "@iconoir/vue"; import { HomeSimple, InputSearch, MediaVideoList, MoreHoriz, ProfileCircle, Safari, Settings } from "@iconoir/vue";
--- ---
<div class="mobile-navigation"> <div class="mobile-navigation">
<a href="/"><HomeSimple/></a> <a href="/"><HomeSimple/> <p>Home</p></a>
<a href="/category/trending"><GraphUp/></a> <a href="#"><InputSearch/> <p>Search</p></a>
<a href="/m/about"><InfoCircle/></a> <a href="#"><Safari/> <p>Explore</p></a>
<a href="#"><MediaVideoList/> <p>Subscription</p></a>
<a href="#"><Settings/> <p>Settings</p></a>
<a href="#"><MoreHoriz/> <p>More</p></a>
</div> </div>

30
source/src/styles/mobile.scss
View file

@ -4,29 +4,35 @@
.mobile-navigation { .mobile-navigation {
position: fixed; position: fixed;
bottom: 24px; bottom: 0px;
left: 50%; left: 0px;
width: fit-content; width: calc(100% - 48px);
background: rgba(10, 10, 10, 0.8); background: transparent;
backdrop-filter:blur(4px) contrast(0.5); backdrop-filter: blur(48px) contrast(0.8) brightness(0.8);
padding: 12px;
gap: 24px;
justify-content: space-around; justify-content: space-around;
z-index: 50; z-index: 10;
transform: translate(-50%); padding: 0px 24px;
border-radius: 10rem;
a { a {
background: transparent; background: transparent;
border-radius: 3rem;
aspect-ratio: 1; aspect-ratio: 1;
color: white; color: white;
padding: 6px; padding: 12px 0px;
width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
text-decoration: none;
gap: 16px;
svg { svg {
width: 32px; width: 32px;
height: 28px; height: 28px;
} }
p {
font-size: 12px;
margin: 0px;
}
} }
} }