improved drawer + added pwa installation notice

components/MobileNavigation.tsx

@@ -1,4 +1,4 @@
-import { dropdownTriggerer, isPWA } from "@/lib/client/utils";
+import { dropdownTriggerer, isIphone } from "@/lib/client/utils";
 import React from "react";
 import { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
@@ -20,7 +20,7 @@ export default function MobileNavigation({}: Props) {
       >
         <div
           className={`w-full flex bg-base-100 ${
-            isPWA() ? "pb-5" : ""
+            isIphone() ? "pb-5" : ""
           } border-solid border-t-neutral-content border-t`}
         >
           <MobileNavigationButton href={`/dashboard`} icon={"bi-house"} />

components/Modal.tsx

@@ -20,7 +20,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         document.body.style.position = "";
       };
     }
-  });
+  }, []);
 
   if (window.innerWidth < 640) {
     return (

lib/client/utils.ts

@@ -6,6 +6,10 @@ export function isPWA() {
   );
 }
 
+export function isIphone() {
+  return /iPhone/.test(navigator.userAgent) && !(window as any).MSStream;
+}
+
 export function dropdownTriggerer(e: any) {
   let targetEl = e.currentTarget;
   if (targetEl && targetEl.matches(":focus")) {

package.json

@@ -59,7 +59,7 @@
     "react-image-file-resizer": "^0.4.8",
     "react-select": "^5.7.4",
     "stripe": "^12.13.0",
-    "vaul": "^0.8.0",
+    "vaul": "^0.8.8",
     "zustand": "^4.3.8"
   },
   "devDependencies": {

pages/login.tsx

@@ -170,6 +170,13 @@ export default function Login({
           {displayLoginCredential()}
           {displayLoginExternalButton()}
           {displayRegistration()}
+          <Link
+            href="https://docs.linkwarden.app/getting-started/pwa-installation"
+            className="underline text-center"
+            target="_blank"
+          >
+            You can install Linkwarden onto your device
+          </Link>
         </div>
       </form>
     </CenteredForm>

styles/globals.css

@@ -27,11 +27,6 @@
   color: var(--selection-color);
 }
 
-html,
-body {
-  scroll-behavior: smooth;
-}
-
 /* Hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
   display: none;

yarn.lock

@@ -5912,10 +5912,10 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-vaul@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.8.0.tgz#f2155dcb5561d33df4f0794603e91e35672a8d58"
-  integrity sha512-9nUU2jIObJvJZxeQU1oVr/syKo5XqbRoOMoTEt0hHlWify4QZFlqTh6QSN/yxoKzNrMeEQzxbc3XC/vkPLOIqw==
+vaul@^0.8.8:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.8.8.tgz#c5edc041825fdeaddf0a89e326abcc7ac7449a2d"
+  integrity sha512-Z9K2b90M/LtY/sRyM1yfA8Y4mHC/5WIqhO2u7Byr49r5LQXkLGdVXiehsnjtws9CL+DyknwTuRMJXlCOHTqg/g==
   dependencies:
     "@radix-ui/react-dialog" "^1.0.4"