Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: mobile navigation

Browse source
This commit is contained in:
wukko 2024-06-14 17:33:33 +06:00
parent 5399ee9a4c
commit 92cccd720d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/components/sidebar/CobaltLogo.svelte
View file

@ -12,4 +12,9 @@
align-items: center;
padding: calc(var(--sidebar-padding) * 2 - 2px);
}
@media screen and (max-width: 535px) {
#cobalt-logo {
display: none;
}
}
</style>

35
web/src/components/sidebar/Sidebar.svelte
View file

@ -72,4 +72,39 @@
padding-bottom: var(--sidebar-padding);
overflow: scroll;
}
@media screen and (max-width: 535px) {
#sidebar,
#sidebar-tabs,
.sidebar-inner-container {
flex-direction: row;
}
#sidebar {
width: 100%;
height: auto;
overflow: scroll;
position: fixed;
bottom: 0;
}
#sidebar::before {
content: '';
z-index: 1;
width: 100%;
height: 100%;
display: block;
position: absolute;
pointer-events: none;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0) 4%,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0) 96%,
rgba(0, 0, 0, 0.9) 100%
);
}
#sidebar-tabs {
justify-content: space-around;
padding-bottom: 0;
}
}
</style>

10
web/src/components/sidebar/SidebarTab.svelte
View file

@ -39,4 +39,14 @@
.sidebar-tab:hover {
opacity: 1;
}
@media screen and (max-width: 535px) {
.sidebar-tab {
padding: 5px var(--sidebar-padding);
min-width: calc(var(--sidebar-width) / 2);
}
.sidebar-tab.active {
z-index: 2;
}
}
</style>

10
web/src/routes/+layout.svelte
View file

@ -42,4 +42,14 @@
display: flex;
overflow: scroll;
}
@media screen and (max-width: 535px) {
#cobalt {
display: grid;
grid-template-columns: unset;
grid-template-rows: 1fr var(--sidebar-width);
}
#content {
order: -1;
}
}
</style>