Merge pull request #458 from StampyAI/stampy-redesign-424-a

mobile header on all pages.
StampyAI · Feb 29, 2024 · a8d6286 · a8d6286
2 parents e841ad0 + 6a8b351
commit a8d6286
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 12 deletions.
diff --git a/app/components/Button/index.tsx b/app/components/Button/index.tsx
@@ -20,7 +20,6 @@ const Button = ({children, action, tooltip, className}: ButtonProps) => {
   return (
     <button className={classes} onClick={action} data-tooltip={tooltip}>
       {children}
-      {icon && icon}
     </button>
   )
 }

diff --git a/app/components/Nav/Mobile/index.tsx b/app/components/Nav/Mobile/index.tsx
@@ -25,7 +25,6 @@ export const MobileNav = ({toc, categories}: NavProps) => {
   const toggleSearch = () => {
     setShowSearch(!showSearch)
   }
-  console.log('toc', toc)
   return (
     <header className="top-header">
       {!showArticles && (
@@ -60,12 +59,12 @@ export const MobileNav = ({toc, categories}: NavProps) => {
               <Button
                 action={() => setShowArticles(!showArticles)}
                 className="secondary full-width space-between"
-                icon={<CarrotLarge />}
               >
                 <p className={'composite-elements small'}>
                   <OpenBookIcon className={'icon-margin'} />
                   Articles
                 </p>
+                <CarrotLarge />
               </Button>
               <Button action="https://xkcd.com/285/" className="secondary full-width flex-start">
                 <p className={'composite-elements small'}>

diff --git a/app/components/Nav/Mobile/navMobile.css b/app/components/Nav/Mobile/navMobile.css
@@ -76,10 +76,11 @@
   .mobile-searchbar > * .search-box.expandable {
     width: 100%;
   }
-  .container-search-results {
-    height: 50vh !important;
-    width: 100% !important;
-    position: inherit !important;
+  .container-search-results-mobile {
+    height: 50vh;
+    width: 82vw;
+    position: inherit;
     margin-top: var(--spacing-8);
+    overflow: scroll;
   }
 }
diff --git a/app/components/Page.tsx b/app/components/Page.tsx
@@ -3,17 +3,23 @@ import {useOutletContext} from '@remix-run/react'
 import type {Context} from '~/root'
 import Footer from '~/components/Footer'
 import Nav from '~/components/Nav'
+import MobileNav from '~/components/Nav/Mobile'
 import {useTags} from '~/hooks/useCachedObjects'
 import useToC from '~/hooks/useToC'
-
+import useIsMobile from '~/hooks/isMobile'
 const Page = ({children, modal}: {children: ReactNode; modal?: boolean}) => {
   const {toc} = useToC()
   const {items: tags} = useTags()
   const {embed} = useOutletContext<Context>() || {}
-
+  const isMobile = useIsMobile()
   return (
     <>
-      {!modal && <Nav toc={toc} categories={tags} />}
+      {!modal &&
+        (isMobile ? (
+          <MobileNav toc={toc} categories={tags} />
+        ) : (
+          <Nav toc={toc} categories={tags} />
+        ))}
       {children}
 
       {!embed && !modal && <Footer />}

diff --git a/app/components/SearchResults/Dropdown.tsx b/app/components/SearchResults/Dropdown.tsx
@@ -25,14 +25,14 @@ export const SearchResults = ({results}: {results: SearchResultsProps[]}) => {
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="container-search-results bordered col-5">
+      <div className="container-search-results bordered col-5 container-search-results-mobile">
         <div className="search-result">No results found</div>
       </div>
     )
   }
 
   return (
-    <div className="container-search-results bordered col-5">
+    <div className="container-search-results bordered col-5 container-search-results-mobile">
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />