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">
<a href="/"><HomeSimple/></a>
<a href="/category/trending"><GraphUp/></a>
<a href="/m/about"><InfoCircle/></a>
<a href="/"><HomeSimple/> <p>Home</p></a>
<a href="#"><InputSearch/> <p>Search</p></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>

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

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