@licklist/design 0.78.5-dev.8 → 0.78.5-dev.80

package/src/v2/navigation/DashboardLayout/TopNavigation.tsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react'
+import './TopNavigation.scss'
+import BookedLogoMark from './assets/BookedLogo_Mark.png'
+import { UserAvatar } from '../../components/UserAvatar'
+import { Tooltip } from '../../components/Tooltip'
+import { UserPanel } from '../../components/UserPanel'
+
+export interface TopNavigationProps {
+    sidebarCollapsed?: boolean
+    onSidebarToggle?: () => void
+    userInitials?: string
+    userName?: string
+    userEmail?: string
+    userAvatarUrl?: string
+    userId?: number
+    userRole?: string
+    inboxCount?: number
+    notificationCount?: number
+    onUserClick?: () => void
+    onInboxClick?: () => void
+    onNotificationClick?: () => void
+    onHelpClick?: () => void
+    onProfileClick?: () => void
+    onLogoutClick?: () => void
+    mobileMenuOpen?: boolean
+    onMobileMenuToggle?: () => void
+    sidebarToggleDisabled?: boolean
+    userPanelOpen?: boolean
+}
+const SidebarOpenIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <path d="M9 13C9 11.8954 9.89543 11 11 11H29C30.1046 11 31 11.8954 31 13V27C31 28.1046 30.1046 29 29 29H11C9.89543 29 9 28.1046 9 27V13Z" fill="var(--surfaces-main-background-primary, #FFFFFF)"/>
+    <path d="M26 16L22 20L26 24" stroke="var(--fills-main-fill-secondary, #626A90)" strokeWidth="2" fill="none"/>
+    <path opacity="0.4" d="M9 13C9 11.8954 9.89543 11 11 11H17V29H11C9.89543 29 9 28.1046 9 27V13Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+    <path d="M29 10C30.6569 10 32 11.3431 32 13V27C32 28.6569 30.6569 30 29 30H11C9.34315 30 8 28.6569 8 27V13C8 11.3431 9.34315 10 11 10H29ZM18 28H29C29.5523 28 30 27.5523 30 27V13C30 12.4477 29.5523 12 29 12H18V28ZM11 12C10.4477 12 10 12.4477 10 13V27C10 27.5523 10.4477 28 11 28H16V12H11Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+  </svg>
+)
+const SidebarCollapsedIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <path d="M9 13C9 11.8954 9.89543 11 11 11H29C30.1046 11 31 11.8954 31 13V27C31 28.1046 30.1046 29 29 29H11C9.89543 29 9 28.1046 9 27V13Z" fill="var(--surfaces-main-background-primary, #FFFFFF)"/>
+    <path d="M20 24L24 20L20 16" stroke="var(--fills-main-fill-secondary, #626A90)" strokeWidth="2" fill="none"/>
+    <path opacity="0.4" d="M9 13C9 11.8954 9.89543 11 11 11H13V29H11C9.89543 29 9 28.1046 9 27V13Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+    <path d="M29 10C30.6569 10 32 11.3431 32 13V27C32 28.6569 30.6569 30 29 30H11C9.34315 30 8 28.6569 8 27V13C8 11.3431 9.34315 10 11 10H29ZM14 28H29C29.5523 28 30 27.5523 30 27V13C30 12.4477 29.5523 12 29 12H14V28ZM11 12C10.4477 12 10 12.4477 10 13V27C10 27.5523 10.4477 28 11 28H12V12H11Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+  </svg>
+)
+const InboxIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+        {(hovered && !active) && (
+            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="var(--fills-main-fill-secondary, #626A90)" fillOpacity="0.3"/>
+        )}
+        {active && (
+            <path d="M11 10H21L22.5 18H19L18 20L16 20.5L14 20L13 18H9.5L11 10Z" fill="white" fillOpacity="0.3"/>
+        )}
+        <path d="M8.02381 7.78307C8.12549 7.32553 8.5313 7 9 7H23C23.4687 7 23.8745 7.32553 23.9762 7.78307L25.9762 16.7831C25.992 16.8543 26 16.927 26 17V24C26 24.5523 25.5523 25 25 25H7C6.44772 25 6 24.5523 6 24V17C6 16.927 6.00799 16.8543 6.02381 16.7831L8.02381 7.78307ZM9.80217 9L8.24662 16H13C13 17.6569 14.3431 19 16 19C17.6569 19 19 17.6569 19 16H23.7534L22.1978 9H9.80217ZM20.584 18C19.8124 19.7659 18.0503 21 16 21C13.9497 21 12.1876 19.7659 11.416 18H8V23H24V18H20.584Z" fill={active ? 'white' : 'var(--fills-main-fill-secondary, #626A90)'}/>
+    </svg>
+)
+const NotificationIcon = ({ active, hovered }: { active?: boolean; hovered?: boolean }) => {
+    if (active) {
+        return (
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" fill="white" />
+            </svg>
+        )
+    }
+    if (hovered) {
+        return (
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+                <path d="M22.4874 15.5353C23.2901 12.3202 21.3346 9.06324 18.1196 8.26054C14.9045 7.45785 11.6475 9.41342 10.8448 12.6284L8.90696 20.3902L20.5496 23.297L22.4874 15.5353ZM22.3285 24.4283L22.5874 25.0426C22.6947 25.2971 22.5753 25.5903 22.3208 25.6976C22.2212 25.7396 22.1105 25.7481 22.0055 25.7219L6.48205 21.8461C6.21413 21.7792 6.05118 21.5078 6.11806 21.2399C6.14427 21.1349 6.20382 21.0413 6.28775 20.9731L6.80502 20.5525L8.9044 12.144C9.97467 7.85727 14.3173 5.24985 18.604 6.32011C22.8907 7.39038 25.4981 11.733 24.4279 16.0197L22.3285 24.4283ZM15.4569 25.1176L20.308 26.3288C19.9735 27.6683 18.6164 28.4832 17.2768 28.1487C15.9373 27.8143 15.1224 26.4572 15.4569 25.1176Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+            </svg>
+        )
+    }
+    return (
+        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+            <path d="M22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14V22H22V14ZM24 22.6667L24.4 23.2C24.5657 23.4209 24.5209 23.7343 24.3 23.9C24.2135 23.9649 24.1082 24 24 24H8C7.72386 24 7.5 23.7761 7.5 23.5C7.5 23.3918 7.53509 23.2865 7.6 23.2L8 22.6667V14C8 9.58172 11.5817 6 16 6C20.4183 6 24 9.58172 24 14V22.6667ZM13.5 25H18.5C18.5 26.3807 17.3807 27.5 16 27.5C14.6193 27.5 13.5 26.3807 13.5 25Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+        </svg>
+    )
+}
+const HelpIcon = ({ hovered }: { hovered?: boolean }) => (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+        {hovered && (
+            <circle opacity="0.1" cx="16" cy="16" r="10" fill="var(--fills-main-fill-secondary, #626A90)"/>
+        )}
+        <path d="M16 5C22.0751 5 27 9.92487 27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5ZM16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+        <path d="M14.8184 17.6655V17.5086C14.8214 16.97 14.8691 16.5407 14.9615 16.2206C15.0569 15.9005 15.1954 15.642 15.377 15.445C15.5585 15.2481 15.777 15.0696 16.0325 14.9095C16.2233 14.7864 16.3941 14.6587 16.5449 14.5263C16.6957 14.394 16.8158 14.2478 16.905 14.0878C16.9943 13.9247 17.0389 13.7431 17.0389 13.543C17.0389 13.3307 16.9881 13.1445 16.8865 12.9844C16.785 12.8244 16.648 12.7013 16.4757 12.6151C16.3064 12.5289 16.1187 12.4859 15.9125 12.4859C15.7124 12.4859 15.5231 12.5305 15.3446 12.6197C15.1661 12.7059 15.0199 12.8352 14.9061 13.0075C14.7922 13.1768 14.7306 13.3876 14.7214 13.64H12.8379C12.8533 13.0245 13.001 12.5166 13.2811 12.1165C13.5611 11.7134 13.932 11.4133 14.3936 11.2163C14.8553 11.0163 15.3646 10.9163 15.9217 10.9163C16.5342 10.9163 17.0758 11.0178 17.5467 11.2209C18.0176 11.421 18.3869 11.7118 18.6547 12.0935C18.9224 12.4751 19.0563 12.9352 19.0563 13.4738C19.0563 13.8339 18.9963 14.1539 18.8762 14.434C18.7593 14.711 18.5946 14.9572 18.3823 15.1727C18.1699 15.385 17.9191 15.5774 17.6298 15.7497C17.3867 15.8944 17.1866 16.0452 17.0297 16.2021C16.8758 16.3591 16.7604 16.5407 16.6834 16.7469C16.6096 16.9531 16.5711 17.207 16.568 17.5086V17.6655H14.8184ZM15.7324 20.6201C15.4247 20.6201 15.1615 20.5124 14.943 20.2969C14.7276 20.0784 14.6214 19.8168 14.6245 19.5121C14.6214 19.2105 14.7276 18.952 14.943 18.7366C15.1615 18.5211 15.4247 18.4134 15.7324 18.4134C16.0248 18.4134 16.2818 18.5211 16.5034 18.7366C16.725 18.952 16.8373 19.2105 16.8404 19.5121C16.8373 19.7153 16.7834 19.9015 16.6788 20.0707C16.5772 20.2369 16.4434 20.3708 16.2772 20.4724C16.111 20.5709 15.9294 20.6201 15.7324 20.6201Z" fill="var(--fills-main-fill-secondary, #626A90)"/>
+    </svg>
+)
+const BookedLogoFull = ({ className }: { className?: string }) => (
+    <svg 
+        width="98" 
+        height="25" 
+        viewBox="0 0 98 25" 
+        fill="none" 
+        className={className}
+    >
+        <defs>
+            <linearGradient id="booked-gradient" x1="21.0002" y1="9.5" x2="4.50024" y2="17" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#6200EE" />
+                <stop offset="0.5" stopColor="#5D5BF4" />
+                <stop offset="1" stopColor="#0E8CE2" />
+            </linearGradient>
+        </defs>
+        
+        
+        <path 
+            d="M7.5265 4.86842C9.1925 3.17961 9.9701 2.74305 10.9049 2.45584C11.8397 2.16862 12.7957 2.16862 13.7305 2.45584C14.6653 2.74305 15.4429 3.17961 17.1089 4.86842L19.8327 7.62955C21.4987 9.31836 21.9294 10.1066 22.2127 11.0542C22.496 12.0018 22.496 12.9709 22.2127 13.9185C21.9294 14.8661 21.4987 15.6543 19.8327 17.3431L17.1089 20.1042C15.4429 21.793 14.6653 22.2296 13.7305 22.5168C12.7957 22.804 11.8397 22.804 10.9049 22.5168C9.9701 22.2296 9.1925 21.793 7.5265 20.1042L4.80266 17.3431C3.13666 15.6543 2.70599 14.8661 2.42266 13.9185C2.13933 12.9709 2.13933 12.0018 2.42266 11.0542C2.70599 10.1066 3.13666 9.31836 4.80266 7.62955L7.5265 4.86842ZM9.02372 6.30766L6.26118 9.10803C4.96243 10.4246 4.6069 10.9575 4.39663 11.6607C4.23154 12.2128 4.23154 12.7598 4.39663 13.312C4.6048 14.0082 4.95534 14.5374 6.22249 15.8254L9.02375 18.665C10.2943 19.9495 10.8164 20.3048 11.5032 20.5158C12.0479 20.6832 12.5875 20.6832 13.1322 20.5158C13.8259 20.3027 14.3516 19.9423 15.6504 18.6258L18.3742 15.8646C19.6729 14.5481 20.0285 14.0152 20.2387 13.312C20.4038 12.7598 20.4038 12.2128 20.2387 11.6607C20.0285 10.9575 19.6729 10.4246 18.3742 9.10803L15.6504 6.3469C14.3516 5.03038 13.8259 4.66998 13.1322 4.45683C12.5875 4.28948 12.0479 4.28948 11.5032 4.45683C10.8164 4.66784 10.2943 5.02318 9.02372 6.30766ZM15.8147 11.4923C16.3685 10.9309 17.2664 10.9309 17.8202 11.4923C18.3739 12.0537 18.374 12.9638 17.8202 13.5252L13.3535 18.0531C12.7997 18.6144 11.9018 18.6144 11.348 18.0531L10.6958 17.392C10.5739 17.2684 10.5424 17.2107 10.5217 17.1414C10.501 17.0721 10.501 17.0011 10.5217 16.9318C10.5424 16.8625 10.5739 16.8048 10.6958 16.6812L15.8147 11.4923ZM8.35774 14.0054C8.49112 13.8702 8.67213 13.7944 8.86075 13.7949L11.4696 13.801C11.612 13.8013 11.7272 13.9186 11.7268 14.063C11.7267 14.1307 11.7006 14.1958 11.654 14.2444L11.5164 14.3881L9.88948 16.0226C9.73826 16.1745 9.49432 16.174 9.34376 16.0214L8.35774 15.0219C8.08085 14.7412 8.08085 14.2861 8.35774 14.0054Z" 
+            fill="url(#booked-gradient)"
+        />
+        
+        
+        <path 
+            d="M40.7292 9.05655C42.0233 9.05655 43.0329 9.39581 43.7581 10.0743C44.4832 10.7529 44.8458 11.6859 44.8458 12.8733V14.6545C44.8458 15.8984 44.4804 16.8795 43.7497 17.5976C43.019 18.3157 42.0121 18.6748 40.7292 18.6748C39.4462 18.6748 38.4394 18.3355 37.7086 17.657C36.9779 16.9784 36.6125 16.0454 36.6125 14.858V13.0769C36.6125 11.8329 36.9779 10.8518 37.7086 10.1337C38.4394 9.4156 39.4462 9.05655 40.7292 9.05655ZM49.8828 9.05655C51.1769 9.05655 52.1865 9.39581 52.9117 10.0743C53.6368 10.7529 53.9994 11.6859 53.9994 12.8733V14.6545C53.9994 15.8984 53.6341 16.8795 52.9033 17.5976C52.1726 18.3157 51.1658 18.6748 49.8828 18.6748C48.5998 18.6748 47.593 18.3355 46.8623 17.657C46.1315 16.9784 45.7662 16.0454 45.7662 14.858V13.0769C45.7662 11.8329 46.1315 10.8518 46.8623 10.1337C47.593 9.4156 48.5998 9.05655 49.8828 9.05655ZM67.9725 9.05655C69.1662 9.05655 70.1201 9.40995 70.8341 10.1168C71.5481 10.8236 71.9051 11.8329 71.9051 13.1447V13.942C71.9051 14.2134 71.8576 14.3887 71.7628 14.4679C71.668 14.547 71.4755 14.5866 71.1855 14.5866H66.5166V14.6545C66.5166 15.3217 66.6226 15.8051 66.8346 16.1048C67.0466 16.4045 67.4537 16.5543 68.0562 16.5543C68.3462 16.5543 68.5889 16.5148 68.7841 16.4356C68.9794 16.3564 69.1383 16.1981 69.261 15.9606C69.3168 15.8475 69.3866 15.7627 69.4702 15.7062C69.5539 15.6496 69.7017 15.6214 69.9137 15.6214H71.219C71.4421 15.6214 71.5927 15.6638 71.6708 15.7486C71.7489 15.8334 71.7879 15.9663 71.7879 16.1472C71.7879 16.396 71.7294 16.6363 71.6122 16.8682C71.4951 17.1 71.364 17.3007 71.219 17.4704C70.862 17.8888 70.3906 18.1941 69.8049 18.3864C69.2192 18.5786 68.5973 18.6748 67.939 18.6748C66.6449 18.6748 65.6465 18.344 64.9436 17.6824C64.2408 17.0208 63.8894 16.0341 63.8894 14.7223V13.1108C63.8894 11.8329 64.2491 10.8377 64.9687 10.1252C65.6883 9.41278 66.6896 9.05655 67.9725 9.05655ZM80.2554 6.35938C80.5455 6.35938 80.7379 6.40178 80.8328 6.4866C80.9276 6.57142 80.975 6.74388 80.975 7.00398V14.841C80.975 16.0285 80.6041 16.9643 79.8622 17.6485C79.1203 18.3327 78.1023 18.6748 76.8082 18.6748C75.5364 18.6748 74.5407 18.3327 73.8211 17.6485C73.1016 16.9643 72.7418 16.0115 72.7418 14.7902V12.9412C72.7418 11.7424 73.0541 10.7953 73.6789 10.0998C74.3036 9.40429 75.1571 9.05655 76.2392 9.05655C77.1652 9.05655 77.8569 9.28838 78.3143 9.75204V7.00398C78.3143 6.74388 78.3617 6.57142 78.4565 6.4866C78.5513 6.40178 78.7438 6.35938 79.0338 6.35938H80.2554ZM91.3366 6.82054C91.6267 6.82054 91.8191 6.86294 91.9139 6.94776C92.0088 7.03258 92.0562 7.20504 92.0562 7.46514V9.31415H93.2778C93.5344 9.31415 93.7073 9.35656 93.7966 9.44137C93.8858 9.52619 93.9304 9.68734 93.9304 9.92483V10.773C93.9304 11.0331 93.8858 11.2084 93.7966 11.2989C93.7073 11.3893 93.5344 11.4346 93.2778 11.4346H92.0562V14.9969C92.0562 15.404 92.1231 15.698 92.257 15.879C92.3909 16.0599 92.614 16.1504 92.9264 16.1504H93.2109C93.4898 16.1504 93.6738 16.1928 93.7631 16.2776C93.8523 16.3624 93.897 16.5349 93.897 16.795V17.8297C93.897 18.0785 93.8523 18.2453 93.7631 18.3302C93.6738 18.415 93.4842 18.4574 93.1941 18.4574H92.3741C91.3031 18.4574 90.539 18.2199 90.0816 17.7449C89.6241 17.27 89.3954 16.484 89.3954 15.387V7.46514C89.3954 7.20504 89.4429 7.03258 89.5377 6.94776C89.6325 6.86294 89.825 6.82054 90.115 6.82054H91.3366ZM31.6425 6.35938C34.1972 6.35938 35.4746 7.37718 35.4746 9.41278V9.6333C35.4746 10.2327 35.3324 10.7614 35.0479 11.2194C34.7634 11.6774 34.3869 11.9856 33.9183 12.1439C34.4761 12.2796 34.9252 12.5849 35.2654 13.0599C35.6057 13.5349 35.7758 14.089 35.7758 14.7223V14.9937C35.7758 16.1812 35.4244 17.0519 34.7216 17.6061C34.0187 18.1602 32.9087 18.4373 31.3915 18.4373H27.9107C27.6207 18.4373 27.4282 18.3949 27.3334 18.3101C27.2386 18.2252 27.1912 18.0528 27.1912 17.7927V7.00398C27.1912 6.74388 27.2386 6.57142 27.3334 6.4866C27.4282 6.40178 27.6207 6.35938 27.9107 6.35938H31.6425ZM57.1455 6.35938C57.4355 6.35938 57.628 6.40178 57.7228 6.4866C57.8176 6.57142 57.865 6.74388 57.865 7.00398V12.7037L60.3584 9.76901C60.5481 9.54283 60.682 9.40712 60.7601 9.36189C60.8381 9.31665 60.9664 9.29403 61.1449 9.29403H62.8351C63.1363 9.29403 63.2869 9.41843 63.2869 9.66723C63.2869 9.79162 63.2256 9.91602 63.1028 10.0404L60.6931 12.7206L63.5045 17.6909C63.5937 17.8492 63.6383 17.9793 63.6383 18.081C63.6383 18.3185 63.471 18.4373 63.1363 18.4373H61.4964C61.2955 18.4373 61.1422 18.4033 61.0362 18.3355C60.9302 18.2676 60.827 18.1432 60.7266 17.9623L58.9026 14.5866L57.865 15.7401V17.7927C57.865 18.0528 57.8176 18.2252 57.7228 18.3101C57.628 18.3949 57.4355 18.4373 57.1455 18.4373H55.9908C55.7007 18.4373 55.5083 18.3949 55.4135 18.3101C55.3186 18.2252 55.2712 18.0528 55.2712 17.7927V7.00398C55.2712 6.74388 55.3186 6.57142 55.4135 6.4866C55.5083 6.40178 55.7007 6.35938 55.9908 6.35938H57.1455ZM87.083 11.1346C87.3731 11.1346 87.5655 11.177 87.6603 11.2618C87.7552 11.3466 87.8026 11.5191 87.8026 11.7792L87.7859 17.7757C87.7859 18.0358 87.7384 18.2083 87.6436 18.2931C87.5488 18.3779 87.3563 18.4203 87.0663 18.4203H85.8447C85.5546 18.4203 85.3622 18.3779 85.2673 18.2931C85.1725 18.2083 85.1251 18.0358 85.1251 17.7757L85.1418 11.7792C85.1418 11.5191 85.1893 11.3466 85.2841 11.2618C85.3789 11.177 85.5714 11.1346 85.8614 11.1346H87.083ZM40.7794 11.177C40.2997 11.177 39.9287 11.3325 39.6665 11.6435C39.4044 11.9545 39.2733 12.404 39.2733 12.992V14.7393C39.2733 15.9493 39.7418 16.5543 40.679 16.5543C41.1698 16.5543 41.5436 16.3988 41.8002 16.0879C42.0567 15.7769 42.185 15.3273 42.185 14.7393V12.992C42.185 11.782 41.7165 11.177 40.7794 11.177ZM49.933 11.177C49.4533 11.177 49.0823 11.3325 48.8202 11.6435C48.558 11.9545 48.4269 12.404 48.4269 12.992V14.7393C48.4269 15.9493 48.8955 16.5543 49.8326 16.5543C50.3235 16.5543 50.6972 16.3988 50.9538 16.0879C51.2104 15.7769 51.3387 15.3273 51.3387 14.7393V12.992C51.3387 11.782 50.8701 11.177 49.933 11.177ZM76.8082 11.177C75.8711 11.177 75.4025 11.782 75.4025 12.992V14.7393C75.4025 15.3273 75.528 15.7769 75.779 16.0879C76.03 16.3988 76.3954 16.5543 76.8751 16.5543C77.8346 16.5543 78.3143 15.9493 78.3143 14.7393V12.992C78.3143 12.404 78.186 11.9545 77.9294 11.6435C77.6728 11.3325 77.2991 11.177 76.8082 11.177ZM31.6592 13.3483H29.8854V16.1133H31.4751C32.468 16.1133 32.9645 15.7005 32.9645 14.875V14.5696C32.9645 14.1738 32.8529 13.8713 32.6298 13.6621C32.4067 13.4529 32.0831 13.3483 31.6592 13.3483ZM67.8721 11.1261C67.4705 11.1261 67.1525 11.2505 66.9183 11.4993C66.684 11.7481 66.5557 12.1721 66.5334 12.7715H69.2276C69.2164 12.2061 69.1076 11.7905 68.9013 11.5247C68.6949 11.259 68.3518 11.1261 67.8721 11.1261ZM31.2911 8.68335H29.8854V11.1939H31.4082C32.2672 11.1939 32.6967 10.8038 32.6967 10.0235V9.75204C32.6967 9.03958 32.2282 8.68335 31.2911 8.68335ZM86.6929 6.82054C87.0716 6.82054 87.2089 6.86118 87.3474 6.93751C87.4858 7.01384 87.5945 7.12586 87.6685 7.26858C87.7426 7.41131 87.782 7.55287 87.782 7.94328V8.58156C87.782 8.97197 87.7426 9.11353 87.6685 9.25626C87.5945 9.39898 87.4858 9.51099 87.3474 9.58732C87.2089 9.66365 87.0716 9.7043 86.6929 9.7043H86.0737C85.695 9.7043 85.5577 9.66365 85.4192 9.58732C85.2808 9.51099 85.1721 9.39898 85.0981 9.25626C85.024 9.11353 84.9846 8.97197 84.9846 8.58156V7.94328C84.9846 7.55287 85.024 7.41131 85.0981 7.26858C85.1721 7.12586 85.2808 7.01384 85.4192 6.93751C85.5577 6.86118 85.695 6.82054 86.0737 6.82054H86.6929Z" 
+            fill="var(--labels-main-label-primary, #121E52)"
+        />
+    </svg>
+)
+const BurgerIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <rect x="7" y="20" width="18" height="2" fill="var(--fills-main-fill-primary, #14215A)"/>
+        <rect x="7" y="15" width="18" height="2" fill="var(--fills-main-fill-primary, #14215A)"/>
+        <rect x="7" y="10" width="18" height="2" fill="var(--fills-main-fill-primary, #14215A)"/>
+    </svg>
+)
+const CloseIcon = () => (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
+        <rect x="9" y="22" width="18" height="2" transform="rotate(-45 9 22)" fill="var(--fills-main-fill-primary, #14215A)"/>
+        <rect x="10" y="9" width="18" height="2" transform="rotate(45 10 9)" fill="var(--fills-main-fill-primary, #14215A)"/>
+    </svg>
+)
+export const TopNavigation: React.FC<TopNavigationProps> = ({
+    sidebarCollapsed = false,
+    onSidebarToggle,
+    userInitials = 'U',
+    userName = 'User',
+    userEmail,
+    userAvatarUrl,
+    userId,
+    userRole,
+    inboxCount = 0,
+    notificationCount = 0,
+    onUserClick,
+    onInboxClick,
+    onNotificationClick,
+    onHelpClick,
+    onProfileClick,
+    onLogoutClick,
+    mobileMenuOpen = false,
+    onMobileMenuToggle,
+    sidebarToggleDisabled = false,
+    userPanelOpen = false,
+}) => {
+    const [hoveredItem, setHoveredItem] = useState<string | null>(null)
+    const [isNotificationActive, setIsNotificationActive] = useState(false)
+    const handleUserClick = () => {
+        onUserClick?.()
+    }
+    const handleNotificationClick = () => {
+        setIsNotificationActive(!isNotificationActive)
+        onNotificationClick?.()
+    }
+    return (
+        <header className="top-navigation">
+            
+            <div className="top-navigation__left">
+                
+                <button 
+                    className={`top-navigation__toggle top-navigation__toggle--mobile ${sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''}`}
+                    onClick={sidebarToggleDisabled ? undefined : onMobileMenuToggle}
+                    aria-label="Toggle mobile menu"
+                    disabled={sidebarToggleDisabled}
+                >
+                    {mobileMenuOpen ? <CloseIcon /> : <BurgerIcon />}
+                </button>
+                
+                <Tooltip 
+                    content={sidebarCollapsed ? <>Expand <strong>]</strong></> : <>Collapse <strong>[</strong></>}
+                    side="bottom" 
+                    sideOffset={8}
+                >
+                    <button 
+                        className={`top-navigation__toggle top-navigation__toggle--desktop ${sidebarToggleDisabled ? 'top-navigation__toggle--disabled' : ''}`}
+                        onClick={sidebarToggleDisabled ? undefined : onSidebarToggle}
+                        aria-label="Toggle sidebar"
+                        disabled={sidebarToggleDisabled}
+                    >
+                        {sidebarCollapsed ? <SidebarCollapsedIcon /> : <SidebarOpenIcon />}
+                    </button>
+                </Tooltip>
+                
+                <img src={BookedLogoMark} alt="Booked it" className="top-navigation__logo-mark" />
+                <BookedLogoFull className="top-navigation__logo-full" />
+            </div>
+            
+            <div className="top-navigation__right">
+                
+                <Tooltip content={`Hey ${userName}`} side="bottom" sideOffset={8} disabled={userPanelOpen}>
+                    <button 
+                        className="top-navigation__button"
+                        onMouseEnter={() => setHoveredItem('avatar')}
+                        onMouseLeave={() => setHoveredItem(null)}
+                        onClick={handleUserClick}
+                    >
+                        <UserAvatar
+                            initials={userInitials}
+                            avatarUrl={userAvatarUrl}
+                            size="md"
+                        />
+                    </button>
+                </Tooltip>
+                
+                {/* Inbox - temporarily hidden
+                <Tooltip content="Inbox" side="bottom" sideOffset={8}>
+                    <button 
+                        className="top-navigation__button"
+                        onMouseEnter={() => setHoveredItem('inbox')}
+                        onMouseLeave={() => setHoveredItem(null)}
+                        onClick={onInboxClick}
+                    >
+                        <div className="top-navigation__icon">
+                            <InboxIcon hovered={hoveredItem === 'inbox'} />
+                        </div>
+                        {inboxCount > 0 && (
+                            <div className="top-navigation__badge top-navigation__badge--green">
+                                <span>{inboxCount}</span>
+                            </div>
+                        )}
+                    </button>
+                </Tooltip>
+                */}
+                
+                {/* Notifications - temporarily hidden
+                <Tooltip content="Notifications" side="bottom" sideOffset={8} disabled={isNotificationActive}>
+                    <button 
+                        className={`top-navigation__button ${isNotificationActive ? 'top-navigation__button--active' : ''}`}
+                        onMouseEnter={() => setHoveredItem('notifications')}
+                        onMouseLeave={() => setHoveredItem(null)}
+                        onClick={handleNotificationClick}
+                    >
+                        <div className="top-navigation__icon">
+                            <NotificationIcon active={isNotificationActive} hovered={hoveredItem === 'notifications'} />
+                        </div>
+                        {notificationCount > 0 && (
+                            <div className={`top-navigation__badge ${isNotificationActive ? 'top-navigation__badge--active' : 'top-navigation__badge--orange'}`}>
+                                <span>{notificationCount}</span>
+                            </div>
+                        )}
+                    </button>
+                </Tooltip>
+                */}
+                
+                <Tooltip content="Help & FAQ's" side="bottom" sideOffset={8}>
+                    <button 
+                        className="top-navigation__button"
+                        onMouseEnter={() => setHoveredItem('help')}
+                        onMouseLeave={() => setHoveredItem(null)}
+                        onClick={onHelpClick}
+                    >
+                        <div className="top-navigation__icon">
+                            <HelpIcon hovered={hoveredItem === 'help'} />
+                        </div>
+                    </button>
+                </Tooltip>
+            </div>
+
+            {/* User Panel */}
+            <UserPanel
+                isOpen={userPanelOpen}
+                onClose={() => onUserClick?.()}
+                userName={userName}
+                email={userEmail}
+                initials={userInitials}
+                avatarUrl={userAvatarUrl}
+                userNumber={userId}
+                userRole={userRole}
+                onProfileClick={onProfileClick}
+                onLogoutClick={onLogoutClick}
+            />
+        </header>
+    )
+}

