Feat/editor category pass2 (#290)

* feat(design-system): add editor skeletons

* use css media queries rather than JS media queries

* init remake

* feat: add basis of toggle atom

* finish toggle

* use pointer cursor with toggle

* sync

* feat: add server message in editor

* cleanup storybook

* add short editor item and data model for categories

* chore: fix build by moving jest version downward

* chore: remove old category editor

* chore: fix EditorCategoryShort index

* add editor wiring and styling updates

* fix linting issues

packages/design-system/atoms/quick-nav/QuickNav.styled.ts

@@ -1,6 +1,22 @@
+import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
-import { palette } from '../colors';
-import { transitions } from '../timings';
+
+export const HideIfSmall = styled.div`
+  display: initial;
+
+  ${onSmallScreen(css`
+    display: none;
+  `)}
+`;
+export const HideIfNotSmall = styled.div`
+  display: none;
+
+  ${onSmallScreen(css`
+    display: initial;
+  `)}
+`;
 
 export const NavItem = styled.div<{ selected: boolean }>`
   padding: 7px;
@@ -35,6 +51,7 @@ export const DropdownNavOpener = styled.div`
   cursor: pointer;
   border-radius: 2px;
   transition: background-color ${transitions.actionable}s ease-in-out;
+  width: 98vw;
 
   &:hover {
     background-color: ${palette.taupe300};

packages/design-system/atoms/quick-nav/QuickNav.tsx

@@ -1,6 +1,5 @@
 // thing should be everything visible on desktop/tablet and a popover when small
 
-import { useBreakpointContext } from '@roleypoly/design-system/atoms/breakpoints';
 import { Popover } from '@roleypoly/design-system/atoms/popover';
 import { useState } from 'react';
 import { GoChevronDown } from 'react-icons/go';
@@ -8,6 +7,8 @@ import {
   DropdownNavCurrent,
   DropdownNavIcon,
   DropdownNavOpener,
+  HideIfNotSmall,
+  HideIfSmall,
   NavItem,
 } from './QuickNav.styled';
 
@@ -18,18 +19,17 @@ export type QuickNavProps = {
 };
 
 export const QuickNav = (props: QuickNavProps) => {
-  const breakpoints = useBreakpointContext();
-
-  if (breakpoints.screenSize.onSmallScreen) {
-    return <QuickNavCollapsed {...props} />;
-  }
-
-  return <QuickNavExpanded {...props} />;
+  return (
+    <>
+      <QuickNavExpanded {...props} />
+      <QuickNavCollapsed {...props} />
+    </>
+  );
 };
 
 export const QuickNavExpanded = (props: QuickNavProps) => {
   return (
-    <div>
+    <HideIfSmall>
       {props.navItems.map((navItem) => (
         <NavItem
           onClick={() => props.onNavChange?.(navItem)}
@@ -39,7 +39,7 @@ export const QuickNavExpanded = (props: QuickNavProps) => {
           {navItem}
         </NavItem>
       ))}
-    </div>
+    </HideIfSmall>
   );
 };
 
@@ -47,7 +47,7 @@ export const QuickNavCollapsed = (props: QuickNavProps) => {
   const [popoverState, setPopoverState] = useState(false);
 
   return (
-    <div>
+    <HideIfNotSmall>
       {popoverState ? (
         <Popover
           headContent={<>Server Editor</>}
@@ -80,6 +80,6 @@ export const QuickNavCollapsed = (props: QuickNavProps) => {
           <DropdownNavCurrent>{props.currentNavItem}</DropdownNavCurrent>
         </DropdownNavOpener>
       )}
-    </div>
+    </HideIfNotSmall>
   );
 };