@licklist/design 0.78.21 → 0.78.25

package/src/v2/navigation/DashboardLayout/Sidebar.stories.tsx

@@ -0,0 +1,220 @@
+import { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { ProviderSidebar } from './ProviderSidebar'
+import { AdminSidebar } from './AdminSidebar'
+
+export default {
+    title: 'v2/Dashboard Layout/Sidebar',
+    component: ProviderSidebar,
+    argTypes: {
+        expanded: {
+            control: 'boolean',
+            description: 'Whether the sidebar is expanded',
+        },
+        providerName: {
+            control: 'text',
+            description: 'Name of the venue/provider',
+        },
+        providerId: {
+            control: 'text',
+            description: 'Venue/Provider ID',
+        },
+        providerImage: {
+            control: 'text',
+            description: 'URL of venue/provider image',
+        },
+        providerType: {
+            control: 'select',
+            options: ['venue', 'promoter'],
+            description: 'Type of provider',
+        },
+        showBackToAdmin: {
+            control: 'boolean',
+            description: 'Show back to admin panel link',
+        },
+        activePath: {
+            control: 'text',
+            description: 'Currently active path',
+        },
+        onNavigation: { action: 'navigation clicked' },
+        onBackToAdmin: { action: 'back to admin clicked' },
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+} as Meta<typeof ProviderSidebar>
+
+type Story = StoryObj<typeof ProviderSidebar>
+
+export const ProviderExpanded: Story = {
+    render: function ProviderExpandedStory() {
+        const [activePath, setActivePath] = useState('/home')
+        
+        return (
+            <div style={{ width: '268px', height: '100vh' }}>
+                <ProviderSidebar 
+                    expanded={true}
+                    providerName="Sharky's Soft Play"
+                    providerId="01"
+                    providerType="venue"
+                    activePath={activePath}
+                    onNavigation={(path) => setActivePath(path)}
+                />
+            </div>
+        )
+    },
+}
+
+export const ProviderCollapsed: Story = {
+    render: () => (
+        <div style={{ width: '72px', height: '100vh' }}>
+            <ProviderSidebar 
+                expanded={false}
+                providerName="Sharky's Soft Play"
+                providerId="01"
+                activePath="/home"
+            />
+        </div>
+    ),
+}
+
+export const ProviderWithBackLink: Story = {
+    render: function ProviderWithBackLinkStory() {
+        const [activePath, setActivePath] = useState('/home')
+        
+        return (
+            <div style={{ width: '268px', height: '100vh' }}>
+                <ProviderSidebar 
+                    expanded={true}
+                    providerName="Sharky's Soft Play"
+                    providerId="01"
+                    providerType="venue"
+                    activePath={activePath}
+                    onNavigation={(path) => setActivePath(path)}
+                    showBackToAdmin={true}
+                    onBackToAdmin={() => alert('Navigate to Admin Panel')}
+                />
+            </div>
+        )
+    },
+}
+
+export const AdminExpanded: Story = {
+    render: function AdminExpandedStory() {
+        const [activePath, setActivePath] = useState('/admin')
+        
+        return (
+            <div style={{ width: '268px', height: '100vh' }}>
+                <AdminSidebar 
+                    expanded={true} 
+                    activePath={activePath}
+                    onNavigation={(path) => setActivePath(path)}
+                />
+            </div>
+        )
+    },
+}
+
+export const AdminCollapsed: Story = {
+    render: () => (
+        <div style={{ width: '72px', height: '100vh' }}>
+            <AdminSidebar 
+                expanded={false}
+                activePath="/admin"
+            />
+        </div>
+    ),
+}
+
+export const Interactive: Story = {
+    render: function InteractiveStory() {
+        const [expanded, setExpanded] = useState(true)
+        const [isAdmin, setIsAdmin] = useState(false)
+        const [activePath, setActivePath] = useState('/home')
+
+        return (
+            <div style={{ display: 'flex', height: '100vh' }}>
+                <div style={{ 
+                    width: expanded ? '268px' : '72px', 
+                    transition: 'width 0.3s ease',
+                    flexShrink: 0,
+                }}>
+                    {isAdmin ? (
+                        <AdminSidebar 
+                            expanded={expanded}
+                            activePath={activePath}
+                            onNavigation={(path) => setActivePath(path)}
+                        />
+                    ) : (
+                        <ProviderSidebar 
+                            expanded={expanded} 
+                            providerName="Sharky's Soft Play"
+                            providerId="01"
+                            providerType="venue"
+                            activePath={activePath}
+                            onNavigation={(path) => setActivePath(path)}
+                        />
+                    )}
+                </div>
+                
+                <div style={{ flex: 1, padding: '24px', background: '#fff' }}>
+                    <h2 style={{ 
+                        fontFamily: 'Geist, sans-serif', 
+                        fontSize: '18px', 
+                        fontWeight: 600, 
+                        color: '#121E52',
+                        marginBottom: '16px'
+                    }}>
+                        Sidebar Controls
+                    </h2>
+                    
+                    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px' }}>
+                        <button
+                            onClick={() => setExpanded(!expanded)}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: '#14215A',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                fontFamily: 'Geist, sans-serif',
+                                fontSize: '13px',
+                            }}
+                        >
+                            {expanded ? 'Collapse' : 'Expand'}
+                        </button>
+                        <button
+                            onClick={() => {
+                                setIsAdmin(!isAdmin)
+                                setActivePath(isAdmin ? '/home' : '/admin')
+                            }}
+                            style={{
+                                padding: '8px 16px',
+                                backgroundColor: isAdmin ? '#6200EE' : '#F8F8FA',
+                                color: isAdmin ? 'white' : '#121E52',
+                                border: '1px solid #E8E9EF',
+                                borderRadius: '6px',
+                                cursor: 'pointer',
+                                fontFamily: 'Geist, sans-serif',
+                                fontSize: '13px',
+                            }}
+                        >
+                            {isAdmin ? 'Admin Sidebar' : 'Provider Sidebar'}
+                        </button>
+                    </div>
+                    
+                    <p style={{ 
+                        fontFamily: 'Geist, sans-serif', 
+                        fontSize: '13px', 
+                        color: '#626A90',
+                    }}>
+                        State: <strong>{expanded ? 'Expanded' : 'Collapsed'}</strong> | 
+                        Type: <strong>{isAdmin ? 'Admin' : 'Provider'}</strong> | 
+                        Active: <code style={{ background: '#F8F8FA', padding: '2px 6px', borderRadius: '4px' }}>{activePath}</code>
+                    </p>
+                </div>
+            </div>
+        )
+    },
+}

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

