Skip to content

fix base layout with responsiveness

Laxmana Arasavilli requested to merge ui_feature_base-layout into main

User description

  • Improved SidebarMenuItem styling and structure for better UX.

PR Type

Enhancement

Description

  • Redesigned sidebar with collapsible functionality and improved UX

  • Added custom loading animations and CSS keyframes

  • Restructured layout with responsive height management

  • Simplified sidebar menu structure with icon-based navigation

Diagram Walkthrough

flowchart LR
  A["Old Accordion Sidebar"] --> B["New Collapsible Sidebar"]
  B --> C["Icon Strip (Collapsed)"]
  B --> D["Full Menu (Expanded)"]
  E["Layout Structure"] --> F["Height-based Layout"]
  G["Loading Animations"] --> H["Custom CSS Keyframes"]

File Walkthrough
Relevant files
Enhancement
globals.css
Add custom loading animations and keyframes                           

src/app/globals.css

  • Added custom loading animation keyframes (before8, after6, scale)
  • Created .loading class with colorful animated bars
  • Added .before-loader and .after-loader animation classes
 +115/-0 
layout.tsx
Restructure sidebar with simplified menu configuration     

src/app/kir/layout.tsx

  • Replaced accordion-based sidebar with simplified menu structure
  • Updated sidebar configuration to use icon components and flat menu
    items
  • Changed layout to flex-based responsive design
  • Removed nested menu structure in favor of single-level navigation
 +61/-74 
layout.tsx
Implement responsive height-based layout structure             

src/app/layout.tsx

  • Added height-based layout structure with h-[100dvh] and percentage
    heights
  • Separated navbar (9%) and content (91%) areas
  • Temporarily disabled AuthGuard component
  • Added background color to body element
 +16/-12 
Navbar.tsx
Adjust navbar height and padding                                                 

src/components/common/Navbar.tsx

  • Updated navbar to use full height with h-full class
  • Reduced vertical padding from py-4 to py-3
+2/-2     
Sidebar.tsx
Redesign sidebar with collapsible functionality                   

src/components/common/Sidebar.tsx

  • Completely redesigned sidebar with collapsible functionality
  • Added toggle button with arrow icon for expand/collapse
  • Implemented dual-state UI: collapsed icon strip and expanded full menu
  • Removed accordion structure in favor of direct menu items
  • Added smooth transitions and hover effects
 +89/-163
SidebarMenu.tsx
Create simplified sidebar menu item component                       

src/components/common/SidebarMenu.tsx

  • Created new component for individual sidebar menu items
  • Simplified interface with icon, label, and click handler
  • Added active state styling with blue accent and border
  • Implemented hover effects and transitions
 +40/-0   
Edited by Rashmi Gaddam

Merge request reports