From 2ce4136a521900df8659cb0c19c8e6e3a154ee86 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Mon, 27 Dec 2021 14:20:17 +0100
Subject: [PATCH] fix(sidebars): fixed sidebar margins

---
 src/components/navigation/SidebarBase.tsx         |  6 +++---
 src/components/navigation/right/MemberSidebar.tsx | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index 39b37213..218e3b91 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -27,14 +27,14 @@ export const GenericSidebarBase = styled.div<{
     /*border-end-start-radius: 8px;*/
     background: var(--secondary-background);
 
-    > :nth-child(1) {
+    /*> :nth-child(1) {
         //border-end-start-radius: 8px;
-        margin-top: 48px;
     }
 
     > :nth-child(2) {
+        margin-top: 48px;
         background: red;
-    }
+    }*/
 
     ${(props) =>
         props.mobilePadding &&
diff --git a/src/components/navigation/right/MemberSidebar.tsx b/src/components/navigation/right/MemberSidebar.tsx
index 4e2ebbdd..d4f69472 100644
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -6,9 +6,12 @@ import { Presence } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Server } from "revolt.js/dist/maps/Servers";
 import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
 
 import { useContext, useEffect, useMemo } from "preact/hooks";
 
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
 import {
     ClientStatus,
     StatusContext,
@@ -18,6 +21,15 @@ import {
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
+export const Container = styled.div`
+    margin-top: 48px;
+
+    ${isTouchscreenDevice &&
+    css`
+        margin-top: 0;
+    `}
+`;
+
 export default function MemberSidebar() {
     const channel = useClient().channels.get(
         useParams<{ channel: string }>().channel,
@@ -180,6 +192,9 @@ export const ServerMemberSidebar = observer(
 
         return (
             <GenericSidebarBase>
+                <Container className="test">
+                    {isTouchscreenDevice && <div>Server settings go here</div>}
+                </Container>
                 <MemberList entries={entries} context={channel} />
             </GenericSidebarBase>
         );