ansxor.ca
bluesky client without react native baggage written in sveltekit
GRID
+28
-6
src/routes/+layout.svelte
+28
-6
src/routes/+layout.svelte
···
59
59
</script>
60
60
61
61
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
62
-
<div class="mx-auto flex max-h-screen max-w-290">
63
-
<div class="sidebar p-4">
62
+
<div class="layout">
63
+
<div class="sidebar sidebar--left p-4">
64
64
{#if user.loggedIn && user.profile}
65
65
<div class="flex items-center gap-2">
66
66
<Avatar user={user.profile} />
···
95
95
</form>
96
96
{/if}
97
97
</div>
98
-
<div class="max-w-150.5 overflow-y-scroll">
98
+
<div class="main">
99
99
{@render children()}
100
100
</div>
101
-
<div class="sidebar">owo</div>
101
+
<div class="sidebar sidebar--right">owo</div>
102
102
</div>
103
103
<dialog
104
104
bind:this={composerDialog}
···
141
141
142
142
<style>
143
143
.sidebar {
144
-
height: 100vh;
145
-
flex: 1 0 0;
144
+
height: 100vh;
145
+
146
+
position: sticky;
147
+
top: 0;
148
+
bottom: 0;
149
+
}
150
+
.sidebar--left {
151
+
grid-area: lsidebar;
152
+
justify-self: right; /* align east */
153
+
}
154
+
.sidebar--right {
155
+
grid-area: rsidebar;
156
+
justify-self: left; /* align east */
157
+
}
158
+
.layout {
159
+
overflow-y: scroll;
160
+
display: grid;
161
+
grid-template:
162
+
"lmargin lsidebar main rsidebar rmargin" 1fr / 1fr 279px 602px 279px 1fr;
163
+
}
164
+
.main {
165
+
grid-area: main;
166
+
height: 999px;
167
+
border: 1px dotted red;
146
168
}
147
169
dialog::backdrop {
148
170
background-color: rgba(0, 0, 0, 0.8);