@@ -0,0 +1,206 @@
+.top-navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--surfaces-main-background-secondary, #F8F8FA);
+    height: 48px;
+    padding: 0 4px;
+    border-bottom: 1px solid var(--borders-main-border-primary, #E8E9EF);
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 30;
+    box-sizing: border-box;
+
+    &__left {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex: 1;
+    }
+
+    &__right {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 8px;
+        padding: 4px;
+    }
+
+    
+    &__toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: var(--surfaces-main-background-primary, #FFFFFF);
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        padding: 0;
+
+        svg {
+            width: 40px;
+            height: 40px;
+            display: block;
+        }
+
+        &:hover:not(&--disabled) {
+            background: var(--surfaces-main-background-primary-hover, #F0F0F4);
+        }
+
+        &--disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        &--mobile {
+            display: flex;
+
+            @media (min-width: 640px) {
+                display: none;
+            }
+        }
+
+        &--desktop {
+            display: none;
+
+            @media (min-width: 640px) {
+                display: flex;
+            }
+        }
+    }
+
+    
+    &__logo-mark {
+        height: 36px;
+        width: 36px;
+
+        @media (min-width: 640px) {
+            display: none;
+        }
+    }
+
+    &__logo-full {
+        display: none;
+        height: 28px;
+
+        @media (min-width: 640px) {
+            display: block;
+        }
+    }
+
+    
+    &__button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2px;
+        padding: 4px;
+        border-radius: 8px;
+        border: none;
+        background: var(--surfaces-main-background-primary, #FFFFFF);
+        cursor: pointer;
+        transition: background 0.2s ease;
+        min-width: 40px;
+        height: 40px;
+
+        &:hover:not(&--active) {
+            background: var(--surfaces-main-background-primary-hover, #F0F0F4);
+        }
+
+        &--active {
+            background: linear-gradient(
+                135deg,
+                #6200EE 0%,
+                #5D5BF4 50%,
+                #0E8CE2 100%
+            );
+        }
+    }
+
+    &__icon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    
+    &__avatar {
+        width: 32px;
+        height: 32px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        border-radius: 50%;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__avatar-bg {
+        position: absolute;
+    }
+
+    &__avatar-initials {
+        font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-size: 10px;
+        font-weight: 800;
+        line-height: 8px;
+        color: var(--labels-main-label-secondary, #626A90);
+        position: relative;
+        margin-top: 2px;
+
+        &--active {
+            color: white;
+        }
+    }
+
+    
+    &__badge {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 4px 8px;
+        border-radius: 9999px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        margin-right: 4px;
+
+        span {
+            font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+            font-size: 10px;
+            font-weight: 600;
+            line-height: 13px;
+            color: var(--labels-main-label-primary, #121E52);
+        }
+
+        &--green {
+            background: rgba(16, 185, 129, 0.2);
+        }
+
+        &--orange {
+            background: rgba(245, 158, 11, 0.2);
+        }
+
+        &--active {
+            background: rgba(255, 255, 255, 0.3);
+            border-color: rgba(255, 255, 255, 0.3);
+
+            span {
+                color: white;
+            }
+        }
+    }
+}