[PR #271] [MERGED] feat: Mobile Navigation #840

New issue

Closed

opened 2026-02-26 19:30:42 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 19:30:42 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/271
Author: @premiare
Created: 8/18/2023
Status: ✅ Merged
Merged: 8/21/2023
Merged by: @Mythie

Base: feat/refresh ← Head: feat/mobileNavigation

📝 Commits (7)

6e62eb8 init mobileNavigation and added documenso symbol
45d0d3f extract hamburger to own file
ad1ff61 add reducedMotion check, center menu items
9b92cad move menu links to map, add window-size hook
0f27f42 add PORT number back to package.json
2f2d5df Merge branch 'feat/refresh' into feat/mobileNavigation
6d360e5 fix: styling updates

📊 Changes

7 files changed (+192 additions, -8 deletions)

View changed files

📝 apps/marketing/package.json (+1 -1)
➕ apps/marketing/public/logo_icon.png (+0 -0)
📝 apps/marketing/src/components/(marketing)/footer.tsx (+3 -3)
📝 apps/marketing/src/components/(marketing)/header.tsx (+20 -4)
➕ apps/marketing/src/components/(marketing)/mobile-hamburger.tsx (+20 -0)
➕ apps/marketing/src/components/(marketing)/mobile-navigation.tsx (+121 -0)
➕ apps/marketing/src/hooks/use-window-size.ts (+27 -0)

📄 Description

Added a mobile navigation menu up until md: breakpoint (768px)

Contains the following:

Basic slide-out from right mobile menu - (this can be changed to a top down animation)
framer-motion animated links
Reset menu behaviour if device width changes, (resize or tablet orientation changes)
Clicking links close the menu

Preview:
https://www.loom.com/share/3c06b530b8724f8ba385ff2718f86544?sid=2f4d856d-323f-480c-8a18-0c96016d13e3

Build output:

Route (app)                                                     Size     First Load JS
┌ ○ /                                                           13.4 kB         181 kB
├ ● /[content]                                                  709 B          86.3 kB
├ ○ /blog                                                       137 B          78.4 kB
├ ● /blog/[post]                                                427 B          91.9 kB
├   ├ /blog/blog%2Fannouncing-open-source-docusign-alternative
├   ├ /blog/blog%2Fbuilding-documenso-pt1
├   └ /blog/blog%2Fmanifest
├ λ /claimed                                                    1.83 kB        85.9 kB
├ ○ /oss-friends                                                4.8 kB          136 kB
└ ○ /pricing                                                    8.12 kB         171 kB
+ First Load JS shared by all                                   78.3 kB
  ├ chunks/1dd3208c-5e49a948733d533c.js                         50.5 kB
  ├ chunks/575-b3f17f0dc55cfc6c.js                              25.7 kB
  ├ chunks/main-app-28d2072fdacf0241.js                         216 B
  └ chunks/webpack-4ce4dcdc46caa315.js                          1.79 kB

Route (pages)                                                   Size     First Load JS
┌ ○ /404                                                        178 B          75.8 kB
├ λ /api/claim-plan                                             0 B            75.6 kB
└ λ /api/stripe/webhook                                         0 B            75.6 kB
+ First Load JS shared by all                                   75.6 kB
  ├ chunks/framework-0857c1c24dbfb1d6.js                        45 kB
  ├ chunks/main-cdde65adb9216d0b.js                             28.6 kB
  ├ chunks/pages/_app-12a7bb3ca92362ee.js                       195 B
  └ chunks/webpack-4ce4dcdc46caa315.js                          1.79 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Note: haven't tested on physical mobiles yet, just browser testing.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/271 **Author:** [@premiare](https://github.com/premiare) **Created:** 8/18/2023 **Status:** ✅ Merged **Merged:** 8/21/2023 **Merged by:** [@Mythie](https://github.com/Mythie) **Base:** `feat/refresh` ← **Head:** `feat/mobileNavigation` --- ### 📝 Commits (7) - [`6e62eb8`](https://github.com/documenso/documenso/commit/6e62eb8d81d72f0893681c5da2479586c5364cbd) init mobileNavigation and added documenso symbol - [`45d0d3f`](https://github.com/documenso/documenso/commit/45d0d3f7e8ab289cdc1f8783d82d3fa89f8fe216) extract hamburger to own file - [`ad1ff61`](https://github.com/documenso/documenso/commit/ad1ff6159c655f04878f1d2da8742960f2e4fa0f) add reducedMotion check, center menu items - [`9b92cad`](https://github.com/documenso/documenso/commit/9b92cad2dbe3d7be3c4b7935d7316e5ab7abf373) move menu links to map, add window-size hook - [`0f27f42`](https://github.com/documenso/documenso/commit/0f27f4261b08710d5fa5d37ee3465269b1fcb9fa) add PORT number back to package.json - [`2f2d5df`](https://github.com/documenso/documenso/commit/2f2d5dfc0b158c107ebc85c06a5dc8307af0d748) Merge branch 'feat/refresh' into feat/mobileNavigation - [`6d360e5`](https://github.com/documenso/documenso/commit/6d360e581d6516aa512d7f5073aef16483112fbf) fix: styling updates ### 📊 Changes **7 files changed** (+192 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `apps/marketing/package.json` (+1 -1) ➕ `apps/marketing/public/logo_icon.png` (+0 -0) 📝 `apps/marketing/src/components/(marketing)/footer.tsx` (+3 -3) 📝 `apps/marketing/src/components/(marketing)/header.tsx` (+20 -4) ➕ `apps/marketing/src/components/(marketing)/mobile-hamburger.tsx` (+20 -0) ➕ `apps/marketing/src/components/(marketing)/mobile-navigation.tsx` (+121 -0) ➕ `apps/marketing/src/hooks/use-window-size.ts` (+27 -0) </details> ### 📄 Description Added a mobile navigation menu up until `md:` breakpoint `(768px)` Contains the following: - Basic slide-out from right mobile menu - (this can be changed to a top down animation) - framer-motion animated links - Reset menu behaviour if device width changes, (resize or tablet orientation changes) - Clicking links close the menu Preview: https://www.loom.com/share/3c06b530b8724f8ba385ff2718f86544?sid=2f4d856d-323f-480c-8a18-0c96016d13e3 Build output: ``` Route (app) Size First Load JS ┌ ○ / 13.4 kB 181 kB ├ ● /[content] 709 B 86.3 kB ├ ○ /blog 137 B 78.4 kB ├ ● /blog/[post] 427 B 91.9 kB ├ ├ /blog/blog%2Fannouncing-open-source-docusign-alternative ├ ├ /blog/blog%2Fbuilding-documenso-pt1 ├ └ /blog/blog%2Fmanifest ├ λ /claimed 1.83 kB 85.9 kB ├ ○ /oss-friends 4.8 kB 136 kB └ ○ /pricing 8.12 kB 171 kB + First Load JS shared by all 78.3 kB ├ chunks/1dd3208c-5e49a948733d533c.js 50.5 kB ├ chunks/575-b3f17f0dc55cfc6c.js 25.7 kB ├ chunks/main-app-28d2072fdacf0241.js 216 B └ chunks/webpack-4ce4dcdc46caa315.js 1.79 kB Route (pages) Size First Load JS ┌ ○ /404 178 B 75.8 kB ├ λ /api/claim-plan 0 B 75.6 kB └ λ /api/stripe/webhook 0 B 75.6 kB + First Load JS shared by all 75.6 kB ├ chunks/framework-0857c1c24dbfb1d6.js 45 kB ├ chunks/main-cdde65adb9216d0b.js 28.6 kB ├ chunks/pages/_app-12a7bb3ca92362ee.js 195 B └ chunks/webpack-4ce4dcdc46caa315.js 1.79 kB λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) ``` Note: haven't tested on physical mobiles yet, just browser testing. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>