Use media queries instead of serverside data for correct nav view

components/Navigation.tsx

@@ -41,12 +41,10 @@ export default function (props: {
   email?: string;
   hide?: boolean;
   id?: string;
-  mobile?: string;
   permissions?: number;
   username?: string;
 }) {
   let data = { ...props };
-  const isDesktop = props.mobile === "?0";
   const { isOpen, onClose, onOpen } = useDisclosure();
 
   return (
@@ -56,7 +54,8 @@ export default function (props: {
           <Container maxW="container.xl" py={{ base: "6" }}>
             <Container
               alignItems="center"
-              display={isDesktop ? "none" : "flex"}
+              className="mobile-nav"
+              display="flex"
               justifyContent="space-between"
               p="0"
               w="calc(100vw - 6rem)"
@@ -84,7 +83,8 @@ export default function (props: {
             </Container>
             <Flex
               alignSelf="center"
-              display={isDesktop ? "flex" : "none"}
+              className="desktop-nav"
+              display="flex"
               gap="0.5rem"
               justifyContent="space-between"
               p="0"