cobalt/web/src/components/sidebar/Sidebar.svelte

118 lines
3.7 KiB
Svelte
Raw Normal View History

2024-06-14 11:33:01 +01:00
<script>
import CobaltLogo from "./CobaltLogo.svelte";
import SidebarTab from "./SidebarTab.svelte";
import IconDownload from '@tabler/icons-svelte/IconDownload.svelte';
import IconCut from '@tabler/icons-svelte/IconCut.svelte';
import IconCrop from '@tabler/icons-svelte/IconCrop.svelte';
import IconTransform from '@tabler/icons-svelte/IconTransform.svelte';
import IconSettings from '@tabler/icons-svelte/IconSettings.svelte';
import IconComet from '@tabler/icons-svelte/IconComet.svelte';
import IconHeart from '@tabler/icons-svelte/IconHeart.svelte';
import IconInfoCircle from '@tabler/icons-svelte/IconInfoCircle.svelte';
2024-06-14 11:33:01 +01:00
const iconSize = 21;
const iconStroke = 1.2;
</script>
<nav id="sidebar">
<CobaltLogo />
<div id="sidebar-tabs">
<div id="sidebar-actions" class="sidebar-inner-container">
<SidebarTab tabName="save" tabLink="/">
<IconDownload size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="trim" tabLink="/trim">
<IconCut size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="crop" tabLink="/crop">
<IconCrop size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="convert" tabLink="/convert">
<IconTransform size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="settings" tabLink="/settings">
<IconSettings size={iconSize} stroke={iconStroke} />
</SidebarTab>
</div>
<div id="sidebar-info" class="sidebar-inner-container">
<SidebarTab tabName="updates" tabLink="/updates">
<IconComet size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="donate" tabLink="/donate">
<IconHeart size={iconSize} stroke={iconStroke} />
</SidebarTab>
<SidebarTab tabName="about" tabLink="/about">
<IconInfoCircle size={iconSize} stroke={iconStroke} />
</SidebarTab>
</div>
</div>
</nav>
<style>
#sidebar,
#sidebar-tabs,
.sidebar-inner-container {
display: flex;
flex-direction: column;
}
2024-06-14 11:38:10 +01:00
2024-06-14 11:33:01 +01:00
#sidebar {
background: var(--sidebar-bg);
2024-06-14 11:33:01 +01:00
height: 100vh;
width: var(--sidebar-width);
2024-06-16 14:11:44 +01:00
position: sticky;
padding: 0 var(--sidebar-inner-padding);
2024-06-14 11:33:01 +01:00
}
2024-06-14 11:38:10 +01:00
2024-06-14 11:33:01 +01:00
#sidebar-tabs {
height: 100%;
justify-content: space-between;
2024-06-14 16:48:57 +01:00
padding-bottom: var(--padding);
overflow-y: scroll;
2024-06-14 11:33:01 +01:00
}
2024-06-14 12:33:33 +01:00
@media screen and (max-width: 535px) {
#sidebar,
#sidebar-tabs,
.sidebar-inner-container {
flex-direction: row;
}
2024-06-14 12:33:33 +01:00
#sidebar {
width: 100%;
2024-06-16 15:39:23 +01:00
height: var(--sidebar-height-mobile);
2024-06-14 12:33:33 +01:00
position: fixed;
bottom: 0;
padding: var(--sidebar-inner-padding) 0;
2024-06-14 12:33:33 +01:00
}
2024-06-14 12:33:33 +01:00
#sidebar::before {
content: '';
z-index: 1;
width: 100%;
height: 100%;
display: block;
position: absolute;
pointer-events: none;
background: var(--sidebar-mobile-gradient);
2024-06-14 12:33:33 +01:00
}
2024-06-14 12:33:33 +01:00
#sidebar-tabs {
justify-content: space-around;
overflow-y: visible;
overflow-x: scroll;
2024-06-14 12:33:33 +01:00
padding-bottom: 0;
}
#sidebar :global(.sidebar-inner-container:first-child) {
padding-left: calc(var(--border-radius) * 2);
}
#sidebar :global(.sidebar-inner-container:last-child) {
padding-right: calc(var(--border-radius) * 2);
}
2024-06-14 12:33:33 +01:00
}
2024-06-14 11:33:01 +01:00
</style>