Moved things around as Content is now separate from library

src/components/AppLayout.tsx

@@ -5,7 +5,7 @@ import { useSwipeable } from "react-swipeable";
 import { useRouter } from "next/router";
 import Button from "components/Button";
 import { prettyLanguage } from "queries/helpers";
-import { useMediaMobile } from "hooks/useMediaQuery";
+import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery";
 
 import { useSelector, useDispatch } from "react-redux";
 import {
@@ -28,6 +28,9 @@ type AppLayoutProps = {
 export default function AppLayout(props: AppLayoutProps): JSX.Element {
   const titlePrefix = "Accord’s Library";
   const router = useRouter();
+  const dispatch = useDispatch();
+  const isMobile = useMediaMobile();
+  const isCoarse = useMediaCoarse();
 
   const languagePanelOpen = useSelector(
     (state: RootState) => state.appLayout.languagePanelOpen
@@ -41,10 +44,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
   const subPanelOpen = useSelector(
     (state: RootState) => state.appLayout.subPanelOpen
   );
-
+  
-  const dispatch = useDispatch();
-
-  const isMobile = useMediaMobile();
   const sensibilitySwipe = 1.1;
 
   const handlers = useSwipeable({
@@ -225,7 +225,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         effect="solid"
         delayShow={300}
         delayHide={100}
-        disable={!mainPanelReduced || isMobile}
+        disable={!mainPanelReduced || isMobile || isCoarse}
         className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left"
       />
     </div>

src/components/PanelComponents/NavOption.tsx

@@ -28,6 +28,7 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
       <div
         onClick={props.onClick}
         data-html
+        data-multiline
         data-tip={`
           <div class="px-4 py-3">
           <h3 class="text-2xl">${props.title}</h3>
@@ -39,7 +40,6 @@ export default function NavOption(props: NavOptionProps): JSX.Element {
           </div>
         `}
         data-for={props.tooltipId}
-        data-multiline
         className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${
           props.icon ? "text-left" : "text-center"
         } ${divCommon}`}

src/components/Panels/MainPanel.tsx

@@ -91,6 +91,16 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         onClick={() => dispatch(setMainPanelOpen(false))}
       />
 
+      <NavOption
+        url="/contents"
+        icon="workspaces"
+        title="Contents"
+        subtitle="Explore all content and filter by type or category"
+        tooltipId="MainPanelTooltip"
+        reduced={mainPanelReduced && isDesktop}
+        onClick={() => dispatch(setMainPanelOpen(false))}
+      />
+
       <NavOption
         url="/wiki"
         icon="travel_explore"

src/hooks/useMediaQuery.ts

@@ -45,3 +45,10 @@ export function useMediaDesktop() {
     return useMediaQuery("(min-width: 60rem)");
 }
 
+export function useMediaCoarse() {
+  return useMediaQuery("(pointer: coarse)");
+}
+
+export function useMediaFine() {
+  return useMediaQuery("(pointer: fine)");
+}

src/pages/library/index.tsx

@@ -1,12 +1,24 @@
 import { GetStaticProps } from "next";
 import SubPanel from "components/Panels/SubPanel";
-import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
+import ContentPanel, {
-import { getWebsiteInterface } from "graphql/operations";
+  ContentPanelWidthSizes,
+} from "components/Panels/ContentPanel";
+import {
+  GetLibraryItemsPreviewQuery,
+  GetWebsiteInterfaceQuery,
+} from "graphql/operations-types";
+import {
+  getLibraryItemsPreview,
+  getWebsiteInterface,
+} from "graphql/operations";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import AppLayout from "components/AppLayout";
-import NavOption from "components/PanelComponents/NavOption";
+import ReturnButton from "components/PanelComponents/ReturnButton";
+import HorizontalLine from "components/HorizontalLine";
+import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
 
 type LibraryProps = {
+  libraryItems: GetLibraryItemsPreviewQuery;
   langui: GetWebsiteInterfaceQuery;
 };
 
@@ -14,31 +26,34 @@ export default function Library(props: LibraryProps): JSX.Element {
   const langui = props.langui.websiteInterfaces.data[0].attributes;
   const subPanel = (
     <SubPanel>
+      <ReturnButton
+        href="/library"
+        title={langui.main_library}
+        langui={langui}
+      />
+      <HorizontalLine />
       <PanelHeader
         icon="library_books"
-        title={langui.main_library}
-        description={langui.library_description}
-      />
-      <NavOption
-        url="/library/items"
         title={langui.library_items}
-        subtitle={langui.library_items_description}
+        description={langui.library_items_description}
-        border
-      />
-      <NavOption
-        url="/library/content"
-        title={langui.library_content}
-        subtitle={langui.library_content_description}
-        border
       />
     </SubPanel>
   );
-
+  const contentPanel = (
+    <ContentPanel width={ContentPanelWidthSizes.large}>
+      <div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
+        {props.libraryItems.libraryItems.data.map((item) => (
+          <LibraryItemsPreview key={item.id} item={item.attributes} />
+        ))}
+      </div>
+    </ContentPanel>
+  );
   return (
     <AppLayout
-      title={langui.main_library}
+      title={langui.library_items}
       langui={langui}
       subPanel={subPanel}
+      contentPanel={contentPanel}
     />
   );
 }
@@ -46,6 +61,9 @@ export default function Library(props: LibraryProps): JSX.Element {
 export const getStaticProps: GetStaticProps = async (context) => {
   if (context.locale) {
     const props: LibraryProps = {
+      libraryItems: await getLibraryItemsPreview({
+        language_code: context.locale,
+      }),
       langui: await getWebsiteInterface({
         language_code: context.locale,
       }),

src/pages/library/items/index.tsx

@@ -1,77 +0,0 @@
-import { GetStaticProps } from "next";
-import SubPanel from "components/Panels/SubPanel";
-import ContentPanel, {
-  ContentPanelWidthSizes,
-} from "components/Panels/ContentPanel";
-import {
-  GetLibraryItemsPreviewQuery,
-  GetWebsiteInterfaceQuery,
-} from "graphql/operations-types";
-import {
-  getLibraryItemsPreview,
-  getWebsiteInterface,
-} from "graphql/operations";
-import PanelHeader from "components/PanelComponents/PanelHeader";
-import AppLayout from "components/AppLayout";
-import ReturnButton from "components/PanelComponents/ReturnButton";
-import HorizontalLine from "components/HorizontalLine";
-import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
-
-type LibraryProps = {
-  libraryItems: GetLibraryItemsPreviewQuery;
-  langui: GetWebsiteInterfaceQuery;
-};
-
-export default function Library(props: LibraryProps): JSX.Element {
-  const langui = props.langui.websiteInterfaces.data[0].attributes;
-  const subPanel = (
-    <SubPanel>
-      <ReturnButton
-        href="/library"
-        title={langui.main_library}
-        langui={langui}
-      />
-      <HorizontalLine />
-      <PanelHeader
-        icon="library_books"
-        title={langui.library_items}
-        description={langui.library_items_description}
-      />
-    </SubPanel>
-  );
-  const contentPanel = (
-    <ContentPanel width={ContentPanelWidthSizes.large}>
-      <div className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]">
-        {props.libraryItems.libraryItems.data.map((item) => (
-          <LibraryItemsPreview key={item.id} item={item.attributes} />
-        ))}
-      </div>
-    </ContentPanel>
-  );
-  return (
-    <AppLayout
-      title={langui.library_items}
-      langui={langui}
-      subPanel={subPanel}
-      contentPanel={contentPanel}
-    />
-  );
-}
-
-export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.locale) {
-    const props: LibraryProps = {
-      libraryItems: await getLibraryItemsPreview({
-        language_code: context.locale,
-      }),
-      langui: await getWebsiteInterface({
-        language_code: context.locale,
-      }),
-    };
-    return {
-      props: props,
-    };
-  } else {
-    return { props: {} };
-  }
-};