package/src/v2/navigation/DashboardLayout/index.ts

@@ -0,0 +1,23 @@
+export { DashboardLayout, type DashboardLayoutProps, type DestinationType } from './DashboardLayout'
+export { 
+    ProviderSidebar, 
+    type ProviderSidebarProps, 
+    type NavItem,
+    HomeIcon,
+    FlowsIcon,
+    InventoryIcon,
+    LoyaltyIcon,
+    CustomersIcon,
+    ReportsIcon,
+    AnalyticsIcon,
+    MarketingIcon,
+    WaiversIcon,
+    SettingsIcon,
+} from './ProviderSidebar'
+export { AdminSidebar, type AdminSidebarProps } from './AdminSidebar'
+export { TopNavigation, type TopNavigationProps } from './TopNavigation'
+export { DashboardFooter, type DashboardFooterProps } from './DashboardFooter'
+export { default } from './DashboardLayout'
+
+// Additional icons from v2/icons
+export { CalendarIcon, BookingsIcon, BookingTypesIcon, EditIcon } from '../../icons'

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.scss

@@ -0,0 +1,148 @@
+@import '../../../styles/overrides/functions';
+
+.figmas-admin-sidebar {
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    border-right: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 8px;
+    height: 100%;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+
+    &--expanded {
+        width: 268px;
+    }
+
+    &--collapsed {
+        width: 72px;
+    }
+
+    &__top {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    &__links {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: flex-start;
+        padding: 0 8px;
+        width: 100%;
+    }
+
+    &__section-label {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 8px 8px 0;
+        width: 100%;
+    }
+
+    &__label-text {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-secondary, #626A90);
+        margin: 0;
+        text-transform: none !important; // Override any global uppercase rules
+    }
+
+    &__link-item {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+    }
+
+    &__link {
+        box-sizing: border-box;
+        display: flex;
+        flex: 1 0 0;
+        gap: 8px;
+        align-items: center;
+        min-height: 0;
+        min-width: 0;
+        padding: 8px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        text-decoration: none;
+        outline: none;
+
+        &:hover {
+            background: linear-gradient(225deg, var(--gradients-stop1, #6200EE) 0%, var(--gradients-stop2, #5D5BF4) 50%, var(--gradients-stop3, #0E8CE2) 100%);
+
+            .figmas-admin-sidebar__icon svg,
+            .figmas-admin-sidebar__icon path {
+                fill: var(--fills-main-fill-white, white);
+                color: var(--fills-main-fill-white, white);
+            }
+
+            .figmas-admin-sidebar__link-text {
+                color: var(--labels-main-label-white, white);
+            }
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--fills-main-fill-primary, #14215A);
+            outline-offset: 2px;
+        }
+    }
+
+    &__icon {
+        overflow: hidden;
+        position: relative;
+        border-radius: 6px;
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__link-text {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: var(--labels-main-label-primary, #121E52);
+        margin: 0;
+        flex-shrink: 0;
+    }
+
+    // Collapsed state adjustments
+    &--collapsed {
+        .figmas-admin-sidebar__link {
+            justify-content: center;
+            gap: 0;
+        }
+
+        .figmas-admin-sidebar__link-text {
+            display: none;
+        }
+
+        .figmas-admin-sidebar__section-label {
+            padding: 10px 0 0;
+            align-items: center;
+        }
+
+        .figmas-admin-sidebar__label-text {
+            font-size: 11px;
+            line-height: 14px;
+        }
+    }
+}

package/src/v2/navigation/FigmasAdminSideBar/FigmasAdminSideBar.stories.tsx

@@ -0,0 +1,132 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { FigmasAdminSideBar } from './FigmasAdminSideBar'
+
+export default {
+    title: 'v2/Navigation/Figma Admin Side Bar',
+    component: FigmasAdminSideBar,
+    argTypes: {
+        expanded: {
+            control: 'boolean',
+            description: 'Toggle between expanded and collapsed sidebar',
+        },
+        onToggle: { action: 'toggle sidebar' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta
+
+type Story = StoryObj<typeof FigmasAdminSideBar>
+
+export const Expanded: Story = {
+    args: {
+        expanded: true,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '268px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Collapsed: Story = {
+    args: {
+        expanded: false,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: '72px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const Interactive: Story = {
+    render: function (args) {
+        const [expanded, setExpanded] = React.useState(true);
+
+        return (
+            <div style={{ width: expanded ? '268px' : '72px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                <FigmasAdminSideBar
+                    {...args}
+                    expanded={expanded}
+                    onToggle={() => setExpanded(!expanded)}
+                />
+                <button
+                    onClick={() => setExpanded(!expanded)}
+                    style={{
+                        position: 'absolute',
+                        bottom: '16px',
+                        left: '16px',
+                        padding: '8px 16px',
+                        backgroundColor: '#14215A',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer'
+                    }}
+                >
+                    Toggle Sidebar
+                </button>
+            </div>
+        );
+    },
+}
+
+export const Mobile: Story = {
+    args: {
+        expanded: false,
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: 'mobile1',
+        },
+        decorators: [
+            (Story) => (
+                <div style={{ width: '72px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                    <Story />
+                </div>
+            ),
+        ],
+    },
+}
+
+export const Tablet: Story = {
+    args: {
+        expanded: true,
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: 'tablet',
+        },
+        decorators: [
+            (Story) => (
+                <div style={{ width: '268px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                    <Story />
+                </div>
+            ),
+        ],
+    },
+}
+
+export const Desktop: Story = {
+    args: {
+        expanded: true,
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: 'desktop',
+        },
+        decorators: [
+            (Story) => (
+                <div style={{ width: '268px', height: '100vh', borderRight: '1px solid #E8E9EF' }}>
+                    <Story />
+                </div>
+            ),
+        ],
+    },
+}