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 ( + + {isTouchscreenDevice &&
Server settings go here
} +
);